Javarscript中模塊、加載與捆綁的示例分析-創(chuàng)新互聯(lián)
這篇文章給大家分享的是有關(guān)Javarscript中模塊、加載與捆綁的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
JS模塊簡(jiǎn)介
js模塊化，簡(jiǎn)單說(shuō)就是將系統(tǒng)或者功能分隔成單獨(dú)的、互不影響的代碼片段，經(jīng)過(guò)嚴(yán)格定義接口，使各模塊間互不影響，且可以為其他所用。
常見的模塊化有，C中的include (.h)文件、java中的import等。
為什么JS需要模塊
很顯然，沒(méi)有模塊我們也可以實(shí)現(xiàn)同樣的功能，為什么我們還要使用模塊來(lái)寫js代碼呢？下面幾點(diǎn)是模塊化給我們帶來(lái)的一些變化：
抽象代碼：我們?cè)谑褂媚K來(lái)調(diào)用一個(gè)api時(shí)，可以不用知道內(nèi)部是如何實(shí)現(xiàn)的，避免去理解其中復(fù)雜的代碼；
封裝代碼：在不需要再次修改代碼的前提下，我們可以在模塊內(nèi)部隱藏其具體實(shí)現(xiàn)；
復(fù)用代碼：一些常用的、通用的功能，以模塊來(lái)實(shí)現(xiàn)可以避免過(guò)多的重復(fù)代碼；
管理依賴：可以通過(guò)簡(jiǎn)單的修改依賴項(xiàng)來(lái)管理功能的實(shí)現(xiàn)，而不需要去重新修改自己內(nèi)部的代碼實(shí)現(xiàn)。
…
ES5及之前的模塊系統(tǒng)
在ES5及之前版本，還沒(méi)有原生的模塊語(yǔ)法。不過(guò)這并不代表ES5之前，前端沒(méi)有使用模塊。簡(jiǎn)單介紹兩種：IIFE、Revealing Module.
IIFE
Immediately Invoked Function Expression，立即執(zhí)行函數(shù)表達(dá)式。
(function(){
// ...
})()看上面的代碼，IIFE可以說(shuō)成是一個(gè)在定義的時(shí)候就執(zhí)行的匿名函數(shù)。注意函數(shù)是先被”()”包起來(lái)了，然后后面緊跟”()”表示執(zhí)行函數(shù)。如果是以下代碼，將會(huì)報(bào)錯(cuò)：
function(){
console.log('test');
}()
// => Uncaught SyntaxError: Unexpected token )這種寫法表示，先定義一個(gè)匿名函數(shù)，然后再去解析”()”。由于在第一行”function”出現(xiàn)在首位，這表明此處定義一個(gè)函數(shù)，函數(shù)后緊跟”()”，此時(shí)表示單獨(dú)解析”()”，就會(huì)報(bào)出上面的錯(cuò)誤信息，因此需要先將函數(shù)定義包裹起來(lái)。
“(function…)”這種寫法表示執(zhí)行”()”內(nèi)部代碼，并返回該語(yǔ)句執(zhí)行結(jié)果，此處返回結(jié)果為該函數(shù)，后面緊跟”()”即表示執(zhí)行該函數(shù)。IIFE可以幫助我們做到：
不需要了解具體的代碼實(shí)現(xiàn)情況下取得想要的效果；
在內(nèi)部定義的變量不會(huì)污染全局作用域。
顯而易見，這種編碼方式并沒(méi)有提供良好的機(jī)制來(lái)解決依賴管理問(wèn)題。
Revealing Module
根據(jù)字面暫解釋為揭示模式，與IIFE形式類似，但是提供了一個(gè)返回值。方便集中管理公有的api，使模塊、公用api更加簡(jiǎn)潔清晰。
// Expose module as global variable
var singleton = function(){
// Inner logic
function sayHello(){
console.log('Hello');
}
// Expose API
return {
sayHello: sayHello
}
}()稍微注意下，上面的代碼，我們并沒(méi)有用”()”去包裹，因?yàn)殛P(guān)鍵字”function”并不在該行的開頭。
我們可以像下面這樣使用模塊api:
// Access module functionality singleton.sayHello(); // => Hello
當(dāng)然，我們也可以以構(gòu)造函數(shù)形式導(dǎo)出：
// Expose module as global variable
var Module = function(){
// Inner logic
function sayHello(){
console.log('Hello');
}
// Expose API
return {
sayHello: sayHello
}
}請(qǐng)注意，上面函數(shù)在定義的時(shí)候并沒(méi)有執(zhí)行。
我們可以這么使用它：
var module = new Module(); module.sayHello(); // => Hello
與IIFE一樣，揭示模式并沒(méi)有提供良好的解決依賴管理的方案。
更多模塊化解決方案
ES6或者ES2015，自帶原生的模塊語(yǔ)法。
在這之前，有以下幾種常見的用于模塊化的解決方案：
AMD
CMD
CommonJs
UMD
System.register
ES6
AMD
AMD，Asynchronous Module Definition，異步模塊定義。AMD形式被用于瀏覽器端，使用”define”來(lái)定義模塊依賴：
//Calling define with a dependency array and a factory function
define(['dep1', 'dep2'], function (dep1, dep2) {
//Define the module value by returning a value.
return function () {};
});CMD
CMD，Common Module Definition，通用模塊定義。該規(guī)范由國(guó)內(nèi)大神玉伯提出，與AMD區(qū)別在與AMD是依賴關(guān)系前置，有該依賴就必須先加載依賴，CMD是按需加載。
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此處略去 100 行
var b = require('./b') // 依賴可以就近書寫
b.doSomething()
// ...
})
// AMD 默認(rèn)推薦的是
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
a.doSomething()
// 此處略去 100 行
b.doSomething()
...
})CommonJs
CommonJs在Node.js中用的較多，使用”require”來(lái)定義依賴，使用”module.exports”來(lái)定義模塊:
var dep1 = require('./dep1');
var dep2 = require('./dep2');
module.exports = function(){
// ...
}UMD
UMD，Universal Module Definition，通用模塊定義。可以用于瀏覽器端與Node.js端：
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['b'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory(require('b'));
} else {
// Browser globals (root is window)
root.returnExports = factory(root.b);
}
}(this, function (b) {
//use b in some fashion.
// Just return a value to define the module export.
// This example returns an object, but the module
// can return a function as the exported value.
return {};
}));System.register
System.register方式設(shè)計(jì)初衷主要是為了在ES5中能夠支持ES6模塊語(yǔ)法:
import { p as q } from './dep';
var s = 'local';
export function func() {
return q;
}
export class C {
}ES6 module
ES6中自帶原生的模塊語(yǔ)法，使用關(guān)鍵字”export”來(lái)導(dǎo)出模塊的公用api：
// lib.js
// Export the function
export function sayHello(){
console.log('Hello');
}
// Do not export the function
function somePrivateFunction(){
// ...
}以關(guān)鍵字”import”來(lái)導(dǎo)入模塊：
import { sayHello } from './lib';
sayHello();
// => Hello目前各瀏覽器對(duì)ES6的支持度不一，因此我們現(xiàn)在需要使用編譯器，像Babel，來(lái)將ES6的代碼編譯成ES5的形式。
模塊加載器
一個(gè)模塊加載器可以理解模塊，并以固定的形式來(lái)加載模塊。
模塊加載器工作在運(yùn)行時(shí)，流程大致如下：
你在瀏覽器中運(yùn)行模塊加載器；
你告訴模塊加載器需要加載哪個(gè)主文件；
模塊加載器下載并解析主文件；
模塊加載器按需加載其他文件。
一些比較常見的模塊加載器有：
RequireJS：以AMD風(fēng)格加載模塊；
SeaJS：以CMD風(fēng)格加載模塊；
SystemJS：以AMD, CommonJS, UMD 或者 System.register風(fēng)格加載模塊；
jspm：jspm基于SystemJS，是模塊加載器，同時(shí)也具備瀏覽器端包管理功能。
模塊打包
模塊打包可以替換模塊加載器。
然而，相比模塊加載器，模塊打包動(dòng)作是在編譯時(shí)運(yùn)行的：
使用模塊打包在編譯期生成一個(gè)js文件；(例如bundle.js)
在瀏覽器中加載該文件。
截止目前，比較常用的模塊打包方案有以下兩種：
Browserify:為CommonJS模塊打包；
Webpack: 為AMD、CommonJS、ES6模塊打包。
感謝各位的閱讀！關(guān)于“Javarscript中模塊、加載與捆綁的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
新聞標(biāo)題：Javarscript中模塊、加載與捆綁的示例分析-創(chuàng)新互聯(lián)
文章分享：http://m.jiaotiyi.com/article/deeees.html