Javascript模塊化編程(二):AMD規范

  這個系列的第一部分介紹了Javascript模塊的基本寫法,今天介紹如何規范地使用模塊。

?

七、模塊的規范

  先想一想,為什么模塊很重要?

  因為有了模塊,我們就可以更方便地使用別人的代碼,想要什么功能,就加載什么模塊。

  但是,這樣做有一個前提,那就是大家必須以同樣的方式編寫模塊,否則你有你的寫法,我有我的寫法,豈不是亂了套!考慮到Javascript模塊現在還沒有官方規范,這一點就更重要了。

  目前,通行的Javascript模塊規范共有兩種:CommonJS和AMD。我主要介紹AMD,但是要先從CommonJS講起。

八、CommonJS

  2009年,美國程序員Ryan Dahl創造了node.js項目,將javascript語言用于服務器端編程。

  這標志"Javascript模塊化編程"正式誕生。因為老實說,在瀏覽器環境下,沒有模塊也不是特別大的問題,畢竟網頁程序的復雜性有限;但是在服務器端,一定要有模塊,與操作系統和其他應用程序互動,否則根本沒法編程。

  node.js的模塊系統,就是參照CommonJS規范實現的。在CommonJS中,有一個全局性方法require(),用于加載模塊。假定有一個數學模塊math.js,就可以像下面這樣加載。

 var math = require('math');

  然后,就可以調用模塊提供的方法:

  var math = require('math');math.add(2,3); // 5

  因為這個系列主要針對瀏覽器編程,不涉及node.js,所以對CommonJS就不多做介紹了。我們在這里只要知道,require()用于加載模塊就行了。

九、瀏覽器環境

  有了服務器端模塊以后,很自然地,大家就想要客戶端模塊。而且最好兩者能夠兼容,一個模塊不用修改,在服務器和瀏覽器都可以運行。

  但是,由于一個重大的局限,使得CommonJS規范不適用于瀏覽器環境。還是上一節的代碼,如果在瀏覽器中運行,會有一個很大的問題,你能看出來嗎?

  var math = require('math');math.add(2, 3);

  

  第二行math.add(2, 3),在第一行require('math')之后運行,因此必須等math.js加載完成。也就是說,如果加載時間很長,整個應用就會停在那里等。

  這對服務器端不是一個問題,因為所有的模塊都存放在本地硬盤,可以同步加載完成,等待時間就是硬盤的讀取時間。但是,對于瀏覽器,這卻是一個大問題,因為模塊都放在服務器端,等待時間取決于網速的快慢,可能要等很長時間,瀏覽器處于"假死"狀態。

  因此,瀏覽器端的模塊,不能采用"同步加載"(synchronous),只能采用"異步加載"(asynchronous)。這就是AMD規范誕生的背景。

十、AMD

  AMD是"Asynchronous Module Definition"的縮寫,意思就是"異步模塊定義"。它采用異步方式加載模塊,模塊的加載不影響它后面語句的運行。所有依賴這個模塊的語句,都定義在一個回調函數中,等到加載完成之后,這個回調函數才會運行。

  AMD也采用require()語句加載模塊,但是不同于CommonJS,它要求兩個參數:

require([module], callback);

  第一個參數[module],是一個數組,里面的成員就是要加載的模塊;第二個參數callback,則是加載成功之后的回調函數。如果將前面的代碼改寫成AMD形式,就是下面這樣:

  require(['math'], function (math) {math.add(2, 3);});

  

  math.add()與math模塊加載不是同步的,瀏覽器不會發生假死。所以很顯然,AMD比較適合瀏覽器環境。

  目前,主要有兩個Javascript庫實現了AMD規范:require.js和curl.js。本系列的第三部分,將通過介紹require.js,進一步講解AMD的用法,以及如何將模塊化編程投入實戰。

轉載于:https://www.cnblogs.com/yanxinhua/p/6684279.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/541634.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/541634.shtml
英文地址,請注明出處:http://en.pswp.cn/news/541634.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

html側滑菜單mui,mui側滑菜單點擊含有mui-action-menu類的控件無法實現側滑

.mui-action-menu標題欄 菜單按鈕 指定href"#id"顯示與隱藏側滑菜單html:側滑菜單列表側滑菜單列表2側滑菜單列表3標題具體內容href:https://badfl.gitbooks.io/mui/content/mui-action-menu.htmlAndroid 使用代碼主動去調用控件的點擊事件(模擬人手去觸摸控件)使用代…

hanlp 訓練模型_LTP 4.0!單模型完成6項自然語言處理任務

來源|哈工大SCIR語言技術平臺(Language Technology Platform, LTP)是哈工大社會計算與信息檢索研究中心(HIT-SCIR)歷時多年研發的一整套高效、高精度的中文自然語言處理開源基礎技術平臺。該平臺集詞法分析(分詞、詞性…

typescript 學習

typescript將在不久的將來從前端大一統的趨勢中脫穎而出成為主流編譯器。學習ts對前端開發人員來說是不可或缺的。同時,也要抓緊學習es2015/6/7。ts和es6并不是對立的。而是相輔相成的。ts的競爭和打擊對象實質上是babel…… 官方資料 # 官方地址: https…

計算機中央處理器cpu_中央處理器(CPU)| 計算機科學組織

計算機中央處理器cpu中央處理器(CPU) (Central Processing Unit (CPU)) The CPU is the brain of the computer system. It works as an administrator of a system. CPU是計算機系統的大腦。 它以系統管理員的身份工作。 All the operations within the system are supervised…

計算機應用基礎專2020春,計算機應用基礎(專)(專,2020春)(20200831130023).pdf

計算機應用基礎(專)(專, 2020 春)使用 " 格式刷”按鈕,可以進行 ___________操作。選擇一項:a. 復制文本的格式b. 刪除文本c. 復制文本d. 保持文本你的回答正確正確答案是:復制文本的格式在 Word 的文檔中插入復雜的數學公式…

computed set 自定義參數_深入理解vmodel之自定義組件用法

根據上一篇《深入理解 v-model 之表單用法》基本對 v-model 有了比較深的理解&#xff0c;接下來我們看看它如何在自定義組件中使用。首先&#xff0c;我們知道下面兩個用法等價的&#xff1a;<input v-model"msg" /><input :value"msg" input&qu…

01json轉字符串

/** * json轉字符串聲明 */ (NSString *)jsonToString:(NSDictionary *)dic; /** * json轉字符串實現 */ (NSString *)jsonToString:(NSDictionary *)dic { if(!dic){ return nil; } NSData *jsonData [NSJSONSerialization dataWithJSONObject:dic options:NSJSONWriting…

AYUSH的完整形式是什么?

AYUSH&#xff1a;阿育吠陀&#xff0c;瑜伽和自然療法&#xff0c;烏納尼&#xff0c;悉達多和順勢療法 (AYUSH: Ayurvedic, Yoga and Naturopathy, Unani, Siddha and Homeopathy) AYUSH is an abbreviation of Ayurvedic, Yoga and Naturopathy, Unani, Siddha, and Homeopa…

大班科學電子計算機,計算器教案

計算器的認識和簡單應用教學內容&#xff1a;義務教育六年制小學第九冊第二單元第42頁。教學目標&#xff1a;1、通過學生自主探究&#xff0c;掌握計算器的使用方法&#xff0c;并能夠用計算器進行簡單的計算。2、借助計算器解決生活中的數學問題、探索數學規律&#xff0c;體…

arraylist能否接收強轉類型_ArrayList 源碼解析

點擊上方"IT牧場"&#xff0c;選擇"設為星標"技術干貨每日送達&#xff01;前言 JDK源碼解析系列文章&#xff0c;都是基于JDK8分析的&#xff0c;雖然JDK14已經出來&#xff0c;但是JDK8我還不會&#xff0c;我…類圖 實現了RandomAccess接口&#xff0c;…

exit c+_C / C ++中的exit(0)vs exit(1)與示例

exit cexit() is a library function in C/C programming language, it is used to terminate the calling process (function) immediately i.e. we can say it is used for the normal program termination and also perform the several cleanup steps. exit()是C / C 編程語…

校園計算機網絡系統,校園計算機網絡系統

一、校園網的基本概念基本功能&#xff1a;數據交換、資源共享&#xff0c;這里所指的數據包括各種信息&#xff0c;基本組成和結構&#xff1a;基本網絡由網絡網絡的分類&#xff1a;有多種分類方法&#xff0c;按規模可分為局域網、區域網、&127;廣域網。局域網服務范圍一…

mc有什么紅石機器人_我的世界10月考試!來測測你的MC成績吧~

考試規則&#xff1a;本次考試為閉卷考試&#xff0c;考生需要在30分鐘內完成試卷。試卷總分為100分&#xff0c;其中包括單項選擇題50分&#xff0c;多項選擇題20分&#xff0c;判斷題30分。考試內容包括《我的世界》手游1.11.0及以上版本在不添加任何模組的情況下的所有游戲內…

130、 Android OkHttp完全解析(轉載)

完全解析&#xff1a;http://blog.csdn.net/lmj623565791/article/details/47911083 從原理角度解析http文件上傳 http://blog.csdn.net/lmj623565791/article/details/23781773 https://github.com/hongyangAndroid/okhttputils

json轉string示例_C.示例中的String.Copy()方法

json轉string示例C&#xff03;String.Copy()方法 (C# String.Copy() Method) String.Copy() method is used to copy a string to new string object, it returns a new instance of String with the same value as given string. String.Copy()方法用于將字符串復制到新的字符…

自定義分頁 html,MVC 自定義HtmlHelper幫助類型之分頁

方法一&#xff1a;在項目中增加App_Code文件夾&#xff0c;新增一個MyHtmlper.cshtml視圖文件寫入代碼&#xff1a;helper Pagger(int pageIndex, int pageCount){for (int i 1; i < pageCount; i){if (i ! pageIndex){(i)}else{i}}}新增一個HomeControllerpublic class H…

vue 對象繼承_Vue2.0中組件的繼承與擴展是什么

Vue2.0中組件的繼承與擴展是什么發布時間&#xff1a;2020-12-07 14:04:09來源&#xff1a;億速云閱讀&#xff1a;100作者&#xff1a;小新小編給大家分享一下Vue2.0中組件的繼承與擴展是什么&#xff0c;相信大部分人都還不怎么了解&#xff0c;因此分享這篇文章給大家參考一…

stack示例_C.示例中的Stack.Clone()方法

stack示例C&#xff03;Stack.Clone()方法 (C# Stack.Clone() method) Stack.Clone() method is used to create a shallow copy of the stack. Stack.Clone()方法用于創建堆棧的淺表副本。 Syntax: 句法&#xff1a; Object Stack.Clone();Parameters: None 參數&#xff1a…

簡述計算機圖形的圖形應用主要有哪些,5計算機圖形學考試簡答題復習.doc

5計算機圖形學考試簡答題復習計算機圖形學考試簡答題復習1、簡述計算機動畫的概念&#xff0c;它經歷了哪幾個階段的發展&#xff1f;(2分)計算機動畫是指采用圖形與圖像的處理技術&#xff0c;借助于編程或動畫制作軟件生成一系列的景物畫面&#xff0c;其中當前幀是前一幀的部…

在圖片中選定任意凸多邊形制作掩膜程序MATLAB

function S get_convex_S(C,vx,vy) %該函數實現的功能為指定圖像中多邊形的頂點&#xff0c;返回屬于該凸多邊形中的所有像素點 %xv&#xff0c;yv為頂點坐標按照順時針或者逆時針。vx(1) xv(end); yv(1) yv(end) %輸入的C是結構&#xff0c;vx vy是數組存的是頂點坐標。 %輸…