利用fekit前端自動(dòng)化構(gòu)建工具進(jìn)行前端工程化開(kāi)發(fā)工程中闻鉴，我們知道fekit使用CommonJS規(guī)范進(jìn)行JS模塊化的實(shí)現(xiàn)揽浙。其中scripts文件夾（JS文件目錄）下的每個(gè)文件（大多為js文件）都是一個(gè)模塊三幻，然后我們利用module對(duì)象功偿、exports對(duì)象和require()方法進(jìn)行模塊的定義和模塊引用恨旱。
在fekit中利用CommonJS實(shí)現(xiàn)的JS文件中包含module對(duì)象、exports對(duì)象和require()方法仑氛，但是瀏覽器宿主環(huán)境中的JS并沒(méi)有相對(duì)的module對(duì)象、exports對(duì)象和require()方法闸英，那么瀏覽器是怎樣運(yùn)行我們的JS文件的呢锯岖？還是fekit做了哪些工作使我們的JS文件（大多數(shù)）既可以模塊化，又可以使其在瀏覽器中運(yùn)行的呢甫何？
fekit中的模塊
下面是一個(gè)利用fekit自動(dòng)構(gòu)建工具模塊化的一個(gè)基于CommonJS規(guī)范的index.js文件：
var $ = require('../libs/jquery.js')
exports.ajax = function(){
$.ajax({
url: '/web/getJSON',
method: 'GET',
data: {},
success: function(res){
var str = "";
$.each(res.data,function(index,value){
str+="<li>"+value+"</li>";
});
$('.ul').html(str);
}
})
}
exports.count = 1;
首先我們利用require()方法引用了一個(gè)jquery.js模塊出吹，然后在index.js中利用module對(duì)象中的exports對(duì)象定義了一個(gè)包含ajax()方法和count變量（測(cè)試而已）的模塊（不用著急看不懂，往下繼續(xù)看）辙喂，其中在ajax方法中我們使用了引入的jquery.js捶牢。
當(dāng)我們書(shū)寫(xiě)完這個(gè)index.js模塊后鸠珠，利用fekit構(gòu)建工具運(yùn)行該項(xiàng)目，然后在chorme瀏覽器的source面板中秋麸，我們可以看到index.js變成了如下內(nèi)容：
;(function(__context){
var module = {
id : "118cd57f279558dffcbae8096c7cf113" ,
filename : "index.js" ,
exports : {}
};
if( !__context.____MODULES ) { __context.____MODULES = {}; }
var r = (function( exports , module , global ){
var $ =__context.____MODULES['8777f761b8463a858236c246bedbce92'];
exports.ajax = function(){
$.ajax({
url: '/web/getJSON',
method: 'GET',
data: {},
success: function(res){
var str = "";
$.each(res.data,function(index,value){
str+="<li>"+value+"</li>";
});
$('.ul').html(str);
}
})
}
exports.count = 1;
})( module.exports , module , __context );
__context.____MODULES[ "118cd57f279558dffcbae8096c7cf113" ] = module.exports;
})(this);
對(duì)比我們自己在項(xiàng)目中的index.js渐排，我們發(fā)現(xiàn)，瀏覽器中展示的index.js對(duì)我們的index.js進(jìn)行了包裝灸蟆，外層包了兩層IIFE驯耻，這就是fekit幫我們做得事。
fekit做了什么炒考？
我們知道了fekit對(duì)我們的JS文件外層包了兩層IIFE可缚，那么這兩層IIFE干了什么呢？
同時(shí)我們好像也明白了為什么模塊之前的作用域?qū)崿F(xiàn)了隔離斋枢，避免了相互污染帘靡。就是這兩層IIFE的引起的。
第一層IIFE
通過(guò)瀏覽器中的index.js瓤帚，我們可以看出此層包裝的目的：
-
傳入宿主對(duì)象测柠。通過(guò)傳入
this實(shí)參給__context形參來(lái)實(shí)現(xiàn)宿主對(duì)象的傳遞，我們還可以看出宿主對(duì)象中有一個(gè)____MODULES數(shù)組缘滥，其儲(chǔ)存著通過(guò)CommonJS規(guī)范定義的每一個(gè)模塊的映射轰胁。這就是第一層IIFE為什么要傳入宿主對(duì)象的原因，就是為了通過(guò)這個(gè)——MODULES數(shù)組中儲(chǔ)存的映射去引用其他模塊朝扼；同時(shí)將當(dāng)前模塊的映射保存進(jìn)這個(gè)數(shù)組,以便其他模塊引用赃阀。 - 創(chuàng)建當(dāng)前模塊的module對(duì)象。該對(duì)象中包括當(dāng)前模塊的id擎颖、filename榛斯、exports屬性。
第二層IIFE
此層包裝的目的：
-
將上一層IIFE中創(chuàng)建的module對(duì)象和宿主對(duì)象傳入搂捧。傳入module對(duì)象是為了包裝當(dāng)前模塊驮俗，傳入宿主對(duì)象是為了將當(dāng)前模塊的映射保存進(jìn)
——MODULES數(shù)組。 -
引用其他模塊允跑。我們可以看出第二層IIFE的第一句就是去宿主對(duì)象的
——MODULES數(shù)組中查找一個(gè)ID,這個(gè)ID就是jquery.js模塊的moudule對(duì)象中的id屬性王凑。 - 將模塊中的方法或變量賦值給exports對(duì)象。將該模塊需要暴露出去給其他模塊使用的方法或變量賦值給上一層傳入的module對(duì)象的exports對(duì)象聋丝。
- 將當(dāng)前模塊儲(chǔ)存進(jìn)宿主對(duì)象的“____MODULES”數(shù)組索烹。將該模塊的id儲(chǔ)存到宿主對(duì)象的“____MODULES”數(shù)組后，其他模塊就可以引用當(dāng)前模塊了弱睦。
注：在CommonJS中百姓，每個(gè)模塊都有一個(gè)module對(duì)象代表當(dāng)前模塊對(duì)象，其exports對(duì)象中儲(chǔ)存了暴露給其他模塊的變量和方法况木。
結(jié)束語(yǔ)
這就是fekit對(duì)CommonJS規(guī)范的實(shí)現(xiàn)垒拢，使開(kāi)發(fā)者可以方便的對(duì)JS進(jìn)行模塊化開(kāi)發(fā)旬迹，而不用擔(dān)心瀏覽器不支持CommonJS規(guī)范編寫(xiě)的JS模塊化的文件。
前端自動(dòng)化構(gòu)建工具對(duì)于JS模塊化的包裝的方式也各有不同求类，但是目的是一樣的奔垦，比如Gulp利用webpack的imports-loader插件進(jìn)行的包裝如下，有興趣的小伙伴可以研究一下仑嗅。
gulp(webpack)包裝后
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ },
/* 1 */
/***/ function(module, exports) {
/*** IMPORTS FROM imports-loader ***/
var define = false;
var common = {
render: function ($el, str) {
if($el.get(0).tagName.toLowerCase() == 'body') {
$el.prepend(str);
} else {
$el.html(str);
}
}
};
module.exports = common;
/***/ }
/******/ ]);
gulp(webpack)包裝前
var common = {
render: function ($el, str) {
if($el.get(0).tagName.toLowerCase() == 'body') {
$el.prepend(str);
} else {
$el.html(str);
}
}
};
module.exports = common;
