前端Tank技能---模塊化加載器的簡單實現

ShevaKuilin 發布于2019-08-19 18:31 / 2668人閱讀

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

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

裝個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(){
    //...
}

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

再比如這樣

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

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

再比如這樣：

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

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

    return {
        init : init
    }    
})();

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

再比如一下這個樣子：

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

好，這樣就可以擴展module了。

其實以上都不是本篇的重點，本篇的重點是模塊加載工具的簡單實現。

模塊加載器

以上大家都看到了，要實現模塊化，我們要設計，要知道怎么搞好，然后呢用這個方法去實現，啪啪啪寫好多代碼去實現。

那么換個思路想想，我們為什么不在打包過程中編譯過程中或者加載過程中由程序去做這個事情呢。對，fekit是這樣實現，好多好多都是這樣實現的，實現這樣功能的東西就是模塊加載器。

先說說，我們已經寫的次數和名字差不多的 require是怎么實現的。

拋開一直寫的那個require不講，我們說的是一個簡單的模塊加載器的簡單實現。

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

實現一個readFile方法，返回對應文件的內容；

將返回的字符串作為代碼進行執行。

readFile非常好實現，忽略不提。

然后就是把字符串轉成可以執行的程序代碼。eval是第一個冒出來的，但是，一般提到他都會是棄用的，會有安全的漏洞

更好的方案是Function構造器。

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

兩個參數，第一個是用逗號分隔的參數列表字符串，第二個是函數體字符串

有了這個我們就可以來實現require方法了

//module.js

function require(name){

    //調用一個模塊，首先檢查這個模塊是否已經調用
    if(name in require.cache){
        return require.cache[name];
    }

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

    require.cache[name] = module.exports;

        //返回exports
    return module.exports;
}

//緩存對象，為了應對重復調用
require.cache = Object.create(null);

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

這就是一個簡單的CommonJS模塊風格的加載方式，也是node和fekit現在使用的加載方式。

實現demo

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

有一個文件 aaa.js,內容如下

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

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

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

再思考

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

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

GPU云服務器云服務器前端技能前端技能樹前端開發技能前端工程師技能

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79657.html

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

摘要：事件詳細研究邊界事件外鏈樣式在某些瀏覽器下面會影響腳本的加載。事件和事件是同時的。這就是要監聽頁面的事件，當事件為時就可以開始做的事情了。頁面加載狀態 $(document).ready() $(function(){}) 這兩個是我們在頁面初始化時經常使用的監聽方案，那么他的實際的執行關系時什么樣的呢？在原生js中是什么樣的一種表現？以下我會一而再再而三的寫DOMConten...

silencezwm 2019-08-22 11:02 評論0 收藏0
前端Tank技能---頁面load事件分析

摘要：事件詳細研究邊界事件外鏈樣式在某些瀏覽器下面會影響腳本的加載。事件和事件是同時的。這就是要監聽頁面的事件，當事件為時就可以開始做的事情了。頁面加載狀態 $(document).ready() $(function(){}) 這兩個是我們在頁面初始化時經常使用的監聽方案，那么他的實際的執行關系時什么樣的呢？在原生js中是什么樣的一種表現？以下我會一而再再而三的寫DOMConten...

lpjustdoit 2019-08-01 15:33 評論0 收藏0
前端Tank技能---瀏覽器嗅探

摘要：由于那個時候是霸主，這也導致微軟推出的時候必須把自己偽裝成瀏覽器，于是他們的也是以開頭的。各個版本典型的如下其中之后的就是當前的版本號。的幾個版本的其中之后的是版本號提供了專門的瀏覽器標志，就是屬性。目前，的是其中，版本號在之后的數字。瀏覽器嗅探瀏覽器嗅探不用說了，為了更好的性能，會需要各種各樣的兼容性處理，自然就會有針對不同瀏覽器的判斷.一般的代碼中，我們都是通過navigato...

Blackjun 2019-08-19 18:32 評論0 收藏0
前端相關大雜燴

摘要：希望幫助更多的前端愛好者學習。前端開發者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發工程師當你問起有關與時，老司機們首先就會告訴你其實是個沒有網絡請求功能的庫。前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評論0 收藏0
設計模式之工廠模式

摘要：缺點需要慎重考慮是否增加工廠類進行管理，因為會增加代碼的復雜度使用場景工廠模式是創建型模式的一種，其實就等價于對象，但是否將對象改造成工廠模式，使我們需要衡量的。前言最近北京天氣越來越冷了，同在北京的小伙伴大家注意保暖。不扯廢話了，讓我們直接進入到工廠模式的學習. 什么是工廠模式定義一個用于創建對象的接口，讓子類決定實例化哪一個類。工廠方法使一個類的實例化延遲到子類。 UML類圖...

huangjinnan 2019-08-16 10:52 評論0 收藏0