国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS異步那些事 五 （異步腳本加載）

terasum / 3564人閱讀

摘要：遵循的是異步模塊定義規范，遵循的是通用模塊定義規范。不同的腳本加載這個模塊，得到的都是同一個實例。關于異步那些事就寫到這里了，很多地方理解的不夠深刻希望大家多多指教。

JS異步那些事 一 （基礎知識）
JS異步那些事 二 （分布式事件）
JS異步那些事 三 （Promise）
JS異步那些事 四（HTML 5 Web Workers）
JS異步那些事 五 （異步腳本加載）

異步腳本加載 阻塞性腳本

JavaScript在瀏覽器中被解析和執行時具有阻塞的特性，也就是說，當JavaScript代碼執行時，頁面的解析、渲染以及其他資源的下載都要停下來等待腳本執行完畢

瀏覽器是按照從上到下的順序解析頁面，因此正常情況下，JavaScript腳本的執行順序也是從上到下的，即頁面上先出現的代碼或先被引入的代碼總是被先執行，即使是允許并行下載JavaScript文件時也是如此。注意我們這里標紅了"正常情況下"，原因是什么呢？我們知道，在HTML中加入JavaScript代碼有多種方式，概括如下(不考慮require.js或sea.js等模塊加載器)：

（1）正常引入：即在頁面中通過

加上 defer 等于在頁面完全在入后再執行，相當于 window.onload ，但應用上比 window.onload 更靈活！

使用async屬性，瀏覽器會下載js文件，同時繼續對后面的內容進行渲染
通常如果js不需要改變DOM結構時可以使用async進行異步加載（比如一些統計代碼可以異步加載，因為此代碼與頁面執行邏輯無關，不會改變DOM結構）

SeaJS與RequireJS

網上寫amd和cmd的文章很多，當然也有很多都是誤人子弟的片面的看法，所以還是推薦自己看官方文檔多加嘗試去理解。

“RequireJS 遵循的是 AMD（異步模塊定義）規范，SeaJS 遵循的是 CMD （通用模塊定義）規范”。

AMD 是 RequireJS 在推廣過程中對模塊定義的規范化產出。
CMD 是 SeaJS 在推廣過程中對模塊定義的規范化產出。

amd 規劃 https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)

cmd 規范 https://github.com/seajs/seajs/issues/242

區別：

對于依賴的模塊，AMD 是提前執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改成可以延遲執行（根據寫法不同，處理方式不同）

CMD 推崇依賴就近，AMD 推崇依賴前置。

ECMAScript6 Moudle

歷史上，JavaScript一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項功能，比如Ruby的require、Python的import，甚至就連CSS都有@import
到了ES6，實現了模塊化的功能，功能上基本可以取代 cmd和amd的規范，

模塊的功能主要由兩個命令構成，export和import，export命令用于規定模塊的對外接口，import命令用于輸入其他模塊提供的功能。

export的寫法， 
// profile.js
var firstName = "Michael";
var lastName = "Jackson";
var year = 1958;

export {firstName, lastName, year};

上面代碼在export命令后面，使用大括號指定所要輸出的一組變量。

import寫法： 
// main.js

import {firstName, lastName, year} from "./profile";

function setName(element) {
  element.textContent = firstName + " " + lastName;
}
ES6模塊加載的實質

ES6模塊加載的機制，與CommonJS模塊完全不同。CommonJS模塊輸出的是一個值的拷貝，而ES6模塊輸出的是值的引用。CommonJS模塊輸出的是被輸出值的拷貝，也就是說，一旦輸出一個值，模塊內部的變化就影響不到這個值。

ES6模塊的運行機制與CommonJS不一樣，它遇到模塊加載命令import時，不會去執行模塊，而是只生成一個動態的只讀引用。等到真的需要用到時，再到模塊里面去取值，換句話說，ES6的輸入有點像Unix系統的”符號連接“，原始值變了，import輸入的值也會跟著變。因此，ES6模塊是動態引用，并且不會緩存值，模塊里面的變量綁定其所在的模塊。

// mod.js
function C() {
  this.sum = 0;
  this.add = function () {
    this.sum = 1;
  };
  this.show = function () {
    console.log(this.sum);
  }
}

export let c = new C();

上面的腳本mod.js，輸出的是一個C的實例。不同的腳本加載這個模塊，得到的都是同一個實例。

// x.js
import {c} from "./mod";
c.add();

// y.js
import {c} from "./mod";
c.show();

// main.js
import "./x";
import "./y";

現在執行main.js，輸出的是1。
證明加載的是同一個實例
參考 http://es6.ruanyifeng.com/#docs/module

總結

寫這篇博客參考了很多網上的文章和一些書籍，因為太多就沒有一一列舉，這也算是我學習js異步知識的一個記錄吧。

畢竟馬上就要去以一個前端工程師的身份去鵝廠實習了，所以還是要多學點東西，拿點干貨出來。

關于JS異步那些事就寫到這里了，很多地方理解的不夠深刻希望大家多多指教。

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

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

相關文章

  • JS異步那些事 四（HTML 5 Web Workers）

    摘要：向添加一個事件監聽器當傳遞消息時，會執行事件監聽器中的代碼。終止當我們創建對象后，它會繼續監聽消息即使在外部腳本完成之后直到其被終止為止。 JS異步那些事 一 （基礎知識）JS異步那些事 二 （分布式事件）JS異步那些事 三 （Promise）JS異步那些事 四（HTML 5 Web Workers）JS異步那些事 五 （異步腳本加載） 什么是 Web Worker？ 當在 HTML ...

    ZoomQuiet 評論0 收藏0

  • JS異步那些事 三 （Promise）

    摘要：異常處理異常處理一直是回調的難題，而提供了非常方便的方法在一次調用中，任何的環節發生，都可以在最終的中捕獲到錯誤處理基本的小結具體的很多的用法可以參考阮一峰的入門教程，還有就是上面提到的電子書。 JS異步那些事 一 （基礎知識）JS異步那些事 二 （分布式事件）JS異步那些事 三 （Promise）JS異步那些事 四（HTML 5 Web Workers）JS異步那些事 五 （異步腳本...

    wenzi 評論0 收藏0

  • JS異步那些事 一 （基礎知識）

    摘要：異步那些事一基礎知識異步那些事二分布式事件異步那些事三異步那些事四異步那些事五異步腳本加載事件概念異步回調首先了講講中兩個方法和定義和用法方法用于在指定的毫秒數后調用函數或計算表達式。功能在事件循環的下一次循環中調用回調函數。 JS異步那些事 一 （基礎知識）JS異步那些事 二 （分布式事件）JS異步那些事 三 （Promise）JS異步那些事 四（HTML 5 Web Workers...

    李濤 評論0 收藏0

  • 深入淺出JavaScript運行機制

    摘要：主線程從任務隊列中讀取事件，這個過程是循環不斷的，所以整個的這種運行機制又稱為事件循環。上面也提到，在到達指定時間時，定時器就會將相應回調函數插入任務隊列尾部。這就是定時器功能。關于定時器的重要補充定時器包括與兩個方法。 一、引子 本文介紹JavaScript運行機制，這一部分比較抽象，我們先從一道面試題入手： console.log(1); setTimeout(function()...

    mochixuan 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<