Angular2的模塊架構淺談

来源:http://www.cnblogs.com/yitim/archive/2017/02/20/angular2-study-module-framework.html
-Advertisement-
Play Games

引言angular2相比1引入了更完善的模塊系統,回憶ng1的應用中通常在頁面的html標簽或body標簽中添加ng-app節點,值為應用的模塊名,整個應用都將圍繞這個模塊來展開,到了ng2,模塊概念完善了很多,並且再不是由一個模塊來統治整個應用(當然非要這麼做也可以),本文就將敘述一番ng2中的模 ...


引言
angular2相比1引入了更完善的模塊系統,回憶ng1的應用中通常在頁面的html標簽或body標簽中添加ng-app節點,值為應用的模塊名,整個應用都將圍繞這個模塊來展開,到了ng2,模塊概念完善了很多,並且再不是由一個模塊來統治整個應用(當然非要這麼做也可以),本文就將敘述一番ng2中的模塊體系,以及如何統籌ng2模塊最終組合成一個完整的應用。

 


一、根模塊、子模塊與惰性載入


先說根模塊。一個ng2應用至少要有一個根模塊,包含ng2自帶的BrowserModule,並聲明為引導模塊,在應用啟動時將從此模塊展開。
隨著應用的擴大,所有的事情都在一個模塊中完成難免會變亂(某種程度上看ng1應用就是這麼做的,並且細分了控制器來拆分應用,這其實浪費了最頂層模塊的意義),所以自然而然能想到,可以將系統分為多個模塊,每個模塊都只做各自的事情而互不幹擾,所以進一步的思路就是,用來根模塊來引導程式並管理所有子模塊(通過路由定向以及為它們提供全局配置與服務實例),所有的具體業務就交給各個子模塊來完成。
然後會有一個問題,那就是既然系統已經被這麼多個子模塊瓜分了,並且這些子模塊也不可能同時全部都會被使用,也就是只有其被激活時才有用,那仍然在應用引導時從根模塊載入所有子模塊必然會導致性能的浪費以及拖慢執行速度。此時惰性載入模塊就派上用場了,將一個子模塊定義為惰性載入後,只有在通過路由激活此模塊時才會開始載入此模塊(並且ng2甚至支持非同步預載入,即後臺預載入懶載入的模塊,這樣當懶載入模塊需要被載入時其實其已經載入完成了,又加快了響應速度)。

 


二、除了模塊之外


