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

資訊專(zhuān)欄INFORMATION COLUMN

AMD的一道面試題

xiaoqibTn / 3597人閱讀

摘要：之前的面試中，一直感覺(jué)模塊化沒(méi)有什么可以問(wèn)的，不過(guò)昨天面試突然想到一個(gè)題目對(duì)于一個(gè)的模式下文件如下很多代碼很多代碼很多代碼文件分別是什么時(shí)候加載的，如何加載的題目不難答案是和是在加載完后就加載。

模塊化現(xiàn)在應(yīng)該已經(jīng)成為了稍微復(fù)雜一點(diǎn)前端開(kāi)發(fā)的標(biāo)配了。在es6中，都已經(jīng)支持了的模塊化。

之前的面試中，一直感覺(jué)模塊化AMD,CMD沒(méi)有什么可以問(wèn)的，不過(guò)昨天面試突然想到一個(gè)題目：
對(duì)于一個(gè)AMD的模式下

文件d.js如下

define(function (require) {
    // ... 很多代碼
    require("a");
    // ... 很多代碼
    require(["b"], function (b) {});
    // ... 很多代碼
    require("c");
});

a.js,b.js,c.js 文件分別是什么時(shí)候加載的，如何加載的？

題目不難

答案是a.js 和 c.js 是在加載完d.js后就加載。
b.js是在執(zhí)行到這一行時(shí)異步加載的。

具體分析：

我沒(méi)有看過(guò)require.js的源碼，我們使用的是esl.js（也是一個(gè)AMD的模塊加載器）,但是他們的實(shí)現(xiàn)原理應(yīng)該差不多。

我從esl.js的角度解讀一下：

同步加載，異步加載

首先大家需要知道AMD里面一個(gè)同步加載和異步加載的概念。

從概念上面理解，同步就是當(dāng)我執(zhí)行到require("a");時(shí)，我需要同步的執(zhí)行a.js里面的內(nèi)容，也就是需要在執(zhí)行到這句話(huà)時(shí)a.js必須已經(jīng)加載好了，這樣才能到達(dá)同步。

而對(duì)于 require(["b"], function (b) {});,我執(zhí)行到這一步時(shí)，是異步的發(fā)出請(qǐng)求，然后異步等待b.js的返回+執(zhí)行。

同步加載的實(shí)現(xiàn)原理

我們從概念上面理解的同步加載的原理，現(xiàn)在看看esl.js的實(shí)踐。
這里面需要處理兩個(gè)核心步驟

執(zhí)行到require("a");時(shí)，a.js必須已經(jīng)加載好了；

a.js文件里面的所有require("*")，也都必須加載好了，保證在執(zhí)行a.js時(shí)，所有a.js依賴(lài)的同步文件都能同步執(zhí)行；

對(duì)于第一步的實(shí)現(xiàn)，大概原理是這樣的，在加載好了d.js后，會(huì)正則匹配一次文件里面的同步依賴(lài)require("*");，例如匹配出了 a.js和c.js，然后繼續(xù)加載a.js和c.js。

對(duì)于第二部，其實(shí)就是一個(gè)遞歸處理，直到?jīng)]有下一步的依賴(lài)為止。

同步加載另外一種處理方法

上面有一部正則邏輯，可見(jiàn)如果使用這種方式，在執(zhí)行代碼前，js需要全部正則一次所有模塊化代碼的。這樣性能是不是有一個(gè)無(wú)謂的耗損。

那么我們一般怎么處理了？

大家一般都了解過(guò)打包編譯，例如在使用Requirejs時(shí)，線上環(huán)境的代碼會(huì)經(jīng)過(guò)r.js處理一次。

那么d.js文件應(yīng)該會(huì)處理如下

define(
    "path/b",
    ["require", "a", "b"],
    function (require) {
        // ... 很多代碼
        require("a");
        // ... 很多代碼
        require(["b"], function (b) {});
        // ... 很多代碼
        require("c");
});

define方法會(huì)增加第一個(gè)和第二個(gè)參數(shù)

第一個(gè)參數(shù)是按照路徑生成一個(gè)具名id
第二個(gè)參數(shù)是此文件所依賴(lài)的同步文件

這時(shí)當(dāng)模塊在解析這個(gè)b,js文件時(shí)，發(fā)現(xiàn)如果存在第二個(gè)參數(shù)，就會(huì)直接解析所需依賴(lài)部分，而省去了正則這一步。

我們正則這一步轉(zhuǎn)換到了打包編譯中去分析，這樣就省掉了瀏覽器加載時(shí)去正則所有AMD文件這一步。

那么為什么我們不在開(kāi)發(fā)環(huán)境中直接使用["require", "a", "b"]方式，我理解目的是為了提高開(kāi)發(fā)便捷性，我們不需要再增加一個(gè)require("*")都在中括號(hào)內(nèi)配置一次，同樣刪除時(shí)也不用去刪掉配置。

