摘要：融合思路解決這個問題，有兩種思路。給我們帶來了以下新成員模塊服務(wù)指令篩選器和控制器。與其他類是通過類的名稱區(qū)分的，名稱統(tǒng)一以結(jié)尾。這種處理方式是一種折中方案，如果想要更加規(guī)范優(yōu)雅的話，建議使用自定義標(biāo)簽來解決。

字?jǐn)?shù)：1568

閱讀時間：10分鐘

??前面，我們以一個實戰(zhàn)案例來詳細說明了如何在實際開發(fā)中使用JSDuck工具。但是，并不是所有的時候，代碼的封裝方式都受我們控制的。例如，如果我們使用了現(xiàn)在的幾個主流框架AngularJS、React或者Vue的時候，代碼的封裝方式就必須按照框架定義的方式來構(gòu)建。當(dāng)我們的代碼中出現(xiàn)了模塊、控制器、服務(wù)、指令等JSDuck完全不認(rèn)識的組成部分時，我們該如何使用JSDuck來正確描述我們的代碼呢？

??那么，下面，筆者就以 AngularJS 為例，來說一說筆者自己的解決方案。

??解決這個問題，有兩種思路。第一種，可以將JSDuck不識別的代碼部分映射到工具識別的標(biāo)簽來進行描述。第二種，既然沒有現(xiàn)成的標(biāo)簽來描述這些新成員，那我們可以自定義一套標(biāo)簽來描述它們。

??第一種方法更方便，不需要額外編碼；第二種方法更優(yōu)雅，但是需要自定義一整套標(biāo)簽。

??這里，由于筆者對文檔的要求主要是實用，不需要那么完美，而且現(xiàn)在也沒有過多的精力來研發(fā)一整套標(biāo)簽。所以，筆者選擇了第一種解決方案。

??第一種方案最核心的地方就是需要確定AngularJS框架給我們的代碼帶來了哪些新成員，而后如何將這些新成員映射到原有的標(biāo)簽中去。

??AngularJS給我們帶來了以下新成員：模塊、服務(wù)、指令、篩選器和控制器。然后映射關(guān)系如下：

??其中，模塊是一個特殊的類，我叫它模塊類，它和其他的類是通過命名空間和類名來區(qū)分的。例如，NgModule.layout ，就是我的一個模塊類，NgModule 這個命名空間就是專門存放模塊類的命名空間。

??服務(wù)是另一種特殊的類，我叫它服務(wù)類，服務(wù)類和模塊類是通過命名空間來關(guān)聯(lián)的，并且服務(wù)類的名稱比較特殊，統(tǒng)一以 “$” 符號開頭。例如 , NgModule.layout.$layoutTag 就是我的一個服務(wù)類，它的命名空間就是它所屬的模塊類。

??指令和篩選器就比較簡單了，他們都是所屬模塊類中的函數(shù)。

??控制器也是一個特殊的類，我叫他控制器類，它的命名空間是它所屬模塊類。與其他類是通過類的名稱區(qū)分的，名稱統(tǒng)一以”Ctrl“結(jié)尾。例如：NgModule.frame3.frameCtrl 就是我的一個控制器類。這里，父子控制器就直接通過父類子類來表示。

??整體的思路就是如此，那么，下面咱還是直接上代碼來說話吧！

??如下所示，就是我們的一個模塊類的部分代碼（為了方便查看，只留下了注釋，刪掉了具體實現(xiàn)）：

    /**
     * 頁面通用小控件模塊
     * @class NgModule.layout
     * @alias gm.ngCustom.layout
     * @author lsjcoder
     */
    angular.module("gm.ngCustom.layout",[]).provider("$layoutTag",
    /**
     * 表示查詢項的標(biāo)簽的服務(wù)
     * @class NgModule.layout.$layoutTag
     * @alias $layoutTag
     * @author lsjcoder
     */
    function() {
        this.$get = [function () {
            function factory() {
                var $layout = {};

                /**
                 * @member NgModule.layout.$layoutTag
                 * @method  getCheckedTags 獲取選中的標(biāo)簽
                 * @param {Array} tags 標(biāo)簽集合
                 * @returns {Array} 選中的標(biāo)簽集合
                 */
                $layout.getCheckedTags = function(tags){
                };

                /**
                 * @member NgModule.layout.$layoutTag
                 * @method clearCheck 清空選擇
                 * @param {Array} tags 標(biāo)簽集合
                 */
                $layout.clearCheck = function(tags){
                };
                return $layout;
            }
            return factory;
        }];
    }).directive("gmTags",["$layoutTag",
    /**
     * @member NgModule.layout
     * @method gmTags 標(biāo)簽指令，EAC模式
     * @param {Number} [max-tag-num] DOM屬性傳值，外部顯示出來的標(biāo)簽最大個數(shù)，默認(rèn)會自動根據(jù)頁面寬度計算
     * @param {Boolean} [multi = true] DOM屬性傳值，是否開啟多選模式
     * @param {Object} tagdata 作用于傳值，指令配置項
     * @param {String} tagdata.checkTag 選中標(biāo)簽后調(diào)用函數(shù)的名稱
     * @param {Array} tagdata.tags 標(biāo)簽數(shù)據(jù)
     */
    function($layoutTag){
        //查詢表單中標(biāo)簽指令
        return {
            restrict: "ECA",
            templateUrl: "tag.tpl.html",
            replace: true,
            scope: {
                tagdata: "="
            },
            link: function (scope, element, attr, transclution) {
            }
        }
    }]).directive("dateChoose",
    /**
     * @member NgModule.layout
     * @method dateChoose 日期指令，EAC模式
     */
    function(){
        return {
            restrict:"EAC",
            link :function(scope,element,attr,transclution){
            }
        }
    }).directive("timeChoose",
    /**
     * @member NgModule.layout
     * @method timeChoose 時間指令，EAC模式
     */
    function(){
        return {
            restrict:"EAC",
            link :function(scope,element,attr,transclution){
              
            }
        }
    });

??代碼上看已經(jīng)很清晰了，這段代碼包含了模塊以及模塊中服務(wù)和指令的注釋方式。篩選器同指令，就不做贅述了。

??下面，我們再看看控制器的注釋方式：

    /**
     * @class NgModule.frame3 frame3模塊
     * @alias frame3
     * @author lsjcoder
     */
    var frameApp = angular.module("frameApp",[]);

    /**
     * @class NgModule.frame3.frameCtrl 框架控制器
     * @extends NgModule.frame.frameCtrl
     * @author lsjcoder
     */
    frameApp.controller("frameCtrl",["$scope",function($scope){
       /**
         * @member NgModule.frame3.frameCtrl
         * @method refreshPage 刷新路由頁面
         * @param  {String} strPath 路由地址
         * @author lsjcoder
         */
        $scope.refreshPage = function(strPath){
           
        };
    }]);

??如上代碼所示，我聲明了一個控制器 NgModule.frame3.frameCtrl ，它屬于模塊 NgModule.frame3 ，父控制器是 NgModule.frame.frameCtrl ，內(nèi)部有一個函數(shù)成員 refreshPage 。

??至此，我們就可以按照這種方式來描述所有因為使用 AngularJS 框架而新增的代碼部分了。其他的框架也可以使用相同的辦法來處理。這種處理方式是一種折中方案，如果想要更加規(guī)范、優(yōu)雅的話，建議使用自定義標(biāo)簽來解決。

??歡迎大伙關(guān)注我的微信公眾號，和老司機一起擼代碼：