15个提高编程技巧的JavaScript工具

原文地址:http://www.imooc.com/wenda/detail/243523

 JavaScript脚本库是一个预先用JavaScript语言写好的库,它方便了我们开发基于JavaScript的应用程序,特别适合AJAX和其他一些以Web为中心的技术。JavaScript主要用于编写嵌入或者包含在HTML页面的函数,从而实现DOM之间的交互。

  这篇文章收集了15个可用于提高编程技巧的JavaScript工具,助你轻松快速完成工作。下面的这些JavaScript工具能让你管理Javascript状态、压缩JavaScript代码、重构脚本代码结构等等。真诚地希望以下这些工具能对你有用。并且如果你还知道其他的JavaScript工具,欢迎不吝赐教。

  1. JavaScript State Manager

  JavaScript State Manager是一种轻量级的、易于使用的状态管理器,主要用于响应式网站。它不需要任何的JavaScript框架。你可以定义断点将运行在当前断点的JavaScript代码打包在一起。

  官方网站:http://www.simplestatemanager.com/

  2. jsMini

  如果你想快速、轻松地压缩JavaScript或jQuery文件,那么可以使用jsMini。只需复制粘贴源代码,选择是否要基本或完全压缩,然后就ok了。

  官方网站:http://www.jsmini.com/

  3. CountUp.js

  CountUp.js是一个独立的、轻量级的JavaScript类库,可用于快速创建一个有意思的显示数值数据的动画。从字面上看,CountUp还能根据你传递的startVal和dendVal参数计数两者中的任意方向。Bower和.json文件的组件都包含在内,以及CoffeeScript版本。

  官方网站:http://inorganik.github.io/countUp.js/

  4.Grasp

  Grasp能让你搜索、替换和重构基于代码结构的JavaScript,而不是纯文本。它比标准搜索和替换的功能更强大,能让你更加轻松地重构你的代码。

  官方网站:http://graspjs.com/

  5. Gulp.js

  Gulp.js是一个流构建系统。它利用流和代码配置的方法使得出来一个更为简单直观的构建。通过优先代码过度配置,Gulp使得简单的事情继续简单,而复杂的任务则可管理化。

  官方网站:http://gulpjs.com/

  6.Orcrad.js

  Ocrad.js是一个简单的OCR程序,可以将图像转化成文字。这是一个Ocrad项目的纯JavaScript版本,大概1M左右,并不需要太多的培训过程。

  官方网站:http://antimatter15.github.io/ocrad.js/demo.html

  7. Headroom.js

  Headroom.js是一个轻量级的,高性能的JS部件(无依赖性!),可以允许你应对用户的滚动要求。向下滚动的时候上面的头部渐渐滑出我们的视线,而向上滚动的时候又会回来。 Headroom.js允许你设置元素出现的适当时间,其他时候则将焦点放在内容上。使用headroom.js也非常简单。它有一个纯JS的API,以及可选的兼容性的jQuery/Zepto和AngularJS插件。

  官方网站:http://wicky.nillia.ms/headroom.js/

  8. JIKO

  JIKO是一个现代化的,易于使用的面向Javascript的模板引擎。其目标是提供JavaScript程序员一种如Jinja和Mako一样强大的服务器端状态的美术模板引擎。

  官方网站:http://jiko.neoname.eu/

  9. FileAPI

  FileAPI是一组庞大的JavaScript工具,几乎任何相关文件都可以处理。它提供了文件上传(单一/多个)的功能并支持拖放操作、图像裁剪、调整大小、套用筛选、获取文件信息等等。该工具是独立的,并配有PHP类可处理服务器端的操作。此外,如果浏览器不支持JavaScript文件上传和摄像头,它将自动退回到Flash模式,并且详细地记录下来。

  官方网站:http://mailru.github.io/FileAPI/

  10.Object Playground

  Object Playground是一个面向JavaScript对象的可视化和实验性的工具。在浏览器中使用,并且非常简单。

  官方网站:http://www.objectplayground.com/

  11. Echo.js

  Echo是一个独立的JavaScript延迟加载的图像工具。Echo的速度很快,使用的是HTML5数据——*属性。IE8+上面皆可使用。Echo.js可以非常简单地实现图片延迟加载功能,同时它非常小巧,压缩后才1KB(没有使用jQuery/Zepto等脚本库)。

  延迟加载指的是只有当真正需要数据的时候,才执行数据加载操作,才需要从服务器动态请求数据,并且自动改变图片的src属性。这也是一种异步方法。

  官方网站:http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/

  12. jsComplexity

  想知道你的JavaScript代码真的有那么复杂吗?通过Analysisand运行你就可以亲眼目睹。代码越复杂,错误的概率就越大。所以你要做的就是简化你的代码,以便尽可能地提高其性能和可靠性。

  官方网站:http://jscomplexity.org/

  13. Chance.js

  Chance是一种最简单的随机字符串、数字等的生成程序,特别有助于减少编写自动化测试或者其他任何需要随机数据时千篇一律的单调性。Chance是一款开源软件,基于MIT开源协议。并且Chance是装载在网站上的,这样你只需要打开浏览器上面的控制台就可以了!

  官方网站:http://chancejs.com/

  14. Bookmarkfiy

  使用Bookmarkify创建自己的书签工具超级简单。只需要命名书签,进入JavaScript,选择它,就可以开始你的互联网之旅了。

  官方网站:http://bookmarkify.it/

  15.David

  David是一款节点管理工具,可以将这款工具嵌入到你的网站中。

  官方网站:https://david-dm.org/

  译文链接:http://www.codeceo.com/article/15-javascript-tools.html

  英文原文:15 JavaScript Tools to Improve Your Coding Skills

  翻译作者:码农网 – 小峰