因?yàn)檫@一步完全可以在編譯時(shí)處理。

打包編譯的延生

不知道大家有沒(méi)有看過(guò)編譯后的代碼和開(kāi)發(fā)環(huán)境代碼的區(qū)別，對(duì)于這個(gè)d.js文件，編譯后應(yīng)該是：

define(
    "path/a",
    ["require"],
    function (require) {
        // ... 很多代碼
});

define(
    "path/c",
    ["require"],
    function (require) {
        // ... 很多代碼
});

define(
    "path/b",
    ["require", "a", "b"],
    function (require) {
        // ... 很多代碼
        require("a");
        // ... 很多代碼
        require(["b"], function (b) {});
        // ... 很多代碼
        require("c");
});

上面可見(jiàn)，a.js和c.js這兩個(gè)文件被合并到了d.js中，所有文件都加上了具名id。而且這個(gè)id的生成規(guī)則是更具路徑生成的。

而我們異步加載的b.js文件就沒(méi)有被打包進(jìn)來(lái)。這是因?yàn)槲覀兤谕?b>b.js是懶加載的，當(dāng)使用時(shí)在加載，這樣也能達(dá)到按需加載的目的。

公眾號(hào)

博客地址

http://tangguangyao.github.io/

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

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

相關(guān)文章

  • 你不知道的h5

    摘要：目前，常用的模塊規(guī)范主要有兩種和。攔截全局請(qǐng)求一直接引入腳本攔截需要的回調(diào)或函數(shù)。深刻知道一個(gè)良好的命名規(guī)范的重要性，同時(shí)在項(xiàng)目中也會(huì)遇到一些命名的瓶頸。 基于 Three.js 的超快的 3D 開(kāi)發(fā)框架：Whitestorm.js Whitestorm.js 是一款基于 Three.js 超快的 Web 應(yīng)用 3D 開(kāi)發(fā)框架。它為普通的 Three.js 任務(wù)提供封裝、使搭建環(huán)境、...

    IntMain 評(píng)論0 收藏0

  • 一道JS面試題引發(fā)的血案

    摘要：項(xiàng)目組長(zhǎng)給我看了一道面試別人的面試題。打鐵趁熱，再來(lái)一道題來(lái)加深下理解。作者以樂(lè)之名本文原創(chuàng)，有不當(dāng)?shù)牡胤綒g迎指出。 showImg(https://segmentfault.com/img/bVbur0z?w=600&h=400); 剛?cè)肼毿鹿?，屬于公司萌新一枚，一天下午?duì)著屏幕看代碼架構(gòu)時(shí)。BI項(xiàng)目組長(zhǎng)給我看了一道面試別人的JS面試題。 雖然答對(duì)了，但把理由說(shuō)錯(cuò)了，照樣不及格。 ...

    fantix 評(píng)論0 收藏0

  • 一道多線程面試題引起的自我救贖

    摘要：重溫一個(gè)面試題內(nèi)容數(shù)組內(nèi)容為數(shù)組內(nèi)容為個(gè)英文字母，使用兩個(gè)線程分別輸入兩個(gè)數(shù)組，打印內(nèi)容為這樣的規(guī)律提取一下核心內(nèi)容，去除次要內(nèi)容兩個(gè)線程需要交替執(zhí)行，打印數(shù)字的線程需要先執(zhí)行，數(shù)組打印完畢后線程需要結(jié)束。 一道多線程面試題引起的自我救贖 近日去一個(gè)知名互聯(lián)網(wǎng)企業(yè)參加面試，之前準(zhǔn)備多多信心滿(mǎn)滿(mǎn)，但是面試一開(kāi)始就是一道不起眼的編程題 數(shù)組A內(nèi)容為 1,2,3,4...52 ,數(shù)組B內(nèi)容...

    BaronZhang 評(píng)論0 收藏0

  • 前端面試 - 收藏集 - 掘金

    摘要：一基礎(chǔ)接口的意義百度規(guī)范擴(kuò)展回調(diào)抽象類(lèi)的意義我的前端面試經(jīng)歷百度前端掘金博主就讀于電子科技大學(xué)，大三狗一枚面試是個(gè)漫長(zhǎng)的過(guò)程，從海投到收獲電話(huà)面試，一面二面三面，一個(gè)步驟出錯(cuò)那么后面就宣告終結(jié)。 一道常被人輕視的前端 JS 面試題 - 前端 - 掘金 目錄前言第一問(wèn)第二問(wèn)變量聲明提升函數(shù)表達(dá)式第三問(wèn)第四問(wèn)第五問(wèn)第六問(wèn)構(gòu)造函數(shù)的返回值第七問(wèn)最后前言 年前剛剛離職了，分享下我曾經(jīng)出過(guò)的一道...

    lpjustdoit 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<