are modular schemes.
amd corresponds to requireJs
cmd corresponds to seaJs
commonJs corresponds to nodeJs
want to be compatible with the past, because many js files can be run in browsers and node environments, for reuse, plus the general code you list, is the most appropriate, such as a string processing trim
, then it can be used in node and browser at the same time. Without modular code, you may have to write three duplicate js.
these are basically modular solutions. In fact, it is easy to write the principles of modularization on your own page
such as webpack
.
(function(modulesArr) {
var rootModule = {};
function __require__(id) {
if (rootModule[id]) {
return rootModule[id].exports;
}
var currentModule = modulesArr[id];
var module = {
id,
exports: {}
};
currentModule.call(module.exports, module.exports, module, __require__);
currentModule[id] = module;
return module.exports;
}
return __require__(0);
})([
function(exports, module, require) {
var m1 = require(1);
console.log(m1);
},
function(exports, module, require) {
exports.msg = 'Hello World';
var m2 = require(2);
m2();
},
function(exports, module, require) {
module.exports = function() {
var str = 'Hello World';
console.log(str);
return str;
};
}
]);
browser end modularization implemented by myself
(function(global) {
'use strict';
var errMsg = Math.random().toString(32).substr(2);
var rootModule = {};
function ModuleCtor(id) {
if (!this || this.__proto__ !== ModuleCtor.prototype) {
return new ModuleCtor(id);
}
this.id = id;
this.exports = {};
this.loaded = !1;
}
function define(id, fn) {
if (typeof id === 'function') {
fn = id;
id = document.currentScript
? document.currentScript.src
: Math.random()
.toString(32)
.substr(2);
}
if (typeof id !== 'string') {
id = '' + id;
}
var module = ModuleCtor(id);
exec();
function __require__(src) {
if (rootModule[src] && rootModule[src].__proto__ === ModuleCtor.prototype) {
return rootModule[src].exports;
}
loadScript(src, function() {
exec();
});
throw new Error(errMsg);
}
function exec() {
try {
fn.call(module.exports, module.exports, module, __require__);
module.loaded = !0;
rootModule[id] = module;
} catch (err) {
if (err.message !== errMsg) {
throw err;
}
}
}
}
function loadScript(src, callback) {
var script = document.createElement('script');
script.src = src;
script.onload = function() {
callback && callback(src);
};
document.body.appendChild(script);
return script;
}
global.define = define;
})(window);
The essence of
is that js has no modules, so we think of exposing a rootModule object globally, each key is a module, and the exports object is an exposure of dependencies.
such as a.js
module.exports = 'Hello World';
b.js
var chars = require('./a');
process.stdout.write(chars + '\n'); // Hello World
but how do we implement, (1) compile: such as webpack, (2) expose a function, such as requirejs, seajs.
< hr >
webpack can be configured with the umd package described by output libraryTarget: 'umd', library:' globalVarName', which is compatible with browsers and requirejs,node environments.
< hr >
in addition, I can't help complaining about the rubbish of seajs. There is no order for multiple require requests in a file, and strings are regular to analyze dependencies. If the plugin of jQuery depends on jQuery, you need to change the code of jQueryplugin to get a set of customers, you can't declare the dependency directly in config from requirejs. Garbage. Of course, the module I wrote myself loaded more rubbish and didn't even analyze the dependencies. A few more times of try is bound to succeed.