前端模塊化 - 學習指南

1.前端模塊化

js模塊化提供幾種規範

1.commonjs 規範 代表的就是  onde  適合後臺開發 因為是同步的，伺服器是運行比較快等待時間不長，common.js 不適合用於前端，前端客戶端是瀏覽器，瀏覽器追求的是非同步載入，瀏覽器不能等太長時間。

2.前端模塊的規範是  Amd  規範  代表的就是 requires，它是非同步的，很多前端框架都是用的是  Amd 規範  比如  jquery  angular

3.  第三個模塊規範是  es6

2.模塊化的操作

1.commonjs 的操作

所有的模塊化都是兩個方向，暴露模塊介面和引入模塊

module.exports={} 暴露本質是一個 exports 的對象

require（路徑）引入一個模塊

以上是後臺的  在後臺 node 可以直接運行，在客戶端（瀏覽器）不能運行，需要對文件打包解析。

打包工具：webpack gulp

前端模塊：不借用任何規範自己怎麼寫？

自定義前端模塊

案例分析：

定義一個feixiang模塊沒有任何依賴，在定義一個huiting模塊，這個模塊要依賴feixiang模塊，然後再定義主文件 index.js 它依賴hiuting模塊

1.定義不依賴其它模塊

(function(){
//    定義一個feixiang模塊
    var name="hello 模塊一"
    
    function getName(){
        console.log(name)
    }
//    暴露模塊，需要後面的所有js文件都能訪問這個模塊，唯一的方法，將該模塊註冊在window下
    window.feixiang={//暴露模塊名字是feixiang
        getName:getName//這是暴露的屬性
    }
})(window)
/*
 * 為什麼加自調用函數?
 * 因為自調用函數執行會形成一個私有作用域，私有作用域對內部變數進行保護
 * 
 */

2.定義依賴其它模塊

(function(window,feixiang){
    var name="1807 第二個模塊"
    function show(){
        console.log(name)
    }
    function yilai(){
//        這個方法來自於飛翔模塊
//        怎麼引入？
        feixiang.getName()
    }
    console.log(feixiang.getName())
    //暴露會婷模塊介面,等於暴露了兩個介面
    window.huiting={
        show:show,
        yilai:yilai
    }
    
})(window,feixiang)
//將飛翔模塊註入會婷模塊里

在主文件中引入這兩個模塊

(function(window,huiting){
    huiting.show()
    huiting.yilai()
})(window,huiting)

HTML文件

註意事項：

1.依賴關係千萬不能出錯

這種模塊的缺點，會發送多次請求，但依賴關係不能放錯順序

3.前端模塊化規範 amd

Amd 是前端模塊的一種規範，全程 async module definition 非同步模塊載入機制，是一個規範（標準），所有需要按照這個規範去定義模塊和使用模塊

1.require 提供了一個一個全局方法 叫 define() 用來定義模塊

定義模塊分兩種：

　　1.不依賴其它模塊

　　2.依賴其它模塊

定義不依賴其它模塊

//如果不依賴其它模塊 參數就是一個函數
define(function(){
    var mod="我是mod1"
    
    function mod1(){
        return mod
    }
//    return 暴露介面
    return{
        mod1:mod1
    }
})

定義依賴其它模塊

//定義mod2模塊，依賴mod1模塊
define(["mm1","jquery"],function(mjiaozi,$){
//    []數組就是這個需要依賴的模塊
    function getMes(){//列印mod1裡面數據
        console.log(mjiaozi.mod1())
        $("#div").css("background","red")
    }
    //暴露介面
    return{
        getMes:getMes
    }
})

如何使用這倆模塊

在主文件分兩部分，一部分是配置模塊，一部分使用模塊

//引入模塊
//第一對模塊進行配置
    requirejs.config({
//        baseUrl:"require",//配置查找到根目錄
//        配置模塊名稱,和路徑.屬性是模塊名
        paths:{
            "mm1":"./module/mod1", //不能帶尾碼名，自己會預設後面有尾碼名
            "mm2":"./module/mod2",
            "jquery":"./js/jquery-3.3.1"
        }
    })
//第二對模塊進行配置
    require(["mm2"],function(mod2s){
        mod2s.getMes()
    })