摘要：可發(fā)布這一部分會在下一章管理對子項(xiàng)目引用中詳細(xì)說明?？偨Y(jié)本文總結(jié)了多項(xiàng)目共享子項(xiàng)目工程化方面的一些實(shí)踐，并不涉及到復(fù)雜的代碼，主要涉及到的概念，使用進(jìn)行包管理，使用作為自動化工具等工程化的知識。

公司的產(chǎn)品線涵蓋多個(gè)產(chǎn)品，這些產(chǎn)品中會有一些相同的功能，如登錄，認(rèn)證等，為了保持這些功能在各個(gè)產(chǎn)品中的一致性，我們在各個(gè)產(chǎn)品中維護(hù)一份相同的代碼。這帶來了很大的不便：當(dāng)出現(xiàn)新的需求時(shí)，不得不同時(shí)在多個(gè)產(chǎn)品中更改代碼，使它們保持一致。為了解決這個(gè)問題，我們可以將這些公共部分抽取出來放在一個(gè)多帶帶的子項(xiàng)目中，其他項(xiàng)目只是引用該子項(xiàng)目，當(dāng)出現(xiàn)新的需求時(shí)，我們只要改變該子項(xiàng)目即可。

在這個(gè)思路的基礎(chǔ)上，有兩個(gè)問題需要解決:

以何種方式維護(hù)子項(xiàng)目

如何維護(hù)產(chǎn)品對子項(xiàng)目的引用

我們先從一個(gè)正常的angular項(xiàng)目說起。例如，如果你想在你的項(xiàng)目中引入Angular UI Bootstrap組件，通常你會怎么做？

在bower.json中添加所需要的dependencies:

{
  "name": "your project",
  "version": "0.0.1",
  "dependencies": {
    "angularJS": "1.4.x",
    "angular-animate": "1.4.x",
    ....
  }
}

使用bower install命令，安裝dependencies，并引用:

在你的項(xiàng)目中聲明dependencies：

angular.module("myModule", ["ui.bootstrap"]);

通過以上的例子我們可以得到一定的啟示:

子項(xiàng)目最終應(yīng)該以angular module的形式出現(xiàn)

使用bower去維護(hù)對包的引用

可配置，當(dāng)使用該模塊時(shí)可以對該模塊傳遞參數(shù)

可構(gòu)建，將分離的多個(gè)文件構(gòu)建成一個(gè)文件

可測試，保證模塊的魯棒性

可發(fā)布，供其他項(xiàng)目引用

包含完整的事例代碼，供其他人參考

我們在代碼層面上可以通過provider來實(shí)現(xiàn)。例如：

angular.module("myModule")
    .provider("myProvider", function() {
        var name = null;
        
        // setName can be called duaring module init
        this.setName = function (newName) {
            name = newName;
        }; 
        
        return {
            handleName : function() {
            // do something with name
            }
        };
    })

在另一個(gè)module中引入該module時(shí)，我們可以改變該module中name的值:

angular.module("anotherModule", ["myModule"])
    .config(function(myProviderProvider){
        myProviderProvider.setName("name");
    });

provider是模塊之間交流的橋梁，它可以使模塊達(dá)到可配置。

在angular中，一個(gè)模塊的本質(zhì)就是一個(gè)命名空間，在該命名空間中我們可以增加provider, directive, factory, constant等，它實(shí)際上就是一個(gè)功能的集合。聲明形式通常如下:

angular.module("myModule", [dependencies])
    .directive("myDirective", ...)
    .factory("myFactory", ...);
    ...

directive是angular中最重要的概念，它是angular 1.x中實(shí)現(xiàn)組件化的基礎(chǔ)。factory通常是為了完成一些輔助功能，如與后端進(jìn)行數(shù)據(jù)交互或提供一些util方法等。但是為了代碼的可維護(hù)性，通常它們會將它們放在一個(gè)多帶帶的文件中, 如:

file1.js為模塊的聲明文件:

angular.module("myModule", [dependencies]);

file2.js為一個(gè)directive聲明文件:

angular.module("myModule")
    .directive("mydirective", function() {
        ...
    });

file2.js為一個(gè)factory的聲明文件:

angular.module("myModule")
    .factory("myfactory", function() {
        ...
    });

但是在發(fā)布版本中，我們希望所有的這些文件合并在同一個(gè)js文件中，這就是構(gòu)建的過程。我們可以使用gulp構(gòu)建工具實(shí)現(xiàn)該目的。directive中有時(shí)會包含模板html文件，我們將html文件通過angular的$templateCache服務(wù)也打包進(jìn)js中。

