javascript
《AngularJS深度剖析与最佳实践》一2.2 模块
本節(jié)書(shū)摘來(lái)自華章出版社《AngularJS深度剖析與最佳實(shí)踐》一書(shū)中的第2章,第2.2節(jié),作者 雪狼 破狼 彭洪偉,更多章節(jié)內(nèi)容可以訪問(wèn)云棲社區(qū)“華章計(jì)算機(jī)”公眾號(hào)查看
2.2 模塊
與其他現(xiàn)代語(yǔ)言不同,當(dāng)前版本的JavaScript(ECMAScript 5)并沒(méi)有內(nèi)置模塊化語(yǔ)法。但是,隨著程序規(guī)模越來(lái)越大,模塊化的需求越來(lái)越重要,于是出現(xiàn)了require.js等第三方庫(kù),試圖用庫(kù)來(lái)彌補(bǔ)語(yǔ)言的不足。Angular并不依賴require.js等第三方庫(kù),而是自己實(shí)現(xiàn)了模塊化系統(tǒng),這個(gè)系統(tǒng)的核心就是模塊(module)。
我們先來(lái)回顧一下“模塊”的概念,然后自然就明白Angular中的module是怎么回事了。
所謂模塊是指把相關(guān)的一組編程元素(如類(lèi)、函數(shù)、變量等)組織到同一個(gè)發(fā)布包中。這些編程元素之間緊密協(xié)作,隱藏實(shí)現(xiàn)細(xì)節(jié),只通過(guò)公開(kāi)的接口與其他模塊合作。
模塊是一個(gè)粒度適中的復(fù)用單位,也是最常見(jiàn)的復(fù)用形式。比如我們常用的第三方庫(kù)往往對(duì)外公開(kāi)好幾個(gè)類(lèi),使用者只要關(guān)注其公開(kāi)接口就可以了,不用了解其實(shí)現(xiàn)細(xì)節(jié),這種第三方庫(kù)就是一個(gè)“模塊”。
Angular的module也是如此。Angular中的編程元素包括Service、Directive、Filter、Controller等,它們只有通過(guò)模塊進(jìn)行“導(dǎo)出”才能供別人使用。如:angular.module('com.ngnice.app').service('ui', function() {...});語(yǔ)句的作用是:先取出一個(gè)名為com.ngnice.app的模塊,然后把function() {...}作為一個(gè)回調(diào)函數(shù)以u(píng)i作為名字注冊(cè)進(jìn)去。這樣,別人就可以隨時(shí)通過(guò)ui這個(gè)名字把它從com.ngnice.app模塊中取出來(lái)。
所以,我們可以簡(jiǎn)單地把模塊看做一個(gè)注冊(cè)表(registry),它保存著名字和編程元素的對(duì)照表,既可以存入,也可以取出。
一個(gè)程序往往不會(huì)只含有一個(gè)模塊,這些模塊需要互相協(xié)作,這就導(dǎo)致了模塊之間具有依賴關(guān)系,比如有一個(gè)可復(fù)用模塊,名叫common,而我們的應(yīng)用想要使用其中名叫authHandler的service。那么我們就要先聲明這種依賴關(guān)系:angular.module('com.ngnice.app', ['common']),這樣,Angular就知道該去common模塊中查找這個(gè)名叫authHandler的Service。如果沒(méi)有聲明這種依賴關(guān)系,那么就算引入了它所在的JavaScript文件,也照樣是無(wú)法找到的,這是新手很容易踩坑的地方,請(qǐng)?zhí)貏e注意。同時(shí),Angular還可以自動(dòng)檢測(cè)出循環(huán)依賴,以免出現(xiàn)無(wú)限遞歸。
注意,我們剛才調(diào)用了兩次module函數(shù):angular.module('com.ngnice.app')和angular.module('com.ngnice.app', ['common']),前者可不是后者的簡(jiǎn)寫(xiě)形式,而是具有完全不同的含義:前者的作用是引用一個(gè)模塊,也就是說(shuō)查找一個(gè)名叫app的模塊,并返回其引用,如果模塊不存在,則會(huì)觸發(fā)一個(gè)異常[$injector:nomod] Module 'com.ngnice.app' is not available...;而后者的作用是創(chuàng)建一個(gè)模塊,并且聲明這個(gè)模塊需要依賴一個(gè)名為common的模塊,第二個(gè)參數(shù)是個(gè)數(shù)組,所以還可以聲明依賴更多個(gè)模塊。
模塊依賴關(guān)系是一棵樹(shù),這就意味著:凡是依賴了app模塊的更高級(jí)模塊,也會(huì)自動(dòng)依賴app所依賴的common等模塊。
總結(jié)
以上是生活随笔為你收集整理的《AngularJS深度剖析与最佳实践》一2.2 模块的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 移动端H5页面高清多屏适配方案
- 下一篇: 《C++入门经典(第6版)》——1.3