前端模塊化 - 學習指南

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()
    })