Home » JavaScript » Javascript modular learning

Javascript modular learning

Javascript modularization

long ago seen written in the Echarts module, then look very painful, also did not understand. Recently in the "JavaScript rich Web application development" suddenly understand this process. It is a modular modular white, do not understand Nodejs is painful, recently found that code written in

is really messy

used most before was script tags, importing large amounts of JS files, often writing a whole bunch of JS files, and some Js sequences to consider. For complex applications, dependency management systems must be introduced.


For each Javascript file browser initiates a Http request, although these requests are put into the asynchronous queue, but a large number of HTTP connections will cause a decline in performance, each connection contains the HTTp header information, additional Cookie, and to TCP.

three handshake
CommonJS modular standards
Module declaration
// math.js
Exports.per=function (value, total) {
return ((value/total) *100);
// application.js
var Maths=require (,./math.js, )
AsserEqual (Maths.per (50, 100), 50);
After // modularization,
require.define ("", "maths", "", "function" (require, exports), "{"
Exports.per=function (value, total) {
return ((value/total) *100);
require.define ("", "application", "", "function" (require, exports), "{"
var per=require (,./maths, ).Per;
AsserEqual (per (50, 100), 50);
}, [, "./maths", ]

RequireJS asynchronous module definition

To load the JavaScript file, simply pass their path to the require function and specify the callback callback, which executes the callback function when the dependent load is complete: