sea.js的同步魔法

cloud 發(fā)布于2019-08-26 18:42 / 508人閱讀

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

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

同步寫法卻不阻塞？

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

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

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

原來作者玉伯大佬用了一個小魔法來“欺騙”我們。而盧勃大神在知乎給了一個很精彩的解釋，這里直接分享下：

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

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

reuiqre.js寫法：

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

sea.js寫法：

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

從這一點上來看，兩者在性能上并沒有太多差異。因為最影響頁面渲染速度的當然是資源的加載速度，既然都是預加載，那么加載模塊資源的耗時是一樣的（網(wǎng)絡情況相同時）。

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

懶加載是否存在？

懶加載是存在的。我剛才說的sea.js并沒有比require.js更顯得“懶加載”是指模塊加載的時機上兩者是一致的，都是預先加載，而不是說不能懶加載。

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

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)
        });
    })
});

頁面渲染時只加載模塊A

點擊按鈕后加載模塊B

總結

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

首發(fā)鏈接

GPU云服務器云服務器創(chuàng)造與魔法云鳥便宜的服務器創(chuàng)造與魔法所有服務器的云鳥在哪魔法女巫黑魔法

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

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

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

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

buildupchao 2019-05-22 19:38 評論0 收藏0
淺談 JavaScript 模塊化編程

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

wdzgege 2019-08-21 12:17 評論0 收藏0
閱讀sea.js源碼小結

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

chavesgu 2019-08-19 18:37 評論0 收藏0
前端模塊化詳解(完整版)

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

Sanchi 2019-08-02 13:56 評論0 收藏0
前端模塊化詳解(完整版)

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

Pines_Cheng 2019-08-23 14:12 評論0 收藏0