前端Tank技能---模塊化加載器的簡單實(shí)現(xiàn)

ShevaKuilin 發(fā)布于2019-08-19 18:31 / 2676人閱讀

摘要：拋開一直寫的那個(gè)不講，我們說的是一個(gè)簡單的模塊加載器的簡單實(shí)現(xiàn)。非常好實(shí)現(xiàn)，忽略不提。是第一個(gè)冒出來的，但是，一般提到他都會(huì)是棄用的，會(huì)有安全的漏洞更好的方案是構(gòu)造器。

什么是模塊化，為什么要模塊化

裝個(gè)b，貼一段English

A beginning programmer writes her programs like an ant builds her hill, one piece at a time, without thought for the bigger structure. Her programs will be like loose sand. They may stand for a while, but growing too big they fall apart.

Realizing this problem, the programmer will start to spend a lot of time thinking about structure. Her programs will be rigidly structured, like rock sculptures. They are solid, but when they must change, violence must be done to them.

The master programmer knows when to apply structure and when to leave things in their simple form. Her programs are like clay, solid yet malleable.

Master Yuan-Ma, The Book of Programming

以上基本上是為什么要模塊化的，至于什么是模塊化有好多好多種。

比如這樣：

function dujia1(){
    //..
}

function dujia2(){
    //...
}

這樣簡單的放在一起也是模塊化，只不過太挫，有些人不承認(rèn)而已。

再比如這樣

var page = {
    init: function(){
        //..
    },
    getData:function(){
        //..    
    },
    bindEvent:function(){
        //...
    },
    __secret:”我不想讓讓人知道"
}

這個(gè)就是我們比價(jià)常用的了。所有page相關(guān)的功能都作為屬性包在page這個(gè)模塊里面，基本上對全局沒有污染。但是也沒有保留，也就是對外部來說，所有的東西都是可以看到的。
比如訪問 page.__secret 你能獲取這個(gè)秘密，這樣的包裝方式是包不住的。

再比如這樣：

var page = (function(){
    
    var  __secret = ”我不想讓讓人知道”;

    var init = function(){
        //..
    };
    var getData = function(){
        //..    
    };
    var bindEvent = function(){
        //...
    };

    return {
        init : init
    }    
})();

這樣呢外吐的只有init了。是吧，其他都包住了。

再比如一下這個(gè)樣子：

var page = (function(mod){
    mod.xxx=yyy;
    return mod
})(module);

好，這樣就可以擴(kuò)展module了。

其實(shí)以上都不是本篇的重點(diǎn)，本篇的重點(diǎn)是模塊加載工具的簡單實(shí)現(xiàn)。

模塊加載器

以上大家都看到了，要實(shí)現(xiàn)模塊化，我們要設(shè)計(jì)，要知道怎么搞好，然后呢用這個(gè)方法去實(shí)現(xiàn)，啪啪啪寫好多代碼去實(shí)現(xiàn)。

那么換個(gè)思路想想，我們?yōu)槭裁床辉诖虬^程中編譯過程中或者加載過程中由程序去做這個(gè)事情呢。對，fekit是這樣實(shí)現(xiàn)，好多好多都是這樣實(shí)現(xiàn)的，實(shí)現(xiàn)這樣功能的東西就是模塊加載器。

先說說，我們已經(jīng)寫的次數(shù)和名字差不多的 require是怎么實(shí)現(xiàn)的。

拋開一直寫的那個(gè)require不講，我們說的是一個(gè)簡單的模塊加載器的簡單實(shí)現(xiàn)。

定義一下：這個(gè)加載器，可以通過require一個(gè)文件的方式，把里面的內(nèi)容添加到require的文件中，并能夠執(zhí)行他。也就是通過傳入模塊名來取得該模塊的調(diào)用。

實(shí)現(xiàn)一個(gè)readFile方法，返回對應(yīng)文件的內(nèi)容；

將返回的字符串作為代碼進(jìn)行執(zhí)行。

readFile非常好實(shí)現(xiàn)，忽略不提。

然后就是把字符串轉(zhuǎn)成可以執(zhí)行的程序代碼。eval是第一個(gè)冒出來的，但是，一般提到他都會(huì)是棄用的，會(huì)有安全的漏洞

更好的方案是Function構(gòu)造器。

