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

資訊專欄INFORMATION COLUMN

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

terasum / 3579人閱讀

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

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

異步腳本加載 阻塞性腳本

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

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

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

加上 defer 等于在頁面完全在入后再執(zhí)行，相當(dāng)于 window.onload ，但應(yīng)用上比 window.onload 更靈活！

使用async屬性，瀏覽器會(huì)下載js文件，同時(shí)繼續(xù)對后面的內(nèi)容進(jìn)行渲染
通常如果js不需要改變DOM結(jié)構(gòu)時(shí)可以使用async進(jìn)行異步加載（比如一些統(tǒng)計(jì)代碼可以異步加載，因?yàn)榇舜a與頁面執(zhí)行邏輯無關(guān)，不會(huì)改變DOM結(jié)構(gòu)）

SeaJS與RequireJS

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

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

AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。
CMD 是 SeaJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。

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

cmd 規(guī)范 https://github.com/seajs/seajs/issues/242

區(qū)別：

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

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

ECMAScript6 Moudle

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

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

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

export {firstName, lastName, year};

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

import寫法： 
// main.js

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

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

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

ES6模塊的運(yùn)行機(jī)制與CommonJS不一樣，它遇到模塊加載命令import時(shí)，不會(huì)去執(zhí)行模塊，而是只生成一個(gè)動(dòng)態(tài)的只讀引用。等到真的需要用到時(shí)，再到模塊里面去取值，換句話說，ES6的輸入有點(diǎn)像Unix系統(tǒng)的”符號(hào)連接“，原始值變了，import輸入的值也會(huì)跟著變。因此，ES6模塊是動(dòng)態(tài)引用，并且不會(huì)緩存值，模塊里面的變量綁定其所在的模塊。

// 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，輸出的是一個(gè)C的實(shí)例。不同的腳本加載這個(gè)模塊，得到的都是同一個(gè)實(shí)例。

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

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

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

現(xiàn)在執(zhí)行main.js，輸出的是1。
證明加載的是同一個(gè)實(shí)例
參考 http://es6.ruanyifeng.com/#docs/module

總結(jié)

寫這篇博客參考了很多網(wǎng)上的文章和一些書籍，因?yàn)樘嗑蜎]有一一列舉，這也算是我學(xué)習(xí)js異步知識(shí)的一個(gè)記錄吧。

畢竟馬上就要去以一個(gè)前端工程師的身份去鵝廠實(shí)習(xí)了，所以還是要多學(xué)點(diǎn)東西，拿點(diǎn)干貨出來。

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

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

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

相關(guān)文章

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

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

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

  • JS異步那些事 三 （Promise）

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

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

  • JS異步那些事 一 （基礎(chǔ)知識(shí)）

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

    李濤 評(píng)論0 收藏0

  • 深入淺出JavaScript運(yùn)行機(jī)制

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

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

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

0條評(píng)論

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