每個模塊都有自己的事情要做,通常包括:

  1. 引入其他模塊                                 這個在第三部分細說
  2. 聲明模塊包含的組件、指令與管道        所有的組件、指令或管道都必須依附於某個模塊,並只在此模塊中可用。
  3. 定義模塊提供的服務              服務也有自己所屬的模塊,但由於服務是全局單例的,所以只要在一個模塊中提供之後,全局都通用。註:若多個模塊同時提供了服務(通常發生在模塊間混亂的import時),一般情況下ng2能識別並只保留一個實例,但在惰性載入的模塊中則會發生不可預計的錯誤,所以一定要避免。
  4. 定義模塊將導出的組件、指令與管道(還可以是此模塊引入的模塊)        與(1配合使用,同樣在第三部分細說。

 

三、模塊的關聯


模塊之間一定要有共用或繼承資源的方式,不然的話每個子模塊都必須實現可能用到的全部功能。

比如一個消息彈窗組件,不可能每個子模塊都自己聲明一個消息組件然後使用,這樣的維護壓力很大且代碼嚴重浪費。

此時就用到了模塊的引入和導出——
模塊A可以引入另一個模塊B,然後A就可以使用B中導出的組件、管道和指令。

 

當我們要使用系統指令(如ngIf、ngFor等)時,也必須引入系統模塊,有一個巧妙的辦法就是實現上圖這樣的共用模塊,在引入系統模塊並導出的同時再導出自定義的其他指令、組件或管道。然後所有引入了此共用模塊的子模塊就能使用這些系統指令和共用指令了。


有一個基礎的問題是服務需不需要導出,答案是否定的。服務不需要導出,因為服務是全局單例的,一旦被初始化,就已經全局通用了,相反如果重覆的導入提供了同一服務的模塊就可能發生問題:
B提供服務B_S,A導入了B,C也導入了B。這種情況下ng2會找到兩處B_S的提供,但ng2尚能夠將其保持在一個實例B_S。但若模塊C為惰性載入的模塊,在C被創建時,其實會重新初始化一個實例B_S,從C跳轉回到A時,又會創建一個B_S,來回每次跳轉都是如此,結局就會變得混亂不堪。
對於服務更好的做法是寫一個核心模塊,專門提供全局服務,保證此模塊只會被根模塊引用一次,然後所有的子模塊就都已經可以使用這些全局服務了。

 

 

四、ng2模塊體系


最後給出一套ng2項目構建的體系,這也是總結歸納了ng2官網的推薦得出的ng2項目的模塊體系。

 


總體思路就是:


> 1.根模塊負責全局的路由。


> 2.核心模塊負責全局服務,也可以定義一些只在根模塊中使用的組件等,並只能由根模塊引入一次,不再導出。


> 3.共用模塊不做服務的提供,而是定義全局共用的組件等,以及幫助子模塊導入系統模塊,讓子模塊只需要導入此共用模塊就夠了。


> 4.子模塊內部可以細分自己的子路由到具體的子組件,以及提供自己的服務等。


> 5.除了頁面入口模塊(即除了根模塊外的具體業務模塊)之外的其他子模塊均考慮寫成惰性載入的模塊,以提升頁面引導的速度減少性能浪費。


> 6.當需要一個比較通用的全局服務時,可以將其加入CoreModule,也可以再創建一個僅被根模塊引入的特性模塊。進一步的,甚至可以將此模塊發佈到npm,這就需要更強的編碼能力和技術積累了。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 最近在做一個swing小項目,其中需要把存儲在硬碟中的圖片文件顯示出來,總結瞭如下方法: 1. Graphics g = getGraphics();String name = "E:/CapabilityModel/out.gif";Image img = Toolkit.getDefaultTo ...
  • 在上一篇日誌中將hibernate的會話工廠sessionFactory註入到了spring的容器中,但這樣還不夠,因為hibernate的增刪改查是要使用事務機制的, 所以還要在spring中配置事務管理,將hibernate管理事物的權利交給spring,這樣,在代碼中就無需手動管理事務了。 1 ...
  • 本文為學習筆記,學習課程為慕課網Java入門第三季中的集合框架部分,若需要研究文中的代碼,可前往下載。http://www.imooc.com/learn/110 1. List(Collection子介面) 1.1 實例化 List list = new ArrayList();  &e ...
  • 如何讓背景圖片拉伸填充,這個問題聽起來似乎很簡單。但是很遺憾的告訴大家。不是我們想的那麼簡單。 比如一個容器(body,div,span)中設定一個背景。這個背景的長寬值在css2.1之前是不能被修改的。 所以實際的結果是只能重覆顯示,所以出現了repeat,repeat-x,repeat-y,no ...
  • 【常用麵包屑】9種不同的麵包屑和分散式多步驟導航 實例代碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" ...
  • 1. 在layer彈窗組件中 如果使用了flash播放器,全屏是正常的 但若使用了HTML5的播放器,全屏失效 舉個慄子 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script ...
  • 前言: 昨天寫了篇關於JavaScript的,今天寫篇Dom的(插入4個實例),寫完之後感覺知識點還不少~ 內容當然會用到【前端】:JavaScript的知識。下篇博客會寫關於jQuery~~ 一、DOM介紹 文檔對象模型(Document Object Model,DOM)是一種用於HTML和XM ...
  • 如下場景是在window下的操作。 在使用node的時候有個node_modules文件夾很大,一般情況下不想提交,忽略的辦法如: 1、在該倉庫目錄下創建一個.gitignore文件,用編輯器輸入:/node_modules,之後git push 的時候就會忽略這個文件夾 命令行進入該倉庫:touc ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...