2015-01-14

JavaScript

550 浏览2 回答

Materliu

译者的翻译水平实在是不敢恭维啊,  热情可佳,但需要再认真一些。以下我粗略纠正一下,不对的还请大家指出。

原文地址: http://codegeekz.com/javascript-tools/

1. Simple State Manager是一个针对响应式站点的轻量易用的JavaScript状态管理器。它不依赖于任何的JavaScript框架同时能够完美地以一种非常整洁的方式来处理针对不同布局的代码。你可以定义临界点,然后把所有在这个临界点上要执行的JavaScript打包到一起。

3. CountUp.js是一个无依赖、轻量级的JavaScript类库,可用于快速创建一个有趣的显示数值数据的动画。别看它名字叫CountUp,CountUp会根据你传递的startVal和endVal参数来计算该向上还是向下计数。其支持使用Bower和Component安装,同时还有一个CoffeeScript的版本。

4.Grasp让你可以基于代码结构,而不是精确的文本命中来搜索,替换,以及重构你的JavaScript代码。同标准的搜索和替换,它更加强有力,同时让你可以更轻松的重构你的代码,甚至允许你实现一个单行的基本的宏指令。

5. Gulp.js是一个流式构建系统。它使用流和编码替代配置的方式让构建变得更简单和直观。通过选择编码而不是配置,gulp保持了简单事情的简单性,同时让复杂的任务也变得可管理。

7. Headroom.js是一个允许你对用户的鼠标滚动作出响应的轻量,高性能且无依赖的JS小工具。当向下滚动的时候,header会滑出视图,而向上滚动的时候,header则滑回视图。Headroom.js允许你在恰当的时机将某些元素呈现在视图中,而其余时间则将焦点放在你的内容上。使用Headroom.js相当简单。它拥有一套原生的JS API,同时也有可选的兼容jQuery/Zepto或者AngularJS的插件。

8. 美术模板引擎。 ---> 如艺术品般的模板引擎

9. FileAPI是一个庞大的JavaScript工具合集,其基本涵盖了所有跟文件相关的操作。它提供了拖拽上传文件(单一/多个),图像裁剪,大小调整,过滤,获取文件信息等特性。工具本身是独立的,同时辅以一个PHP的类,用来在服务器端处理这些操作。对于那些不支持的浏览器(uploads和camera 特性)有Flash的降级处理。同时,它的文档很详细。

11.Echo是一个独立的JavaScript图片延迟加载工具。Echo运行速度快,使用HTML5的data-*属性,需运行在IE8以上版本。使用Echo.js就如同延迟加载一个图片那样简单,压缩完它的大小还不到1KB,同时不依赖于jQuery/Zepto等库。延迟加载的工作原理是只加载那些马上要进入视图的必须的资源,通过自动地简单修改一下image的src属性发起向服务器的请求。这同时也是一个对我们大有裨益的异步的过程。

12. 想知道你的JavaScript代码真的有那么复杂吗? 。。。 ---> 想知道你的JavaScript代码到底有多复杂吗?通过Analysis功能来亲自看一看运行统计结果吧。

13. Chance是一个极简单的随机字符串、数字等的生成器,尤其是在写自动化测试或者其他任何需要使用随机数的时候,其能够帮助减少这所带来的单调乏味。 Chance是一个基于对开发者和商业机构都非常友好的MIT协议的开源软件。Chance的官网已经加载了Chance,所以你可以直接打开你浏览器的控制台来试玩Chance(这里原文是:Chance is loaded on this site so you can just open the console on your browser and play! this site指的应该是Chance的官网)

14. Bookmarkify使得创建你自己的bookmarklets(这个词算是术语了,感觉不翻译更好)变得相当简单,只需要为它命名,输入JavaScript代码,指定你需要额外加载的库便万事俱备了。

15. David 是一款可以总览你的Node依赖的工具,它依据每一个依赖的当前状态来生成一个徽章标记,如果你愿意,你可以把这个徽章标记嵌入到你的网站。

2015-01-19

回复 0

shark

不错!

2015-01-19

时间: 2024-08-25 01:13:07

15个提高编程技巧的JavaScript工具的相关文章

十点提高编程技巧

