15 JavaScript tools to improve your programming skills

Original address: http://www.imooc.com/wenda/detail/243523

The JavaScript scripting library is a pre-written library in JavaScript that facilitates our development of JavaScript-based applications, especially for Ajax and other web-centric technologies. JavaScript is used primarily to write functions that are embedded or contained in HTML pages, thus enabling interaction between the DOM.

This article collects 15 JavaScript tools that you can use to improve your programming skills to help you get the job done quickly and easily. The following JavaScript tools allow you to manage JavaScript state, compress JavaScript code, refactor script code structures, and more. I sincerely hope that the following tools will be useful to you. And if you also know other JavaScript tools, please feel free to enlighten me.

1. JavaScript State Manager

JavaScript state Manager is a lightweight, easy-to-use Status Manager that is used primarily for responsive web sites. It does not require any JavaScript framework. You can define breakpoints to be packaged together with JavaScript code that runs at the current breakpoint.

Official website: http://www.simplestatemanager.com/

2. Jsmini

If you want to compress JavaScript or jquery files quickly and easily, you can use Jsmini. Just copy and paste the source code, choose whether to basic or full compression, and then OK.

Official website: http://www.jsmini.com/

3. Countup.js

Countup.js is a standalone, lightweight JavaScript class library that can be used to quickly create an interesting animation that displays numeric data. Literally, Countup can also count the Startval and Dendval parameters you pass in either direction. The components of the Bower and. json files are included, as well as the Coffeescript version.

Official website: http://inorganik.github.io/countUp.js/

4.Grasp

GRASP allows you to search, replace, and refactor JavaScript based on code structure, rather than plain text. It's more powerful than standard search and replace, and makes it easier to refactor your code.

Official website: http://graspjs.com/

5. Gulp.js

Gulp.js is a flow-building system. It uses flow and code configuration methods to make a simpler and more intuitive build. Through over-provisioning of priority code, Gulp keeps simple things simple, while complex tasks can be managed.

Official website: http://gulpjs.com/

6.orcrad.js

Ocrad.js is a simple OCR program that transforms images into text. This is a pure JavaScript version of the Ocrad project, about 1M, and does not require much training process.

Official website: http://antimatter15.github.io/ocrad.js/demo.html

7. Headroom.js

Headroom.js is a lightweight, high-performance JS widget (no dependencies!) that allows you to respond to users ' scrolling requirements. When you scroll down, the head of the top slides out of our sight and then comes back when you scroll up. Headroom.js allows you to set the appropriate time for the element to appear, and at other times focus on the content. Using Headroom.js is also very simple. It has a pure JS API, as well as optional compatibility of the Jquery/zepto and Angularjs plugins.

Official website: http://wicky.nillia.ms/headroom.js/

8. Jiko

Jiko is a modern, easy-to-use, javascript-oriented templating engine. The goal is to provide a JavaScript programmer with an art template engine that is as powerful as the server-side state of Jinja and Mako.

Official website: http://jiko.neoname.eu/

9. Fileapi

Fileapi is a large set of JavaScript tools that can be processed by almost any relevant file. It provides file upload (single/multiple) functionality and supports drag-and-drop operations, image cropping, resizing, applying filtering, getting file information, and more. The tool is standalone and comes with a PHP class to handle server-side operations. In addition, if the browser does not support JavaScript file uploads and cameras, it will automatically be returned to flash mode and recorded in detail.

Official website: http://mailru.github.io/FileAPI/

10.Object Playground

The object playground is a visual and experimental tool for JavaScript-based objects. Used in the browser, and very simple.

Official website: http://www.objectplayground.com/

Echo.js.

Echo is a standalone JavaScript lazy-loaded image tool. Echo is fast and uses the HTML5 data--* property. ie8+ can be used above. Echo.js can be very simple to implement the image delay loading function, and it is very small, compressed only 1KB (not using script library such as Jquery/zepto).

Lazy loading refers to the data loading operation only when data is really needed, and it is necessary to dynamically request data from the server and automatically change the SRC attribute of the image. This is also an asynchronous method.

Official website: http://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/

Jscomplexity.

Want to know if your JavaScript code is really that complicated? Run through Analysisand and you can see it. The more complex the code, the greater the probability of the error. So all you have to do is simplify your code so you can improve its performance and reliability as much as possible.

Official website: http://jscomplexity.org/

