js 模組化的一些理解和es6模組化學習

標籤：題目   art   載入速度   div   node   部分   javascrip   使用   article   

　　模組化

　　　　1 IIFE

　　　　2 commonjs

        　3 瀏覽器中js的模組化　

 　　　 4 簡單理解模組載入器的原理

　　　  5 es6

　　之前在參加百度前端技術學院做的小題目的時候，自己寫模組的時候 都是寫成立即調用運算式（IIFE）的模式，比如單個功能的時候當時想到是不會涉及到全域變數的汙染，在封裝基礎的模組(比如裡面的表單驗證功能) 

        (function(win){            var obj = {};            function add() {                console.log("add");            }            obj.add = add;            win.obj = obj;        }(window));        obj.add();

是在立即調用表達中我們想要的功能 綁定在一個對象上 最後綁定到window上 這樣的模式在寫功能不多的時候，的確是不錯的 但是隨著你的功能越來越多，就會出現一定的問題

1)window上是不是掛載太多的對象

2)模組內部是否存在相同的變數的名字掛載window上   比如兩個模組內部都掛載 window.obj  那麼後來載入執行的一定是會覆蓋之前的模組的

3)依賴的解決問題 一定在做好依賴的維護  也就是本模組需求的模組必須在之前被載入和執行 想想在頁面中好多js的樣子

4)在擴充上也並不是很友好 每次都需要將新的功能擴充到內部的對象或者window上 存在變數的汙染問題 跟2)有點相似

上面的只是我的一些淺顯的理解 對這種IIFE模式實現模組化的一點理解

　　commonjs commonjs是JavaScript模組化的一種規範 它為JavaScript實現模組化定義了一種規範 引用官網上的一句話 JavaScript:not just for browsers any more!

簡單理解就是通過commonjs,JavaScript能做的事情更多了

如何寫一個最簡單的commonjs模組

/*模組引用部分  引用其他的模組
*/

/*模組定義部分  
*/
function add(a,b) {    return a+b;}function multiple(a,b) {    return a*b;}
/* 模組匯出部分 匯出模組的功能
*/  module.exports.add = add;module.exports.multiple = multiple; 

commonjs 規範定義實現一個模組分為模組引用 模組定義 模組標識(require()時候使用的標識)  這個是官網上一個簡單的例子 這個是例子

　　瀏覽器中的js模組化 上面的這種方式在node中是完全沒有問題的  但是在瀏覽器中首先出現的問題就是require module.exports 這些關鍵字在瀏覽器中不支援 也就是我們需要模組載入器幫我們實現require幫我們去載入commonjs模組   還有一個點就是瀏覽器中的環境不同於服務端  require是同步的  它會等待模組的下載和執行完畢之後在運行下面的代碼  伺服器端是從本地的磁碟讀取對應的模組 這樣的載入速度是可以接受的 但是在瀏覽器中 就涉及到從服務端載入對應的js 這樣就會造成頁面的鎖死  這時候就出現了require.js 和sea.js 

　　簡單理解模組載入器的原理  首先通過將載入過的對象進行緩衝  在進行多個依賴載入的時候，記錄載入的數目 ，每載入一個模組 在回調中減少數目 當所有的依賴載入完畢後執行外層的回調    參考 理解requirejs-實現一個簡答的模組載入器

     es6  es6中推出了模組系統  可以參考這篇文章去學習es6的模組化  深入淺出ES6(十六)：模組  這個系列的文章寫得真的不錯

 

js 模組化的一些理解和es6模組化學習