初識子產品化AMD和require.js

什麼是子產品化

子產品化是軟體系統的屬性，這個系統被分解為一組高内聚，低耦合的子產品。那麼在理想狀态下我們隻需要完成自己部分的核心業務邏輯代碼，其他方面的依賴可以通過直接加載被人已經寫好子產品進行使用即可。

作為一個子產品化系統所必須的能力：

1. 定義封裝的子產品。

2. 定義新子產品對其他子產品的依賴。

3. 可對其他子產品的引入支援。

如何書寫子產品

一、函數寫法

function m1(){
    //...
  }
  function m2(){
    //...
  }
           

函數m1和m2就是兩個最原始的子產品；但是它的缺點是，函數名高度暴露，污染了全局變量。

二、對象寫法

var module = new Object({
     m1: function(){
        //...
     },
     m2: funciton(){
        //...
     }
  })
           

以上代碼完成了子產品的書寫，調用它們隻需要module.m1, module.m2即可。但是，缺點是，對象裡面的成員暴露出來了，在對象外部可以任意修改成員的值，例如：

module.m1=function(){
 //...修改原來的方法
           

三、立即執行函數的寫法

var module = function(){
   var m1 = funtion(){
      //...
    };
  var m2 = funtion(){
     //...
    };
  return {
     m1: m1,
     m2: m2
  }
}();
           

使用子產品

new module.m1();

new module.m2();

AMD規範

AMD：Asynchronous Module Definition 異步子產品定義；

官方文檔 https://github.com/amdjs/amdjs-api/wiki/AMD

文法規範：

第一個參數［module］，是一個數組，裡面的成員就是需要加載的子產品。第二個參數callback，則是加載成功之後的回調函數；因為是異步加載，隻有當依賴的子產品加載完成後，才能運作後面的回調函數，是以适合浏覽器環境，浏覽器加載子產品的速度往往取決于網速，是以比較慢，需要異步加載才行。

require.js

RequireJS 是一個JavaScript子產品加載器。它非常适合在浏覽器中使用，但它也可以用在其他腳本環境，就像 Rhino and Node。使用RequireJS加載子產品化腳本将提高代碼的加載速度和品質。

在沒有出現require.js之前，在html中引入js需要很多script标簽，就像下面，不僅不便于書寫起來繁雜，并且為了保證子產品加載的順序正确，必須保證依賴越多的js檔案放在後面。

　　<script src="1.js"></script>
　　<script src="2.js"></script>
　　<script src="3.js"></script>
　　<script src="4.js"></script>
　　<script src="5.js"></script>
　　<script src="6.js"></script>
           

然而，require.js的出現解決以上問題，它具有以下兩個優點：

實作js的異步加載，避免網頁失去響應。

管理子產品之間的依賴性，便于代碼的編寫和維護。

require.js的使用

step1、引入require.js檔案

從官網下載下傳require.js檔案 http://requirejs.org/，然後再html中引入，注意要在body最底部引入，或者在script标簽中加入defer async=”true”

step2、子產品的定義

require.js子產品定義的規則符合AMD規範；

define（）的第一個參數是一個數組，是依賴子產品；第二參數是回調函數，當依賴加載完成後才能運作；

define(['module1'], function(m1){
    m1.doSomeThing();//...參數m1為加載的依賴子產品'module';
}
           

step3、主子產品的書寫

這裡面的main.js檔案，我把它稱為”主子產品”，意思是整個網頁的入口代碼；書寫規則如下：

//main.js
require.config(
    paths:{jquery:'jquery-1.8.3.min'}
});
require(['jquery','window'], function($,w){
    $("#a").click(function(){
       new w.Window().alert('shaojinghong',function(){
        alert('button is clicked');
       });
    });
});
           

• require.config(

  paths:{jquery:’jquery-1.8.3.min’}

  });将子產品名和檔案名關聯起來，前提是main.js和jquery-1.8.3.min.js 在一個檔案夾下；

• 如果子產品和main.js不在同一個檔案下，可以使用

　　require.config({
　　　　paths: {
　　　　　　"jquery": "lib/jquery.min"
　　　　　　｝
           

• 如果子產品在cdn中，可以使用：

　　require.config({
　　　　paths: {
　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
　　　　}
　　});