模塊化

模塊化是什么？

為什么要使用模塊化?

• 為了更好地復(fù)用
• 減少全局變量污染
• 解決功能之間的依賴關(guān)系

模塊化的實現(xiàn)方式

使用閉包來實現(xiàn)

• 閉包實現(xiàn)存在的缺點
  • 隨著功能的增加，暴露的全局變量也會越來越多
  • 不能很好的解決模塊依賴的問題

使用主流的一些實現(xiàn)模塊化的庫來實現(xiàn)

• requireJS
• seaJS
• browserify
• webpack

requireJS

官方網(wǎng)站：

英文版：http://requirejs.org/
中文版：http://www.requirejs.cn/

入門

1. 下載requirejs文件
2. 引入requirejs文件
3. 編寫js代碼
   • 在a.js文件中通過來定義一個模塊(tip:約定一個js文件就是一個模塊)

   define(function(){
     //模塊內(nèi)部的代碼
   })
   

   • 在b.js文件中從而獲取a.js中的代碼，這樣的話就可以保證在執(zhí)行b.js中的代碼之前先執(zhí)行了a.js中的代碼

   require(["./a.js"])
   

依賴注入：模塊具有返回值：

1. 給定義模塊的回調(diào)函數(shù)添加return語句

//a.js文件中
define(function(){
    return 10;
})
//b.js文件中
define(function(){
    return {name:"張三"};
})

2. 在獲取模塊的時候，通過require()的第二個參數(shù)來依次獲取各個模塊的返回值

require(["./a.js","./b.js"],function(a,b){
    console.log(a);//10
    console.log(b.name);//"張三"
})

入口文件

通過給引入requirejs時的script標(biāo)簽添加data-main屬性值，那么requirejs就會自動加載該文件(模塊)，可以通過該文件來進(jìn)行訪問其他的模塊

<script src="require.js" data-main="./main"></script>

路徑(加載模塊時遵循的規(guī)則)

• 如果沒有入口文件，加載模塊時的路徑以引入requirejs時的路徑為準(zhǔn)(優(yōu)先級最低)
• 如果有入口文件，加載模塊的路徑以入口文件為準(zhǔn)(優(yōu)先級次高)
• 通過配置來自定義路徑(優(yōu)先級最高)

require.config({
    baseUrl:""
})

配置常用的模塊路徑(比如：jquery/arttemplate)

require.config({
    baseUrl:"./lib",
    paths:{
        //路徑不需要.js后綴，最終該文件的路徑將會和baseUrl拼接，也就是："./lib/js/jquery-2.1.4"
        jquery:"js/jquery-2.1.4"
    }
})
//a.js文件中
define(["jquery"],function($){
    //這里請求的jquery也就是去上面paths中設(shè)置的jquery進(jìn)行查找,也就是："./lib/js/jquery-2.1.4"

})

如果一個js文件不支持AMD這種模塊定義規(guī)范(比如bootstrap.js)，但是它又依賴于我們定義的模塊(jquery)，通過以下方式來解決

require.config({
    baseUrl:"./lib",
    paths:{
        //路徑不需要.js后綴，最終該文件的路徑將會和baseUrl拼接，也就是："./lib/js/jquery-2.1.4"
        jquery:"js/jquery-2.1.4",
        bootstrap:"assets/bootstrap/bootstrap"
    },
    shim:{
        bootstrap:{
            //這樣在請求bootstrap的時候會自動去請求jquery模塊
            deps:["jquery"]
        }
    }
})