欢迎各位兄弟 发布技术文章
这里的技术是共享的
RequireJS你坑的我一滚啊, 这也就是为什么我不喜欢RequireJS的原因, 坑隐藏得太深了.
SeaJS是异步加载模块的没错, 但执行模块的顺序也是严格按照模块在代码中出现(require)的顺序, 这样才更符合逻辑吧! 你说呢, RequireJS?
而RequireJS会先尽早地执行(依赖)模块, 相当于所有的require都被提前了, 而且模块执行的顺序也不一定100%就是先mod1再mod2
因此你看到执行顺序和你预想的完全不一样! 颤抖吧~ RequireJS!
define(function(require, exports, module) {
console.log('require module: main');
var mod1 = require('./mod1');
mod1.hello();
var mod2 = require('./mod2');
mod2.hello();
return {
hello: function() {
console.log('hello main');
}
};
});
require module: main
require module: mod1
hello mod1
require module: mod2
hello mod2
helo main
require module: mod2
require module: mod1
require module: main
hello mod1
hello mod2
helo main
The dependencies must be resolved prior to the execution of the module factory function, and the resolved values should be passed as arguments to the factory function with argument positions corresponding to indexes in the dependencies array.
我个人感觉requirejs更科学,所有依赖的模块要先执行好。如果A模块依赖B。当执行A中的某个操doSomething()后,再去依赖执行B模块require('B');如果B模块出错了,doSomething的操作如何回滚?
很多语言中的import, include, useing都是先将导入的类或者模块执行好。如果被导入的模块都有问题,有错误,执行当前模块有何意义?
楼主说requirejs是坑,是因为你还不太理解AMD“异步模块”的定义,被依赖的模块必须先于当前模块执行,而没有依赖关系的模块,可以没有先后。
想像一下factory是个模块工厂吧,而依赖dependencies是工厂的原材料,在工厂进行生产的时候,是先把原材料一次性都在它自己的工厂里加工好,还是把原材料的工厂搬到当前的factory来什么时候需要,什么时候加工,哪个整体时间效率更高?显然是requirejs,requirejs是加载即可用的。为了响应用户的某个操作,当前工厂正在进行生产,当发现需要某种原材料的时候,突然要停止生产,去启动原材料加工,这不是让当前工厂非常焦燥吗?
define(function () {
if (user_login) {
require(login_feature_module)
}
document.body.onclick = function () {
require(show_module)
}
})
很多语言中的import, include, useing都是先将导入的类或者模块执行好。如果被导入的模块都有问题,有错误,执行当前模块有何意义?
// dep_A.js定义如下,dep_B/dep_C定义同理
define(function(require, exports, module) {
(function(second) {
var start = +new Date();
while (start + second * 1000 > +new Date()) {}
})(window.EXE_TIME);
// window.EXE_TIME = 1;此处会连续执行1s
exports.foo = function() {
console.log("A");
}
})
// main中同时加载三个相同模块
//require.js:
require(["dep_A", "dep_B", "dep_C"], function(A, B, C) {
});
//sea.js:
define(function(require, exports, module) {
var mod_A = require("dep_A");
var mod_B = require("dep_B");
var mod_C = require("dep_C");
});
以上几点,拔出萝卜带出泥,在使用时你以为你解决了其中一点,但其实还会在其他几点里爆发。所以非常不推荐使用sea.js。
一两年前有个项目不慎用了sea.js,现在改好bug想发布,打包出来js路径总是不对。。
require(['jquery','创建了全局变量的module'],function($,b){
//既然我在开头明确声明依赖需求,那可以确定在执行这个回调函数时,依赖肯定是已经满足了
//所以,放心地使用吧
})
define(function(require,exports,modules){
var $ = require('jquery')
$.get('http://www.zhihu.com')
//传统JS程序员的思维:
//“咦,好神奇,JS加载不应该是异步的么,怎么我一说要依赖,jquery就自己跳出来了?”
})
require(['a','b'],function(){
//Do something
})
define('a',function(require,exports,modules){
var b = require('b')
})
define('a',function(require,exports,modules){
var b = require('Us'+'er')
})
define('a',function(require,exports,modules){
var b = require('User')
})
// 所有模块都通过 define 来定义
define(function(require, exports, module) {
// 通过 require 引入依赖
var $ = require('jquery');
var Spinning = require('./spinning');
// 通过 exports 对外提供接口
exports.doSomething = ...
// 或者通过 module.exports 提供整个接口
module.exports = ...
});
define(["require", 'b'], function (require, b) {
console.log("in a, print b", b);
//这里的 b 由于 b.js 实际尚未执行,所以是 undefined 的
return {
x: function () {
console.log('a.x');
b = require('b');
//此时,b.js 已经执行,可以通过 require('b') 直接获取 b 模块对象
b.z();
}
};
});
define(["require", 'a'], function (require, a) {
console.log("in b, print a", a);
return {
y: function () {
console.log('b.y');
a.x();
},
z: function () {
console.log('b.z');
}
};
});
require(['b'], function (b) {
b.y();
})