資訊專欄INFORMATION COLUMN
摘要：遵循的是異步模塊定義規(guī)范，遵循的是通用模塊定義規(guī)范。不同的腳本加載這個模塊，得到的都是同一個實例。關于異步那些事就寫到這里了，很多地方理解的不夠深刻希望大家多多指教。
JS異步那些事 一 （基礎知識）
JS異步那些事 二 （分布式事件）
JS異步那些事 三 （Promise）
JS異步那些事 四（HTML 5 Web Workers）
JS異步那些事 五 （異步腳本加載）
JavaScript在瀏覽器中被解析和執(zhí)行時具有阻塞的特性，也就是說，當JavaScript代碼執(zhí)行時，頁面的解析、渲染以及其他資源的下載都要停下來等待腳本執(zhí)行完畢
瀏覽器是按照從上到下的順序解析頁面，因此正常情況下，JavaScript腳本的執(zhí)行順序也是從上到下的，即頁面上先出現(xiàn)的代碼或先被引入的代碼總是被先執(zhí)行，即使是允許并行下載JavaScript文件時也是如此。注意我們這里標紅了"正常情況下"，原因是什么呢？我們知道，在HTML中加入JavaScript代碼有多種方式，概括如下(不考慮require.js或sea.js等模塊加載器)：
（1）正常引入：即在頁面中通過
加上 defer 等于在頁面完全在入后再執(zhí)行，相當于 window.onload ，但應用上比 window.onload 更靈活！
使用async屬性，瀏覽器會下載js文件，同時繼續(xù)對后面的內容進行渲染
通常如果js不需要改變DOM結構時可以使用async進行異步加載（比如一些統(tǒng)計代碼可以異步加載，因為此代碼與頁面執(zhí)行邏輯無關，不會改變DOM結構）
網(wǎng)上寫amd和cmd的文章很多，當然也有很多都是誤人子弟的片面的看法，所以還是推薦自己看官方文檔多加嘗試去理解。
“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）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項功能，比如Ruby的require、Python的import，甚至就連CSS都有@import
到了ES6，實現(xiàn)了模塊化的功能，功能上基本可以取代 cmd和amd的規(guī)范，
模塊的功能主要由兩個命令構成，export和import，export命令用于規(guī)定模塊的對外接口，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時，不會去執(zhí)行模塊，而是只生成一個動態(tài)的只讀引用。等到真的需要用到時，再到模塊里面去取值，換句話說，ES6的輸入有點像Unix系統(tǒng)的”符號連接“，原始值變了，import輸入的值也會跟著變。因此，ES6模塊是動態(tài)引用，并且不會緩存值，模塊里面的變量綁定其所在的模塊。
// 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";
現(xiàn)在執(zhí)行main.js，輸出的是1。
證明加載的是同一個實例
參考 http://es6.ruanyifeng.com/#docs/module
寫這篇博客參考了很多網(wǎng)上的文章和一些書籍，因為太多就沒有一一列舉，這也算是我學習js異步知識的一個記錄吧。
畢竟馬上就要去以一個前端工程師的身份去鵝廠實習了，所以還是要多學點東西，拿點干貨出來。
關于JS異步那些事就寫到這里了，很多地方理解的不夠深刻希望大家多多指教。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/87766.html
摘要：向添加一個事件監(jiān)聽器當傳遞消息時，會執(zhí)行事件監(jiān)聽器中的代碼。終止當我們創(chuàng)建對象后，它會繼續(xù)監(jiān)聽消息即使在外部腳本完成之后直到其被終止為止。 JS異步那些事 一 （基礎知識）JS異步那些事 二 （分布式事件）JS異步那些事 三 （Promise）JS異步那些事 四（HTML 5 Web Workers）JS異步那些事 五 （異步腳本加載） 什么是 Web Worker？ 當在 HTML ...
摘要：異常處理異常處理一直是回調的難題，而提供了非常方便的方法在一次調用中，任何的環(huán)節(jié)發(fā)生，都可以在最終的中捕獲到錯誤處理基本的小結具體的很多的用法可以參考阮一峰的入門教程，還有就是上面提到的電子書。 JS異步那些事 一 （基礎知識）JS異步那些事 二 （分布式事件）JS異步那些事 三 （Promise）JS異步那些事 四（HTML 5 Web Workers）JS異步那些事 五 （異步腳本...
摘要：異步那些事一基礎知識異步那些事二分布式事件異步那些事三異步那些事四異步那些事五異步腳本加載事件概念異步回調首先了講講中兩個方法和定義和用法方法用于在指定的毫秒數(shù)后調用函數(shù)或計算表達式。功能在事件循環(huán)的下一次循環(huán)中調用回調函數(shù)。 JS異步那些事 一 （基礎知識）JS異步那些事 二 （分布式事件）JS異步那些事 三 （Promise）JS異步那些事 四（HTML 5 Web Workers...
摘要：主線程從任務隊列中讀取事件，這個過程是循環(huán)不斷的，所以整個的這種運行機制又稱為事件循環(huán)。上面也提到，在到達指定時間時，定時器就會將相應回調函數(shù)插入任務隊列尾部。這就是定時器功能。關于定時器的重要補充定時器包括與兩個方法。 一、引子 本文介紹JavaScript運行機制，這一部分比較抽象，我們先從一道面試題入手： console.log(1); setTimeout(function()...
閱讀 2515·2021-11-22 13:53
閱讀 1194·2021-09-22 16:06
閱讀 1442·2021-09-02 15:21
閱讀 1984·2019-08-30 15:55
閱讀 3193·2019-08-29 11:19
閱讀 1974·2019-08-26 13:23
閱讀 1003·2019-08-23 18:23
閱讀 1812·2019-08-23 16:06
