成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

sea.js的同步魔法

cloud / 556人閱讀

摘要：寫(xiě)法加載完后，得到的執(zhí)行結(jié)果作為參數(shù)傳入了回調(diào)函數(shù)寫(xiě)法預(yù)加載了執(zhí)行模塊，并得到結(jié)果賦值給調(diào)用模塊提供的方法從這一點(diǎn)上來(lái)看，兩者在性能上并沒(méi)有太多差異。

前些時(shí)間也是想寫(xiě)點(diǎn)關(guān)于CMD模塊規(guī)范的文字，以便幫助自己理解。今天看到一篇知乎回答，算是給了我一點(diǎn)啟發(fā)。

同步寫(xiě)法卻不阻塞？

先上一個(gè)sea.js很經(jīng)典的模塊寫(xiě)法：

// 定義一個(gè)模塊
define(function(require, exports, module) {
  // 加載jquery模塊
  var $ = require("jquery");
  // 直接使用模塊里的方法
  $("#header").hide();
});

按道理加載模塊，就是需要等jquery.js加載完畢才能使用，應(yīng)該是一個(gè)異步的過(guò)程，為什么可以寫(xiě)成同步的形式呢？這是用了什么黑科技？

原來(lái)作者玉伯大佬用了一個(gè)小魔法來(lái)“欺騙”我們。而盧勃大神在知乎給了一個(gè)很精彩的解釋?zhuān)@里直接分享下：

也就是說(shuō)，require.js和sea.js都是在執(zhí)行模塊前預(yù)加載了依賴的模塊，并沒(méi)有比require.js顯得更“懶加載”，只是所依賴模塊的代碼執(zhí)行時(shí)機(jī)不同。require.js加載時(shí)執(zhí)行，而sea.js是使用時(shí)執(zhí)行。

其實(shí)從代碼的寫(xiě)法也看得出來(lái)，require.js的依賴模塊在加載后便有了執(zhí)行結(jié)果，并作為回調(diào)函數(shù)的實(shí)參傳入。

reuiqre.js寫(xiě)法：

// 加載完jquery.js后，得到的執(zhí)行結(jié)果$作為參數(shù)傳入了回調(diào)函數(shù)
define(["jquery"], function($) {
  $("#header").hide();
});

sea.js寫(xiě)法：

// 預(yù)加載了jquery.js
define(function(require, exports, module) {
  // 執(zhí)行jquery.js模塊，并得到結(jié)果賦值給$
  var $ = require("jquery");
  // 調(diào)用jquery.js模塊提供的方法
  $("#header").hide();
});

從這一點(diǎn)上來(lái)看，兩者在性能上并沒(méi)有太多差異。因?yàn)樽钣绊戫?yè)面渲染速度的當(dāng)然是資源的加載速度，既然都是預(yù)加載，那么加載模塊資源的耗時(shí)是一樣的（網(wǎng)絡(luò)情況相同時(shí)）。

而模塊代碼的執(zhí)行時(shí)機(jī)并沒(méi)有那么影響性能（除非你的模塊太大），現(xiàn)在的js引擎如V8引擎足夠強(qiáng)，沒(méi)什么壓力。

懶加載是否存在？

懶加載是存在的。我剛才說(shuō)的sea.js并沒(méi)有比require.js更顯得“懶加載”是指模塊加載的時(shí)機(jī)上兩者是一致的，都是預(yù)先加載，而不是說(shuō)不能懶加載。

比如說(shuō)，有一個(gè)模塊，頁(yè)面渲染時(shí)，我不需要加載使用，但是在做了某種交互時(shí)（比如點(diǎn)了按鈕），才需要加載使用，這個(gè)時(shí)候“懶加載”的作用就體現(xiàn)了。下面以require.js舉個(gè)實(shí)例：

require.config({
    baseUrl: "./assets/js/",
    paths: {
        modulea: "module-a",
        moduleb: "module-b"
    }
})

require(["modulea"], function(modulea) {
    var btnNode = document.querySelector("#btn-load");
    var node1 = document.createElement("span");
    node1.innerText = "模塊A已經(jīng)加載！"
    btnNode.insertAdjacentElement("beforebegin",  node1)
    btnNode.addEventListener("click", function() {
        require(["moduleb"], function(moduleb) {
            var node2 = document.createElement("span");
            node2.innerText = "模塊B已經(jīng)加載！"
            btnNode.insertAdjacentElement("afterend",  node2)
        });
    })
});

