JavaScript模塊化

1.原始模塊系統(tǒng):

最原始的文件加載方式。如果把每個文件都看做是一個模塊,那么通常他們是暴露在全局作用域下,也就是window對象中。不同的模塊接口調(diào)用的都是同一個作用域。
這些原始的加載方法暴露了一些弊端:
》全局作用域下造成的變量沖突
》文件只能按照<script></script>順序加載
》開發(fā)人員必須主觀的解決模塊和代碼庫的依賴關(guān)系
》在大型項(xiàng)目中,各種資源難以管理,長期積累問題導(dǎo)致代碼庫混亂不堪

2.CommonJs:

服務(wù)端的Node.js遵循common.js規(guī)范、該規(guī)范的核心思想史允許模塊通過require方法來同步加載索要依賴的其他模塊。然后通過exports或module.exports 來導(dǎo)出需要暴露的接口

舉個栗子:

// example.js
var x = 5;
var addX = function (value) {
    return value + x;
};
module.exports.x = x;
module.exports.addX = addX;



var example = require('./example.js');
console.log(example.x); //5
console.log(example.addX(1)); //6

優(yōu)點(diǎn):所有代碼都運(yùn)行在模塊作用域。不會污染全局作用域
模塊可以多次加載,但只會在第一次加載時,運(yùn)行一次,然后運(yùn)行結(jié)果就被緩存了
缺點(diǎn):同步模塊加載不適用于瀏覽器環(huán)境。意味著阻塞加載。瀏覽器資源是異步加載的。
不能非阻塞的并行加載多個模塊

3.AMD: 異步模塊定義 --- (Require.js)

(Asynchronous Module Definition)
AMD是Require.js在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。
https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)

AMD也采用require()語句加載模塊,但是他有兩個參數(shù)

//define(id?,dependencies?,fatory)
define("module", ["dep1", "dep2"], function(d1, d2) {
    return someExportedValue;
}); 

    //require([module],callback);
require(["module", "../file"], function(module, file) { /* ... */ });

優(yōu)點(diǎn):
適合在瀏覽器環(huán)境中異步加載模塊
可以并行加載多個模塊

缺點(diǎn):
提高了開發(fā)成本,代碼的閱讀和書寫比較困難,模塊定義方式的語義不順暢
不符合通用的模塊化思維方式,是一種妥協(xié)的實(shí)現(xiàn)

關(guān)于cmd和amd的區(qū)別參考:https://www.zhihu.com/question/20351507/answer/14859415
https://www.douban.com/note/283566440/

4.CMD:通用模塊定義--- (sea.js)

  define(function(require, exports, module) {
    var $ = require('jquery');
    var Spinning = require('./spinning');
    exports.doSomething = ...
    module.exports = ...
  })
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 原文鏈接:http://www.cnblogs.com/lvdabao/p/js-modules-develop....
    舌尖上的大胖閱讀 842評論 0 1
  • 參考資料 Modules/1.0——維基百科CommonJS Modules/1.0——伯樂在線js模塊化——博客...
    BeYanJin閱讀 3,246評論 0 5
  • 什么是模塊化開發(fā)? 前端開發(fā)中,起初只要在script標(biāo)簽中嵌入幾十上百行代碼就能實(shí)現(xiàn)一些基本的交互效果,后來js...
    半世韶華憶闌珊閱讀 720評論 0 0
  • 一天一個部位 有氧一小時 交流 花錢不過15 八點(diǎn)起床 十點(diǎn)半睡覺
    lamb吟游子閱讀 156評論 0 0
  • 瓶子 是空的 我倒入了詩 看啊 它盛開了 像粉紅的桃花 吐著芬芳 我倒入了孝道 看啊 它盛開了 一道道陽光 在父母...
    太陽天子閱讀 174評論 3 1

友情鏈接更多精彩內(nèi)容