DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 理解javascript模塊化
理解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 推崇依賴前置。

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved