seajs和requiejs的区别,和用gulp打包方法
展开全部
1、执行顺序不同
从demo.html 引入一个入口c.js, c.js require-b.js , b.js require - a.js
代码如下:
c module
[html] view plain copy print?
define(function(require, exports, module) {
console.log("hello module c");
require('b');
console.log("c finished");
});
b module
[html] view plain copy print?
define(function(require, exports, module) {
console.log("hello module b")
var a = require('a');
console.log("b finished")
});
a module
[html] view plain copy print?
define(function() {
console.log("hello module a")
});
requriejs 的 html代码:
[html] view plain copy print?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>seajs和requirejs的区别</title>
<script src="require.min.js" data-main="c.js"></script>
</head>
<body>
</body>
</html>
执行结果:
ello module aa.js:2
hello module bb.js:2
b finishedb.js:4
hello module cc.js:3
c finishedc.js:7
==============================================
seajs的html代码:
[html] view plain copy print?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>seajs和requirejs的区别</title>
<script src="sea.2.3.js"></script>
<script>
seajs.use('./c');
</script>
</head>
<body>
</body>
</html>
执行结果:
hello module cc.js:3
hello module bb.js:2
hello module aa.js:2
b finishedb.js:4
c finishedc.js:7
所以总结:
seajs是从上到下执行,
requriejs是把其中require的js全部加载完了,再往下执行。·
2、依赖的加载有所不同
在define中 requriejs加载了依赖就执行;而seajs在define中只是加载不会执行(如果要执行,需要用require()方法)
案例代码:
c.js模块
[html] view plain copy print?
define(['b'],function(require,exports,module){
console.log("hello module c");
console.log("c finished");
});
b.js模块
[html] view plain copy print?
define(['a'],function(require,exports,module) {
console.log("hello module b")
console.log("b finished")
});
a.js模块
[html] view plain copy print?
define(['b'],function(require,exports,module) {
console.log("hello module a")
});
seajs和requirejs的 html代码 和 1 中一样
执行结果:
seajs执行结果:
hello module cc.js:2
c finishedc.js:4
requiresj的执行结果:
ello module aa.js:2
hello module bb.js:2
b finishedb.js:4
hello module cc.js:2
c finishedc.js:4
总结: 在define书写中A:requirejs 加载了就执行,所以requirejs是预执行(在define中预先执行所有require依赖的js),RequireJS的做法是并行加载所有依赖的模块, 并完成解析后, 再开始执行其他代码, 因此执行结果只会"停顿"1次, 完成整个过程是会比SeaJS要快. 预执行
B:seajs只是纯粹的加载依赖的文件,不执行就连console都不执行就是纯粹的“加载”,SeaJS一样是并行加载所有依赖的模块, 但不会立即执行模块, 等到真正需要(require)的时候才开始解析,
这里耗费了时间, 因为这个特例中的模块巨大, 因此造成"停顿"2次的现象, 这就是我所说的SeaJS中的"懒执行".
在2的基础上 c.js代码为
[html] view plain copy print?
define(function(require,exports,module){
require('b');
require('a');
console.log("hello module c");
console.log("c finished");
});
执行结果都是一样
hello module bb.js:2
b finishedb.js:4
hello module aa.js:2
hello module cc.js:4
c finishedc.js:6
3、取别名时requirejs默认舍掉.js的后缀
4、 打包方法
gulp 打包seajs
requirejs 打包
http://blog.csdn.net/kongjiea/article/details/48316049
从demo.html 引入一个入口c.js, c.js require-b.js , b.js require - a.js
代码如下:
c module
[html] view plain copy print?
define(function(require, exports, module) {
console.log("hello module c");
require('b');
console.log("c finished");
});
b module
[html] view plain copy print?
define(function(require, exports, module) {
console.log("hello module b")
var a = require('a');
console.log("b finished")
});
a module
[html] view plain copy print?
define(function() {
console.log("hello module a")
});
requriejs 的 html代码:
[html] view plain copy print?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>seajs和requirejs的区别</title>
<script src="require.min.js" data-main="c.js"></script>
</head>
<body>
</body>
</html>
执行结果:
ello module aa.js:2
hello module bb.js:2
b finishedb.js:4
hello module cc.js:3
c finishedc.js:7
==============================================
seajs的html代码:
[html] view plain copy print?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>seajs和requirejs的区别</title>
<script src="sea.2.3.js"></script>
<script>
seajs.use('./c');
</script>
</head>
<body>
</body>
</html>
执行结果:
hello module cc.js:3
hello module bb.js:2
hello module aa.js:2
b finishedb.js:4
c finishedc.js:7
所以总结:
seajs是从上到下执行,
requriejs是把其中require的js全部加载完了,再往下执行。·
2、依赖的加载有所不同
在define中 requriejs加载了依赖就执行;而seajs在define中只是加载不会执行(如果要执行,需要用require()方法)
案例代码:
c.js模块
[html] view plain copy print?
define(['b'],function(require,exports,module){
console.log("hello module c");
console.log("c finished");
});
b.js模块
[html] view plain copy print?
define(['a'],function(require,exports,module) {
console.log("hello module b")
console.log("b finished")
});
a.js模块
[html] view plain copy print?
define(['b'],function(require,exports,module) {
console.log("hello module a")
});
seajs和requirejs的 html代码 和 1 中一样
执行结果:
seajs执行结果:
hello module cc.js:2
c finishedc.js:4
requiresj的执行结果:
ello module aa.js:2
hello module bb.js:2
b finishedb.js:4
hello module cc.js:2
c finishedc.js:4
总结: 在define书写中A:requirejs 加载了就执行,所以requirejs是预执行(在define中预先执行所有require依赖的js),RequireJS的做法是并行加载所有依赖的模块, 并完成解析后, 再开始执行其他代码, 因此执行结果只会"停顿"1次, 完成整个过程是会比SeaJS要快. 预执行
B:seajs只是纯粹的加载依赖的文件,不执行就连console都不执行就是纯粹的“加载”,SeaJS一样是并行加载所有依赖的模块, 但不会立即执行模块, 等到真正需要(require)的时候才开始解析,
这里耗费了时间, 因为这个特例中的模块巨大, 因此造成"停顿"2次的现象, 这就是我所说的SeaJS中的"懒执行".
在2的基础上 c.js代码为
[html] view plain copy print?
define(function(require,exports,module){
require('b');
require('a');
console.log("hello module c");
console.log("c finished");
});
执行结果都是一样
hello module bb.js:2
b finishedb.js:4
hello module aa.js:2
hello module cc.js:4
c finishedc.js:6
3、取别名时requirejs默认舍掉.js的后缀
4、 打包方法
gulp 打包seajs
requirejs 打包
http://blog.csdn.net/kongjiea/article/details/48316049
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询