js模組化學習

乙個模組的組成

模組化

模組化的進化過程

namespace模式 :

iife模式/增強

模組化規範

引入模組 : require

var module = require('模組名/模組相對路徑')

引入模組發生在什麼時候?

amd : 瀏覽器端

cmd : 瀏覽器端

es6

引入使用模組 : import

問題: 所有瀏覽器還不能直接識別es6模組化的語法

解決:

全域性function模式

namespace模式

iife模式

iife模式增強

頁面載入多個js的問題

這些問題可以通過現代模組化編碼和專案構建來解決

建立專案結構

|-modules

|-module1.js
|-module2.js
|-module3.js
|-package.json

模組化編碼

工具: 右鍵–>執行

建立專案結構

|-js

|-dist //打包生成檔案的目錄
|-src //原始碼所在的目錄
|-module1.js
|-module2.js
|-module3.js
|-index.html
|-package.json

定義模組**

頁面使用引入:

建立專案結構

|-js

|-libs
|-require.js
|-modules
|-alerter.js
|-dataservice.js
|-main.js
|-index.html

應用主(入口)js: main.js

(function () 

})//引入使用模組
require( ['alerter'], function(alerter) )
})()

使用第三方基於require.js的框架(jquery)

在main.js中配置jquery路徑

paths:

在alerter.js中使用jquery

define(['dataservice', 'jquery'], function (dataservice, $) )

alert(name + ' '+dataservice.getmsg())
}return 
})

使用第三方不基於require.js的框架(angular/angular-messages)

在main.js中配置

(function () ,

/*配置不相容amd的模組
exports : 指定匯出的模組名
deps  : 指定所有依賴的模組的陣列
*/shim: ,
'angular-messages' : }})
//引入使用模組
require( ['alerter', 'angular', 'angular-messages'], function(alerter, angular) )
})()

頁面:

建立專案結構

|-js

|-libs
|-sea.js
|-modules
|-module1.js
|-module2.js
|-module3.js
|-module4.js
|-main.js
|-index.html

index.html:

定義.babelrc檔案

```4. 編碼 編譯
頁面中引入測試

import $ from 'jquery'

$('body').css('background', 'red')

前端模組化 學習指南

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

模組化學習一動態切換配置

當專案大到一定程度後，各個模組的業務相互耦合，維護的時候非常困難，另外專案大到一定程度後，編譯速度也是很慢，所以這個時候模組化就顯得很有必要了。網上的解說很多，這裡就不再多說。一般在專案模組劃分好之後，各個模組之間要能單獨除錯，和作為乙個依賴之前進行切換，所以就要進行簡單的動態配置。來控制模組是否作...

JS模組化開發

模組化開發有點像分工合作，比方說乙個手機，它是由一系列的功能模組組合在一起的，比如攝像頭，螢幕，cpu，作業系統，而每個功能模組可能是由不同公司生產的，比如從a公司買的處理器，b公司做的攝像頭，c公司加工的螢幕。網頁也是這樣，當 量越來越大，功能越來越複雜的時候，我們就很難乙個 中完成所有的工作，所...