前端模組化 學習指南

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

//    暴露模組，需要後面的所有js檔案都能訪問這個模組，唯一的方法，將該模組註冊在window下
window.feixiang=
})(window)
/* * 為什麼加自呼叫函式?
* 因為自呼叫函式執行會形成乙個私有作用域，私有作用域對內部變數進行保護
*  */

(function(window,feixiang)

function yilai()
console.log(feixiang.getname())
//暴露會婷模組介面,等於暴露了兩個介面
window.huiting=
})(window,feixiang)
//將飛翔模組注入會婷模組裡

(function(window,huiting))(window,huiting)

注意事項：

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

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

3.前端模組化規範 amd

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

1.require 提供了乙個乙個全域性方法 叫 define() 用來定義模組

定義模組分兩種：

1.不依賴其它模組

2.依賴其它模組

定義不依賴其它模組

//如果不依賴其它模組 引數就是乙個函式

define(function()
//    return 暴露介面
return
})

//定義mod2模組，依賴mod1模組

define(["mm1","jquery"],function(mjiaozi,$)
//暴露介面
return
})

在主檔案分兩部分，一部分是配置模組，一部分使用模組

//引入模組

//第一對模組進行配置
requirejs.config(
})//第二對模組進行配置
require(["mm2"],function(mod2s))

js模組化學習

乙個模組的組成 模組化 模組化的進化過程 namespace模式 iife模式 增強 模組化規範 引入模組 requirevar module require 模組名 模組相對路徑 引入模組發生在什麼時候?amd 瀏覽器端 cmd 瀏覽器端 es6 引入使用模組 import 問題 所有瀏覽器還不能...

OLED模組學習指南

oled模組是一種通用型外設，可以被各種型號的微控制晶元操控。在此編者以ti公司生產的tms320f28027晶元為例，根據自己使用該模組的經驗，自定義了一系列使用方便的操作函式，並對整個模組的關鍵部分進行了講解分析，希望能夠對初學者起到一定的幫助。這不是我原創，我也不知道在哪翻到的乙個pdf，網上...

模組化前端開發入門指南（二）

使用seajs模組化載入器進行模組化開發，以及它的一些弊端。專案目錄 新建新專案 引入sea.js，檔案路徑modules sea.js 引入公共庫jquery。新建index.html，index.js 專案目錄如下 關於sea.js的公共模組路徑sea.js載入時，會自動獲取sea.js所在的路...