理解javascript模組化_javascript技巧

模組化是一個通用的程式設計最佳實務。程式的模組化使我們可以更方便地使用別人的程式碼，想要什麼功能，就載入什麼模組，從而提高程式碼的利用效率，增加開發速度。

模組就像積木，有了它，我們可以搭出各種各種功能樣式的程式。積木有什麼特色？小而簡單。同樣的，我們程式中的模組也要做到這一點，確保自己創建的函數一次只完成一個工作，這樣其他開發者可以簡單地調試與修改你的程式碼，而不需瀏覽所有程式碼才能弄清楚每一個程式碼區塊執行了什麼功能。只有做到像這樣地小而簡單，才能實現其通用功能。

一、javascript模組化的方法
1.函數封裝
JavaScript的作用域就是基於函數的，所以我們可以把函數當作模組。

function fn1(){
  //code
}

function fn2(){
  //code
}

缺點："污染"了全域變量，無法保證不與其他模組發生變量名稱衝突

2、對象

var myModule1 = {
  fn1: function(){
    //code
  },
  fn2: function(){
    //code
  }
}

缺點：會暴露所有模組成員，內部狀態可以被外部改寫

立即自執行函數－推薦

var myModule = (function(){
  function fn1(){
    //code
  },
  function fn2(){
    //code
  },
  return {
    fn1: fn1,
    fn2: fn2
  };
})();

二、小而簡單
關於小而簡單，我們看一個例子，例如我們現在想寫一個建立新連結的函數，並且為類型是"mailto"超連結新增一個class。可以這樣做：

function addLink(text, url, parentElement) {
  var newLink = document.createElement('a');//创建a标签
  newLink.setAttribute('href', url);//为a标签设置href属性
  newLink.appendChild(document.createTextNode(text));//为a标签添加文本
  if(url.indexOf("mailto:")==-1){
    newLink.className = 'mail';
  }
  parentElement.appendChild(newLink);//将a标签添加到页面
}

這樣寫能夠工作，但你或許會發現自己又不得進行其他的功能添加，於是，這個函數又不適用了。所以，函數越特殊，越難以適用於不同情形。
這裡的函數寫法沒有達到模組化的要求──一個函數只做一件事。我們將函數改編下：

function createLink(text,url) {
  var newLink = document.createElement('a');
  newLink.setAttribute('href', url);
  newLink.appendChild(document.createTextNode(text));
  return newLink;
}

這裡createLink函數只做一件事－建立並傳回要新增到頁面中的a標籤（小而簡單），這樣我們就可以在任何需要建立超連結的情況下呼叫這樣函數。

三、CommonJS
在瀏覽器環境下，沒有模組也不是特別大的問題，畢竟網頁程式的複雜性有限；但是在伺服器端，一定要有模組與作業系統和其他應用程式互動，否則根本沒辦法程式設計。雖然JavaScript在web端發展這麼多年，但第一個流行的模組化規格卻由伺服器端的JavaScript應用程式帶來，CommonJS規格是由NodeJS發揚光大，這標誌著JavaScript模組化程式設計正式登上舞台。
node.js的模組系統，就是依據CommonJS規格實現的。在CommonJS中，有一個全域性方法require()，用於載入模組。
載入模組：

var math = require('math');
呼叫模組：

  math.add(2,3)
CommonJS規格不適用於瀏覽器環境，因為它存在一個重大的局限，上例中第二行math.add(2, 3)必須要在math.js載入完成後才能運行，而模組都放在伺服器端，所以可能要等很長時間，等待時間取決於網速的快慢。

CommonJS規格適用於伺服器端，因為對於服務端來說，所有的模組都存放在本地硬碟，可以同步載入完成，等待時間就是硬碟的讀取時間

四、模組該怎麼定義、怎麼載入?
AMD
Asynchronous Module Definition非同步模組定義,主要代表：require.js
目的：
（1）實作js檔案的非同步載入，避免網頁失去回應；
（2）管理模組之間的依賴性，便於程式碼的編寫與維護。

1、定義模組

define(["./cart", "./inventory"], function(cart, inventory) {
  //通过[]引入依赖
  return {
    color: "blue",
    size: "large",
    addToCart: function() {
      inventory.decrement(this);
      cart.add(this);
    }
  }
}
);

2、載入模組

require( ["some/module", "my/module", "a.js", "b.js"],
function(someModule,  myModule) {
  //This function will be called when all the dependencies
  //listed above are loaded. Note that this function could
  //be called before the page is loaded.
  //This callback is optional.
}
 );

CMD
Common Module Definition通用模組定義，CMD規範是國內發展出來的。主要代表：sea.js

1、定義模組

define(function(require, exports, module) {
 // 通过 require 引入依赖
 var $ = require('jquery');
 var Spinning = require('./spinning');
 // 通过 exports 对外提供接口
 exports.doSomething = ...
 // 或者通过 module.exports 提供整个接口
 module.exports = ...
});

2、載入模組

seajs.use("../static/hello/src/main")
區別：

對於依賴的模組，AMD 是提前執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改成可以延遲執行（依寫法不同，處理方式不同）。 CMD 推崇 as lazy as possible.

CMD 推崇依賴就近，AMD 推崇依賴前置。

以上就是本文的全部內容，希望對大家的學習有所幫助。