通常前端的測試分為兩種: 單元測試和集成測試(又叫做E2E測試)。單元測試的目的是為了測試一個(gè)接口或者功能是否能得到預(yù)期的結(jié)果，測試對象通常為一個(gè)函數(shù)，但是前端最大的問題就是瀏覽器的兼容問題，可能在一個(gè)瀏覽器中能跑的代碼在另一個(gè)瀏覽器中出現(xiàn)錯(cuò)誤，所以我們需要在多個(gè)瀏覽器中去進(jìn)行測試，我們可以使用gulp搭配測試框架karma去簡單的完成在多瀏覽器下的單元測試。集成測試是站在用戶的角度上去執(zhí)行各種操作，看產(chǎn)品是否穩(wěn)定等。由于該模塊中只是出現(xiàn)一些簡單的UI組件，并非一個(gè)完整的產(chǎn)品，所以并沒有做相關(guān)的集成測試。

這一部分會在下一章bower管理對子項(xiàng)目引用中詳細(xì)說明。

由于模塊會在多個(gè)項(xiàng)目中被不同的人使用，對于這些人最快熟悉該模塊的方法就是通過一些demo去了解，所以每個(gè)模塊中應(yīng)該包含一定的事例代碼供模塊的使用者參考。

目錄結(jié)構(gòu)如下:

javascript-modules
    - module1
        - lib
            - myproject.module.js
            - component
                - mydirective.directive.js
                - template.html
                - templateStyle.scss
            - myfactory.factory.js
            - myprovider.provider.js
            - ....spec.js
            ...
        - release
            - myproject.bundle.js
            - myproject.bundle.css
        - example
            - example1
            - example2
    - gulp
        - task1.js
        - task2.js
        ...
    - gulpfile.js
    - karma.js
    - package.json

說明:

lib: 源代碼目錄

release: 發(fā)布版本目錄(只包括js和css文件)

example: 事例代碼目錄，具體的事例代碼目錄下包含index.html文件，在該html文件中引入release版本的js和css，然后啟動http-server命令打開本地服務(wù)器進(jìn)行測試

gulp: gulp task目錄

gulpfile.js: 用于執(zhí)行g(shù)ulp目錄中的各種task

karma.js: karma配置文件

package.json: 配置文件

gulp中應(yīng)包含以下task:

build: 合并所有的html文件到$templateCache中，合并所有的js文件，將scss等編譯成css

test: 執(zhí)行l(wèi)ib下的所有測試文件

release: 將打包后的最終代碼上傳到內(nèi)部包管理服務(wù)器等

PS: 由于歷史遺留問題，angular中component和directive之間的界限模糊不清。指令應(yīng)只封裝DOM操作，而組件代表一個(gè)自給自足的獨(dú)立單元 - 有自己的視圖和數(shù)據(jù)邏輯。在angular1.5中增加了component的概念，我們應(yīng)該更加清晰的區(qū)別component和directive，在使用時(shí)directive只應(yīng)該執(zhí)行封裝DOM的操作，而不應(yīng)該去創(chuàng)造DOM節(jié)點(diǎn)，也就是說directive中的restrict應(yīng)設(shè)置為A。

模塊版本發(fā)布應(yīng)遵循semver(語義化版本)原則。
版本格式為:主版本號.次版本號.修訂號(MAJOR.MINOR.PATCH)。版本號遞增規(guī)則如下：

主版本號：當(dāng)你做了不兼容的API修改，

次版本號：當(dāng)你做了向下兼容的功能性新增，

修訂號：當(dāng)你做了向下兼容的問題修正。
版本號的管理應(yīng)該包含在gulp release任務(wù)中。

通常我們希望我們開發(fā)出的模塊只是對企業(yè)內(nèi)部可見，對外部不可見。這就要求我們不能使用平常的方式去使用bower進(jìn)行包的發(fā)布和依賴管理。在借鑒了后端的一些包管理思路后，我們將該包發(fā)布在企業(yè)內(nèi)部的私有包管理服務(wù)器上，然后在bower.json中通過以下方式來引入包:

{
    "module":"address/module-version.zip"
}

每次當(dāng)有新的版本的包發(fā)布時(shí)，我們只需要在bower.json中改變version號，然后使用bower install重新安裝新版本的包即可達(dá)到更新包的目的。

本文總結(jié)了angular 1.x多項(xiàng)目共享子項(xiàng)目工程化方面的一些實(shí)踐，并不涉及到復(fù)雜的代碼，主要涉及到angular module的概念，使用bower進(jìn)行包管理，使用gulp作為自動化工具等工程化的知識。
上述方法也存在一定的問題，每次版本更新時(shí)，都要在引用它的各個(gè)項(xiàng)目中更新版本號并使用bower install重新安裝該模塊。
一種更好的思路是使用git submodule/subtree，由于并沒有在這方面的實(shí)踐經(jīng)驗(yàn)，所以不再贅述。
本文主要是針對angular1.x版本的實(shí)踐。由于當(dāng)前angular2已經(jīng)發(fā)布，它提供了強(qiáng)大的組件功能，所以針對angular2會有更好的組件化方式實(shí)現(xiàn)。