sea.js的同步魔法

cloud 發布于2019-08-26 18:42 / 501人閱讀

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

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

同步寫法卻不阻塞？

先上一個sea.js很經典的模塊寫法：

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

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

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

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

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

reuiqre.js寫法：

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

sea.js寫法：

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

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

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

懶加載是否存在？

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

比如說，有一個模塊，頁面渲染時，我不需要加載使用，但是在做了某種交互時（比如點了按鈕），才需要加載使用，這個時候“懶加載”的作用就體現了。下面以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已經加載！"
    btnNode.insertAdjacentElement("beforebegin",  node1)
    btnNode.addEventListener("click", function() {
        require(["moduleb"], function(moduleb) {
            var node2 = document.createElement("span");
            node2.innerText = "模塊B已經加載！"
            btnNode.insertAdjacentElement("afterend",  node2)
        });
    })
});

頁面渲染時只加載模塊A

點擊按鈕后加載模塊B

總結

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

首發鏈接

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

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

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

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

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

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

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

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

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

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

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

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

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

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