Chance.js.

Chance is the simplest generation of random strings, numbers, and so on, especially to help reduce the monotony of writing automated tests or any other random data. Chance is an open source software based on the MIT Open source protocol. And chance is loaded on the website, so you just need to open the browser above the console on it!

Official website: http://chancejs.com/

Bookmarkfiy.

Using Bookmarkify to create your own bookmark tool is super easy. Just name the bookmark, go to JavaScript, select it, and you can start your Internet trip.

Official website: http://bookmarkify.it/

15.David

David is a node management tool that allows you to embed this tool in your website.

Official website: https://david-dm.org/

Link: http://www.codeceo.com/article/15-javascript-tools.html

English Original: JavaScript Tools to Improve Your Coding Skills

Translation Code Agricultural Network-Xiao Feng

2015-01-14Javascript550 views 2 answers Materliu

The translator's level of translation is really not flattering ah, enthusiasm is good, but need to be more serious. The following I have a rough correction, the wrong also please point out.

Original address: http://codegeekz.com/javascript-tools/

1. Simple state Manager is a lightweight, easy-to-use JavaScript Status Manager for responsive sites. It does not rely on any JavaScript framework and can perfectly handle code for different layouts in a very neat way. You can define a critical point and then pack all the JavaScript you want to do at that point.

3. Countup.js is a non-dependent, lightweight JavaScript class library that can be used to quickly create an interesting animation that displays numeric data. It's called Countup,countup. Calculates the up or down count based on the startval and Endval parameters you pass. It supports installation using Bower and component, as well as a coffeescript version.

4.Grasp allows you to search, replace, and refactor your JavaScript code based on code structure rather than exact text hits. With standard search and replace, it is more powerful, and allows you to refactor your code more easily, even allowing you to implement a single line of basic macro instructions.

5. Gulp.js is a streaming build system. It makes building easier and more intuitive by using streams and encodings instead of configuration. By choosing the encoding instead of the configuration, Gulp keeps the simplicity of simple things, while making complex tasks manageable.

7. Headroom.js is a lightweight, high-performance, non-dependent JS gadget that allows you to respond to the user's mouse scrolling. When scrolling down, the header slides out of view, while scrolling up, the header slides back into view. Headroom.js allows you to present certain elements in a view at the right time, while the rest of the time focuses on your content. Using Headroom.js is fairly straightforward. It has a set of native JS APIs, as well as optional plugins that are compatible with Jquery/zepto or ANGULARJS.

8. Art Template engine. ---> Artwork-like template engine

9. Fileapi is a huge collection of JavaScript tools that basically covers all file-related operations. It provides features such as drag-and-drop upload files (single/multiple), image cropping, resizing, filtering, and obtaining file information. The tool itself is independent and is supplemented by a PHP class to handle these operations on the server side. For those browsers that are not supported (uploads and camera features), there is a downgrade process for Flash. At the same time, its documentation is very detailed.

11.Echo is a standalone JavaScript image delay-loading tool. The echo runs fast and uses the HTML5 data-* property, which needs to be run in the IE8 version above. Using Echo.js is as simple as delaying loading a picture, compressing it less than 1KB in size, and not relying on libraries such as Jquery/zepto. Lazy loading works by loading only those resources that are required to enter the view immediately, initiating a request to the server by automatically modifying the SRC attribute of the image. It is also an asynchronous process that is beneficial to us.

12. Want to know if your JavaScript code is really that complicated? ---> Want to know how complex your JavaScript code is? Use the analysis function to see the results of the running statistics in person.

Chance is a very simple generator of random strings, numbers, and so on, especially when writing automated tests or any other need to use random numbers, which can help reduce the tedium. Chance is an open source software based on the MIT protocol that is very friendly to developers and business organizations. Chance's official website has been loaded chance, so you can directly open your browser's console to play chance (here is the original: Chance is loaded on the "so" can just open the console on Yo ur browser and play! This site refers to Chance's official website)

Bookmarkify makes it quite easy to create your own bookmarklets (a term that is a terminology, not a better translation), just give it a name, enter JavaScript code, and specify that you need to load the library to be ready.

David is an overview of your node-dependent tool that generates a badge tag based on the current state of each dependency, and if you want, you can embed this badge tag in your website.

2015-01-19reply 0 Shark

Not bad!

2015-01-19

15 JavaScript tools to improve your programming skills