前端AMD規(guī)范

molyzzx 發(fā)布于2019-08-19 18:45 / 412人閱讀

摘要：如果是對象，此對象應(yīng)該為模塊的輸出值在頁面上使用函數(shù)加載模塊函數(shù)接受兩個參數(shù)第一個參數(shù)是一個數(shù)組，表示所依賴的模塊第二個參數(shù)是一個回調(diào)函數(shù)，當(dāng)前面指定的模塊都加載成功后，它將被調(diào)用。

個人總結(jié)：AMD規(guī)范主要是解決各個模塊之間的依賴關(guān)系，可以順序的加載js模塊，但是卻是異步加載，不會影響頁面的css和html標(biāo)簽的加載。

AMD 即Asynchronous Module Definition，中文名是異步模塊定義的意思。它是一個在瀏覽器端模塊化開發(fā)的規(guī)范
由于不是JavaScript原生支持，使用AMD規(guī)范進(jìn)行頁面開發(fā)需要用到對應(yīng)的庫函數(shù)，也就是大名鼎鼎RequireJS，實際上AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化的產(chǎn)出
requireJS主要解決兩個問題
多個js文件可能有依賴關(guān)系，被依賴的文件需要早于依賴它的文件加載到瀏覽器
js加載的時候瀏覽器會停止頁面渲染，加載文件越多，頁面失去響應(yīng)時間越長
看一個使用requireJS的例子
// 定義模塊 myModule.js

define(["dependency"], function(){
    var name = "Byron";
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 加載模塊
require(["myModule"], function (my){
　 my.printName();
});

語法
requireJS定義了一個函數(shù) define，它是全局變量，用來定義模塊

define(id?, dependencies?, factory);
id：可選參數(shù)，用來定義模塊的標(biāo)識，如果沒有提供該參數(shù)，腳本文件名（去掉拓展名）
dependencies：是一個當(dāng)前模塊依賴的模塊名稱數(shù)組
factory：工廠方法，模塊初始化要執(zhí)行的函數(shù)或?qū)ο?。如果為函?shù)，它應(yīng)該只被執(zhí)行一次。如果是對象，此對象應(yīng)該為模塊的輸出值
在頁面上使用require函數(shù)加載模塊

require([dependencies], function(){});
require()函數(shù)接受兩個參數(shù)

第一個參數(shù)是一個數(shù)組，表示所依賴的模塊
第二個參數(shù)是一個回調(diào)函數(shù)，當(dāng)前面指定的模塊都加載成功后，它將被調(diào)用。加載的模塊會以參數(shù)形式傳入該函數(shù)，從而在回調(diào)函數(shù)內(nèi)部就可以使用這些模塊
require()函數(shù)在加載依賴的函數(shù)的時候是異步加載的，這樣瀏覽器不會失去響應(yīng)，它指定的回調(diào)函數(shù)，只有前面的模塊都加載成功后，才會運行，解決了依賴性的問題。

推薦文章：http://www.cnblogs.com/dolphinX/p/4381855.html

云服務(wù)器 GPU云服務(wù)器前端規(guī)范前端規(guī)范文檔 AMD AMD EYPC

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

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

相關(guān)文章

前端模塊化開發(fā)

摘要：來源于阿賢博客模塊化今天給大家寫一篇關(guān)于前端模塊化開發(fā)知識點。前端模塊化開發(fā)那點歷史模塊化是指在解決某個復(fù)雜混雜問題時，依照一種分類的思維把問題進(jìn)行系統(tǒng)性的分解以之處理。來源于：阿賢博客 javascript模塊化今天給大家寫一篇關(guān)于前端模塊化開發(fā)知識點。前端模塊化開發(fā)那點歷史模塊化：是指在解決某個復(fù)雜、混雜問題時，依照一種分類的思維把問題進(jìn)行系統(tǒng)性的分解以之處理。模塊...

tianhang 2019-08-23 16:44 評論0 收藏0
從 1 到完美，寫一個 js 庫、node 庫、前端組件庫

