基於angularJS和requireJS的前端架構

 一、概要描述

1.1、angularJS描述:angularJS是能夠用來構建WEB應用的，WEB應用中的一種端對端的完整解決方案。經過開發者呈現一個更高層次的抽象來簡化應用的開發。最適合的就是用它來構建一個CRUD應用，它提供了很是方便的且統一高效的解決方案，其數據綁定、基本模版標識符、表單驗證、路由、深度連接、組件重用、依賴注入、以及HTML標記等，最受歡迎的莫過於它的雙向數據綁定。

1.2、requireJS描述:requireJS是來解決傳統的頁面加載script標記操做，經過其初始化配置實現按需、並行、延時的載入js庫，聲明不一樣js文件之間的依賴關係，它是遵循前端AMD規範(異步模塊加載)。js代碼能夠以模塊化的方式進行組織(模塊化編程)。模塊化的意義就是經過代碼邏輯代表模塊之間的依賴關係和執行順序，按照模塊邏輯來分解代碼，起到配合mvc框架架構項目的做用。

1.3、整合：使用requireJS模塊化定義模塊質檢的依賴關係，打包不須要文件挨個對照，很方便。將script腳本從模版頁面中抽離出來，經過js當前模塊加載須要依賴的js模塊。按需加載。路由更加方便。

2、設計思想

2.1、思想：效仿後端MVC架構的基本思想，採用MVVM模式，脫離傳統的先後端耦合度太緊思想，採用先後端分離開發的方式，使其維護成本減小開發效率提升。讓前端開發人員只需去關注數據和頁面的交互，後端人員只需提供數據。

2.2、Rest：rest指的是一組架構約束條件和原則，知足這些約束條件和原則的應用程序或設計就是RestFul。Rest原則就是客戶端和服務器之間的交互在請求之間是無狀態的，還有一個重要的原則就是分層系統，表示組件沒法瞭解它與之交互的中間層之外的組件。經過將系統知識限制在單個層，能夠限制整個系統的複雜性，促進了底層的獨立性。rest是一個輕量級的webservice的架構風格，目的就是爲了下降開發的複雜性，提升系統的伸縮性。

2.3、原理：angularJS和requireJS集成、其運行原理步驟以下：

 

 

   一、初步加載初始頁面如index.html，首先加載樣式文件，再加載requireJS配置文件和源文件。

   二、經過requireJS配置的data-main主函數入口，加載angularJS和應用依賴的js源文件。

   三、經過ng.bootstrap(document, ['app'])手動初始化靜態頁面使其支持angularJS，ng.resumeBootstrap()延遲引導。

   四、經index.html頁面配置佈局指令,加載smart-device-detect、  smart-fast-click、smart-layout、smart-page-title處理頁面以及總體規劃佈局。

   五、經過index.html指定的屬性ui-view，經過angularJS的ui-router 插件來動態的切換路由。

   六、經過主函數入口main.js註冊的應用app.js來註冊整個應用程序的各個模塊，每一個模塊中定義各自的路由。

   七、定義一個全局依賴的模塊如includes.js文件，裝載全局應用程序用到的服務、指令以及組件。

   八、定義相應的攔截機處理http請求的異常統一操做，如是否登錄，是否擁有該操做權限等。

   九、由各自定義的路由去加載相應的模版，相應的controller處理數據提供到模版上顯示。

 

3、設計優缺點

3.1、優勢

3.1.1、angularJS是一種MVVM前端框架,這樣就能夠徹底脫離於後端程序的耦合度，能夠徹底脫穎而出，前端和後端能夠分開部署，分開開發。

3.1.二、angularJS的模塊化解決了代碼邏輯的耦合性，經過依賴注入使其耦合性很散，從而能夠很方便的拆分組合。

3.1.3、模版功能強大豐富，自帶豐富的angular指令，也能夠自定義指令。

3.1.4、前端的MVVM框架，包含了模版、數據雙向綁定，路由，模塊化，服務，過濾器，依賴注入等全部功能,前端處理方便。

3.1.5、模塊化,維護性高、靈活架構焦點分離、方便模塊間組合，分解，單個模塊功能調試，升級。

3.1.6、可測試性，能夠進行單元測試。

3.1.7、js/css、圖片文件壓縮合並，提升用戶體驗。

3.2、缺點

3.2.1、驗證功能錯誤信息顯示比較薄弱。

3.2.2、第三方庫一塊兒使用不是很便利，須要手動的包裝directive。

3.2.3、不適合於頻繁操做DOM。

3.2.4、版本升級兼容性不是很好，高版本未能很好的兼容低版本。

3.2.5、系統分層，調用鏈增加，模塊間通訊損耗性能。

四、架構實現

4.1、總體架構說明

            該架構採用javascript腳本技術實現，系統架構圖以下：

 

 

  