1.学习一门新的编程语言(Learn a new programming language) 学习一门新的编程语言将有助于你开拓新的思维方式,特别是当你使用不熟悉的语言时,你将学习到很多种思维方法应用到语言中.而所学习到的新思维方式,你可以运用在你所熟知的语言中.甚至有时你会使用新学的语言进行你的重要项目. 提供学习经验包含: Lisp (Scheme is good), Forth, PostScript or Factor (stack-oriented programming langua

分享25个实用的博客,有助你提高编程技巧

编程是一个不断变化的领域,一旦你选择了它作为你的职业,你就不可能停下学习的脚步了.因为科技的发展月新日异,要跟得上它发展的脚步,你必须不断地努力学习.在Forbes.com最近发表的一篇文章(25 Practical Blogs To Sharpen Your Coding Skills)中,作者Tomas Laurinavicius 推荐了25个他认为很适合程序员或学习编程的人在工作或学习中阅读的博客. 1. Scott Hanselman 在微软担任网络平台开发的Scott Hanselma

可以快速提高编程能力的7条建议

编程是非常酷的一件事情,但是在酷炫的背后它对很多人来说还是挺难的.很多人在学习编程之初就被困难击败了.当你不熟悉编程的时候,你可能会觉得无从下手,并且不知道如何运用学到的知识.只要你通过了这一困难的学习阶段,你就会发现一个全新的世界. 以下是一些能够帮助你快速提高编程技巧的建议. 1.  多写代码 学习某件事情最好的办法就是练习.你应该花大量时间去构建和编写代码除非你认为练习对你的帮助不大.你可以从写一些基础知识相关的简单程序开始. 2.  参与不同类型的项目 当你对某种开发语言非常熟悉之后,你

单片机应用编程技巧问答

1. C语言和汇编语言在开发单片机时各有哪些优缺点? 答:汇编语言是一种用文字助记符来表示机器指令的符号语言,是最接近机器码的一种语言.其主要优点是占用资源少.程序执行效率高.但是不同的CPU,其汇编语言可能有所差异,所以不易移植. C语言是一种结构化的高级语言.其优点是可读性好,移植容易,是普遍使用的一种计算机语言.缺点是占用资源较多,执行效率没有汇编高. 对于目前普遍使用的RISC架构的8bit MCU来说,其内部ROM.RAM.STACK等资源都有限,如果使用C语言编写,一条C语言指令编译

15条初学者必看的JavaScript快速小贴士

(本图为:15条初学者必看的JavaScript快速小贴士) 今天小编为了我们的初学JavaScript的小伙伴们简单介绍下这门编程语言,更好的帮助你们来深入的学习它,使用它: JavaScript 是属于网络的脚本语言! JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用. JavaScript 是因特网上最流行的脚本语言. JavaScript 很容易使用!你一定会喜欢它的! 为了能够帮助那些刚开始接触 JavaScript 的人,我

帮助你提高排版技巧的18个 PS 文字特效教程

Photoshop 文字特效教程对于学习基础的和高级的排版思维有很大的帮助.在这篇文章中,你会发现一组最新发布的文字效果教程.这些高品质的 Photoshop 教程可以帮助你设计出惊人的2D,3D,木质和发光的文字效果. 您可能感兴趣的相关文章 Web 开发中很实用的效果[附源码下载] 30佳精彩的 Photoshop 网页设计教程 20个新鲜出炉的 Photoshop 中级教程 25个很棒的 Photoshop 网页设计教程 Photoshop 自学者应该收藏的42个网站 Create A F

Matlab.NET混合编程技巧之——直接调用Matlab内置函数(附源码)

原文:[原创]Matlab.NET混合编程技巧之--直接调用Matlab内置函数(附源码) 在我的上一篇文章[原创]Matlab.NET混编技巧之--找出Matlab内置函数中,已经大概的介绍了matlab内置函数在混合编程中的优点,并通过程序找出了matlab中的大部分内置函数,当然更多人关心是如何像我所说得那样,不用直接编译,就直接在C#中调用这些内置函数.本文就带你揭开这些谜团. 声明,这篇文章是需要一点点混合编程基础的,基本概念和过程要懂一点,如果能简单成功混编一个简单的计算或者绘图例子

推荐15款最好的 Twitter Bootstrap 开发工具

Twitter Bootstrap 自从2011年最初发布到网上后,迅速成为 Web 领域最流行的响应式前端开发框架之一,是网页设计的优秀实践.Twitter Bootstrap 框架包含了众多的预定义风格的组件,插件和加载项. 在这篇文章中,我们想向大家介绍15款最好的 Twitter Bootstrap 开发工具以更好地满足要求以及帮助提高他们的 Web 开发的生产力. 您可能感兴趣的相关文章 10大流行 Metro UI 风格 Bootstrap 主题和模板 推荐12款优秀的 Twitte

VC/MFC 编程技巧大总结

1 toolbar默认位图左上角那个点的颜色是透明色,不喜欢的话可以自己改. 2 VC++中 WM_QUERYENDSESSION WM_ENDSESSION 为系统关机消息. 3 Java学习书推荐:<java编程思想> 4 在VC下执行DOS命令 a. system("md c:\\12"); b. WinExec("Cmd.exe /C md c:\\12", SW_HIDE); c. ShellExecute ShellExecute(NULL,