頁(yè)面渲染時(shí)只加載模塊A

點(diǎn)擊按鈕后加載模塊B

總結(jié)

雖然AMD和CMD兩種思想有一些差異，但都不失為一種優(yōu)秀的模塊化方案，為大佬們打call！

首發(fā)鏈接

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/110322.html

相關(guān)文章

  • 前端模塊化之AMD/require.js、CMD/sea.js

    摘要：代碼地址模塊化的主要區(qū)別此前年前前前前前端模塊化，主流的就是，支持的二者都可以用為什么模塊化一直以來(lái)，前端開(kāi)發(fā)的痛點(diǎn)之一就是代碼復(fù)用職責(zé)劃分問(wèn)題，兼容性比如等新語(yǔ)法的支持組件化代碼壓縮等不在本文討論范圍。showImg(https://user-gold-cdn.xitu.io/2019/5/22/16adee75f360801a); 前言 請(qǐng)注意，現(xiàn)在是2019/05/22，這！不！是！墳...

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

  • 淺談 JavaScript 模塊化編程

    摘要：與在模塊化編程的世界中，有兩個(gè)規(guī)范不得不提，它們分別是和。所有依賴于某個(gè)模塊的代碼全部移到模塊加載語(yǔ)句的回調(diào)函數(shù)中去。的語(yǔ)句接受兩個(gè)參數(shù)在回調(diào)函數(shù)中，可以通過(guò)變量引用模塊?；卣{(diào)函數(shù)的返回值就是當(dāng)前對(duì)象的導(dǎo)出值。 JavaScript本身不是一種模塊化語(yǔ)言，設(shè)計(jì)者在創(chuàng)造JavaScript之初應(yīng)該也沒(méi)有想到這么一個(gè)腳本語(yǔ)言的作用領(lǐng)域會(huì)越來(lái)越大。以前一個(gè)頁(yè)面的JS代碼再多也不會(huì)多到哪兒去，...

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

  • 閱讀sea.js源碼小結(jié)

    摘要：依賴信息是一個(gè)數(shù)組，比如上面的依賴數(shù)組是源碼如下是利用正則解析依賴的一個(gè)函數(shù)時(shí)間出發(fā)函數(shù)主要看這個(gè)部分注釋是防止拷貝該時(shí)間的回調(diào)函數(shù)，防止修改，困惑了一下。對(duì)的賦值需要同步執(zhí)行，不能放在回調(diào)函數(shù)里。 sea.js想解決的問(wèn)題 惱人的命名沖突 煩瑣的文件依賴 對(duì)應(yīng)帶來(lái)的好處 Sea.js 帶來(lái)的兩大好處： 通過(guò) exports 暴露接口。這意味著不需要命名空間了，更不需要全局變量。...

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

  • 前端模塊化詳解(完整版)

    摘要：二模塊化規(guī)范概述應(yīng)用由模塊組成，采用模塊規(guī)范。模塊化語(yǔ)法命令用于規(guī)定模塊的對(duì)外接口，命令用于輸入其他模塊提供的功能。 前言 在JavaScript發(fā)展初期就是為了實(shí)現(xiàn)簡(jiǎn)單的頁(yè)面交互邏輯，寥寥數(shù)語(yǔ)即可；如今CPU、瀏覽器性能得到了極大的提升，很多頁(yè)面邏輯遷移到了客戶端（表單驗(yàn)證等），隨著web2.0時(shí)代的到來(lái)，Ajax技術(shù)得到廣泛應(yīng)用，jQuery等前端庫(kù)層出不窮，前端代碼日益膨脹，此時(shí)...

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

  • 前端模塊化詳解(完整版)

    摘要：二模塊化規(guī)范概述應(yīng)用由模塊組成，采用模塊規(guī)范。模塊化語(yǔ)法命令用于規(guī)定模塊的對(duì)外接口，命令用于輸入其他模塊提供的功能。 前言 在JavaScript發(fā)展初期就是為了實(shí)現(xiàn)簡(jiǎn)單的頁(yè)面交互邏輯，寥寥數(shù)語(yǔ)即可；如今CPU、瀏覽器性能得到了極大的提升，很多頁(yè)面邏輯遷移到了客戶端（表單驗(yàn)證等），隨著web2.0時(shí)代的到來(lái)，Ajax技術(shù)得到廣泛應(yīng)用，jQuery等前端庫(kù)層出不窮，前端代碼日益膨脹，此時(shí)...

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

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

0條評(píng)論

閱讀需要支付1元查看
<