var plus = new Function("name", "return name + ‘ bigger"");
console.log(plus("Iphone6")); //Iphone6 bigger

兩個(gè)參數(shù)，第一個(gè)是用逗號分隔的參數(shù)列表字符串，第二個(gè)是函數(shù)體字符串

有了這個(gè)我們就可以來實(shí)現(xiàn)require方法了

//module.js

function require(name){

    //調(diào)用一個(gè)模塊，首先檢查這個(gè)模塊是否已經(jīng)調(diào)用
    if(name in require.cache){
        return require.cache[name];
    }

        //此處生成一個(gè)code的函數(shù)，參數(shù)為  exports 和 module， 函數(shù)體為readFile返回的js文件中的代碼字符串
    var code = new Function("exports, module", readFile(name));
        
        //定義外吐內(nèi)容
    var exports = {},
        module = {exports: exports};
        
        //執(zhí)行函數(shù)體，如果有定義外吐，既module.exports 或者  exports.***之類的，會(huì)改寫上面的外吐內(nèi)容
    code(exports, module);

    require.cache[name] = module.exports;

        //返回exports
    return module.exports;
}

//緩存對象，為了應(yīng)對重復(fù)調(diào)用
require.cache = Object.create(null);

//讀文件，返回結(jié)果
function readFile(fileName){ ... }

這就是一個(gè)簡單的CommonJS模塊風(fēng)格的加載方式，也是node和fekit現(xiàn)在使用的加載方式。

實(shí)現(xiàn)demo

親測，不加demo很有可能看不懂

有一個(gè)文件 aaa.js,內(nèi)容如下

function (){
    console.log("this is aaa");
}
exports.aaa = "aaa";

這是var aaa = require("aaa.js")會(huì)做以下事情

readFile("aaa.js") 以字符串形式返回aaa的所有函數(shù)體，也就是上面的哪些部分代碼
通過new Function構(gòu)造器，創(chuàng)造一個(gè)code函數(shù)，函數(shù)體是aaa.js里面的內(nèi)容
執(zhí)行code函數(shù)，log出結(jié)果，然后擴(kuò)展了module.exports
返回這個(gè)module.exports 改外面的變量 aaa

再思考

我們在吐js模塊的時(shí)候經(jīng)常使用的方案是這樣兩種
# module.exports = a object;
# exports.aaa = function();

如果我們直接寫 exports = a object 會(huì)怎么樣，為什么？

云服務(wù)器 GPU云服務(wù)器前端技能前端技能樹前端開發(fā)技能前端工程師技能

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79657.html

發(fā)表評論

登陸后可評論

0條評論

ShevaKuilin

男|高級講師

我要關(guān)注我要私信

TA的文章

串口連接傳輸文件

閱讀 881·2021-11-15 11:37
我TM的才30歲，為什么不能轉(zhuǎn)行程序員？

閱讀 3619·2021-11-11 16:55
Facebook 與 GitHub 達(dá)成合作，可避免出現(xiàn)泄漏Facebook API token的情

閱讀 3284·2021-11-11 11:01
Flex 布局

閱讀 1008·2019-08-30 15:43
原生js實(shí)現(xiàn)簡單的下拉刷新功能

閱讀 2755·2019-08-30 14:12
tooltips 提示

閱讀 695·2019-08-30 12:58
淺談高性能web前端技術(shù)?！“纵p松做到減少HTTP請求

閱讀 3397·2019-08-29 15:19
案例學(xué)習(xí)總結(jié)：原生JS實(shí)現(xiàn)表格排序

閱讀 2037·2019-08-29 13:59

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

前端Tank技能---模塊化加載器的簡單實(shí)現(xiàn)

相關(guān)文章

**前端Tank技能---頁面load事件分析**

**前端Tank技能---頁面load事件分析**

**前端Tank技能---瀏覽器嗅探**

前端相關(guān)大雜燴

設(shè)計(jì)模式之工廠模式

發(fā)表評論

0條評論

ShevaKuilin

男|高級講師

TA的文章

串口連接傳輸文件

我TM的才30歲，為什么不能轉(zhuǎn)行程序員？

Facebook 與 GitHub 達(dá)成合作，可避免出現(xiàn)泄漏Facebook API token的情

Flex 布局

原生js實(shí)現(xiàn)簡單的下拉刷新功能

tooltips 提示

淺談高性能web前端技術(shù)?！“纵p松做到減少HTTP請求

案例學(xué)習(xí)總結(jié)：原生JS實(shí)現(xiàn)表格排序

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

前端Tank技能---模塊化加載器的簡單實(shí)現(xiàn)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！