摘要：從到完美，寫一個庫庫前端組件庫之前講了很多關(guān)于項目工程化前端架構(gòu)前端構(gòu)建等方面的技術(shù)，這次說說怎么寫一個完美的第三方庫。使用導(dǎo)出模塊，就可以在使用這個庫的項目中構(gòu)建時使用功能。從 1 到完美，寫一個 js 庫、node 庫、前端組件庫之前講了很多關(guān)于項目工程化、前端架構(gòu)、前端構(gòu)建等方面的技術(shù)，這次說說怎么寫一個完美的第三方庫。 1. 選擇合適的規(guī)范來寫代碼 js 模塊化的發(fā)展大致有...

rollback 2019-08-29 17:18 評論0 收藏0
從 1 到完美，寫一個 js 庫、node 庫、前端組件庫

摘要：從到完美，寫一個庫庫前端組件庫之前講了很多關(guān)于項目工程化前端架構(gòu)前端構(gòu)建等方面的技術(shù)，這次說說怎么寫一個完美的第三方庫。使用導(dǎo)出模塊，就可以在使用這個庫的項目中構(gòu)建時使用功能。從 1 到完美，寫一個 js 庫、node 庫、前端組件庫之前講了很多關(guān)于項目工程化、前端架構(gòu)、前端構(gòu)建等方面的技術(shù)，這次說說怎么寫一個完美的第三方庫。 1. 選擇合適的規(guī)范來寫代碼 js 模塊化的發(fā)展大致有...

xiaolinbang 2019-08-26 13:22 評論0 收藏0
前端模塊化進(jìn)程，commonJS，AMD，CMD對比

摘要：是另一種模塊化方案，它與很類似，不同點在于推崇依賴前置提前執(zhí)行，推崇依賴就近延遲執(zhí)行。 commonJS規(guī)范隨著前端技術(shù)的不斷發(fā)展，項目越來越大，越來越不好管理，多人開發(fā)越來讓開發(fā)者頭疼，于是出現(xiàn)了命名空間，這沒有辦法的辦法，但是所有變量都是全局的話，管理非?；靵y，而且在Node 出現(xiàn)前，javascript 在服務(wù)器端基本沒有市場，經(jīng)過javascript 不斷努力，社區(qū)為 jav...

firim 2019-08-20 19:01 評論0 收藏0
【JS基礎(chǔ)】一文看懂前端模塊化規(guī)范

摘要：參考資料前端模塊化詳解完整版入門近一萬字的語法知識點補充徹底搞清楚中的和和詳解前言前端的模塊化之路經(jīng)歷了漫長的過程，想詳細(xì)了解的小伙伴可以看浪里行舟大神寫的前端模塊化詳解(完整版)，這里根據(jù)幾位大佬們寫的文章，將模塊化規(guī)范部分做了匯總和整理，希望讀完的小伙伴能有些收獲，也希望覺得有用的小伙伴可以點個贊，筆芯。什么是模塊將一個復(fù)雜的程序依據(jù)一定的規(guī)則(規(guī)范)封裝成幾個塊(文件)...

HelKyle 2019-08-23 17:09 評論0 收藏0
前端模塊化規(guī)范筆記

摘要：目前通行的的模板規(guī)范共有兩種和的模塊系統(tǒng)，是參照規(guī)范實現(xiàn)的即為服務(wù)器端模塊的規(guī)范。規(guī)范則是非同步加載模塊，允許指定回調(diào)函數(shù)。目前通行的Javascript的模板規(guī)范共有兩種：CommonJS 和 AMD commonjs nodejs的模塊系統(tǒng)，是參照commonjs規(guī)范實現(xiàn)的 commonjs即為服務(wù)器端模塊的規(guī)范。 commonjs的規(guī)范：根據(jù)commonjs規(guī)范，一個單獨的...

honmaple 2019-08-21 10:56 評論0 收藏0