4.2、項目環境搭建

           前端徹底無需任何依賴工具，一個記事本編輯器便可。需配合後端java開發的 話只需按照java的開發環境創建一個web項目便可，將前端框架搭建好的webapp目錄拷貝到web項目的webRoot下面就能夠開始開發了。開發完成後採用grunt構建工具打包壓縮webapp的js文件。

4.3、技術應用

 

 

 

            一、angularJS、總體框架支持者，MVVM模式架構。

            二、requireJS、模塊化以及按需加載js文件。

            三、require-domready、採用回調的方式讓頁面加載完成後運行requireJS。

            四、bootstarp、採用bootstrap樣式庫。

            五、jquery、jquery文件庫，操做DOM元素。

            六、angular-route、路由控制，經過hash和history兩種方式實現。

            七、angular-couch-potato、配合ui-router來實現延時按模塊加載。

            八、angular-animate、實現動畫效果的angular插件。

            九、angular-sanitize、實現html淨化的angular插件。

            十、以上爲框架的主要源文件，還有大量的插件和組件以及自定義組件等。

4.4、框架搭建步驟

          一、新建一個webapp的文件夾，在其下面建好對應的文件夾，如api、app、plugin、styles、vendor和入口地址index.html。

         二、準備好angular和require以及所需的插件源文件，存放到vendor目錄 下面,最好按功能區分來設置不一樣的文件夾。經過config.js配置應用依賴的js文件。

         三、定義app所需的功能，創建相應的文件夾，如auth、components、dashboard、layout、modules。定義應用的主函數和應用文件，如main.js、app.js以及抽離的配置文件config.js、includes.js文件。

         四、開始編寫index.html，採用標準的html5規範，導入應用需用的樣式文件、定義script腳本加載requireJS文件。

         五、定義總體應用的佈局，經過angularJS的指令和路由操做。

         六、定義requireJS的配置文件，配置整個應用的依賴關係。

         七、編寫主函數入口文件main.js，加載應用程序，啓動angular。

         八、編寫應用主文件app.js，定義應用的模塊，加載模塊。配置攔截機。

         九、配置應用的全局依賴includes.js。

         十、規劃總體應用的模塊、佈局以及相關組件和互相的依賴關係。

         十一、攔截機驗證用戶信息，權限信息。

             具體目錄說明如圖：

 

 

 

 

4.5、模塊開發步驟

      一、規劃模塊的設計，定義先後端套接的數據結構。

      二、在app的modules目錄下面定義一個模塊如system,而後到system定義一個module.js，定義模塊的路由，啓動該模塊。

      三、定義相應的controller、views、services、directives以及filters。  

      四、到system模塊定義views須要的模版文件。

      五、開發system解析模版的controller，後端提供須要的json接口的數據。

      六、如需用到自定義指令和數據過濾器到相應的文件夾下面定義開發。在module.js文件的路由中指定其依賴的指令和過濾器。

     七、先後端開始數據對接，權限驗證。

 

五、構建和壓縮

5.一、Grunt構建工具

5.1.一、簡介：Grunt是一個基於任務的JavaScript應用的命令行的自動化的構建工具。它能夠用來作壓縮、編譯、單元測試、代碼檢查以及打包發佈的任務。更智能、更省事，不需重複的進行，特別是大項目中，只需配置好要作的任務便可。

5.1.二、如何構建：Grunt是要配合Node.js一塊兒使用，具體步驟以下：

   一、下載nodeJS Server，安裝到本地電腦。

   二、安裝grunt的命令行界面grunt-cli，sudo npm install grunt-cli -g。

   三、在應用中創建一個grunt的文件夾，而且配置好一份package.json和Gruntfile文件。

   四、安裝grunt模塊插件，經常使用模塊有：npm install grunt --save-dev

      檢查js語法 ： npm install grunt-contrib-jshint --save-dev

      合併文件 ：    npm install grunt-contrib-concat --save-dev

      壓縮文件 ：    npm install grunt-contrib-uglify --save-dev

      監控文件 ：    npm install grunt-contrib-watch --save-dev

      刪除文件 ：    npm install grunt-contrib-clean --save-dev

      複製文件 ：    npm install grunt-contril-copy --save-dev

      圖像壓縮 ：    npm insatll grunt-contril-imagemin --save-dev

      壓縮合並CSS ： npm install grunt-contril-cssmin --save-dev

    save-dev :自動將其添加到devDependencies配置段中，遵循tildeversion range格式。

   五、到應用工程目錄下的grunt目錄，運行grunt命令。

6、注意事項

6.一、各模塊注入某個服務或某塊插件的時候，要注意是否配置了其對應的源文件， 不然會報注入失敗。

6.二、angular插件服務的注入名稱到各個源文件中能夠找到，如源文件中  angular.module(‘xxx’)，其中xxx就是服務名稱。