seajs和requiejs的區別，和用gulp打包方法

kongjiea發表於2015-09-09
JSUI

1、執行順序不同

 從demo.html 引入一個入口c.js，  c.js require-b.js  ,  b.js require - a.js

程式碼如下：

c module

define(function(require, exports, module) {

    console.log("hello module c");

    require('b');

    console.log("c finished");
    
});

b module
define(function(require, exports, module) {
    console.log("hello module b")
    var a = require('a');
    console.log("b finished")
});
a module
define(function() {
    console.log("hello module a")
});

requriejs 的 html程式碼：

<!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程式碼：

<!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模組

define(['b'],function(require,exports,module){
    console.log("hello module c");

    console.log("c finished");
});
b.js模組
define(['a'],function(require,exports,module) {
    console.log("hello module b")
    
    console.log("b finished")
});

a.js模組

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程式碼為

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 打包


相關文章