前言
前面，我們以一個(gè)實(shí)戰(zhàn)案例來(lái)詳細(xì)說(shuō)明了如何在實(shí)際開(kāi)發(fā)中使用JSDuck工具。愛(ài)掏網(wǎng) - it200.com但是，并不是所有的時(shí)候，代碼的封裝方式都受我們控制的。愛(ài)掏網(wǎng) - it200.com例如，如果我們使用了現(xiàn)在的幾個(gè)主流框架AngularJS、React或者Vue的時(shí)候，代碼的封裝方式就必須按照框架定義的方式來(lái)構(gòu)建。愛(ài)掏網(wǎng) - it200.com當(dāng)我們的代碼中出現(xiàn)了模塊、控制器、服務(wù)、指令等JSDuck完全不認(rèn)識(shí)的組成部分時(shí)，我們?cè)撊绾问褂肑SDuck來(lái)正確描述我們的代碼呢？
那么，下面，筆者就以 AngularJS 為例，來(lái)說(shuō)一說(shuō)筆者自己的解決方案。愛(ài)掏網(wǎng) - it200.com
融合思路
解決這個(gè)問(wèn)題，有兩種思路。愛(ài)掏網(wǎng) - it200.com第一種，可以將JSDuck不識(shí)別的代碼部分映射到工具識(shí)別的標(biāo)簽來(lái)進(jìn)行描述。愛(ài)掏網(wǎng) - it200.com第二種，既然沒(méi)有現(xiàn)成的標(biāo)簽來(lái)描述這些新成員，那我們可以自定義一套標(biāo)簽來(lái)描述它們。愛(ài)掏網(wǎng) - it200.com
第一種方法更方便，不需要額外編碼；第二種方法更優(yōu)雅，但是需要自定義一整套標(biāo)簽。愛(ài)掏網(wǎng) - it200.com
這里，由于筆者對(duì)文檔的要求主要是實(shí)用，不需要那么完美，而且現(xiàn)在也沒(méi)有過(guò)多的精力來(lái)研發(fā)一整套標(biāo)簽。愛(ài)掏網(wǎng) - it200.com所以，筆者選擇了第一種解決方案。愛(ài)掏網(wǎng) - it200.com
第一種方案最核心的地方就是需要確定AngularJS框架給我們的代碼帶來(lái)了哪些新成員，而后如何將這些新成員映射到原有的標(biāo)簽中去。愛(ài)掏網(wǎng) - it200.com
AngularJS給我們帶來(lái)了以下新成員：模塊、服務(wù)、指令、篩選器和控制器。愛(ài)掏網(wǎng) - it200.com然后映射關(guān)系如下：
| 新成員 | 映射的JSDuck標(biāo)簽 |
|---|---|
| 模塊 | 模塊類(lèi)（@class） |
| 服務(wù) | 服務(wù)類(lèi)（@class） |
| 指令 | 模塊類(lèi)中的函數(shù)（@method） |
| 篩選器 | 模塊類(lèi)中的函數(shù)（@method） |
| 控制器 | 控制器類(lèi)（@class） |
其中，模塊是一個(gè)特殊的類(lèi)，我叫它模塊類(lèi)，它和其他的類(lèi)是通過(guò)命名空間和類(lèi)名來(lái)區(qū)分的。愛(ài)掏網(wǎng) - it200.com例如，NgModule.layout ，就是我的一個(gè)模塊類(lèi)，NgModule 這個(gè)命名空間就是專(zhuān)門(mén)存放模塊類(lèi)的命名空間。愛(ài)掏網(wǎng) - it200.com
服務(wù)是另一種特殊的類(lèi)，我叫它服務(wù)類(lèi)，服務(wù)類(lèi)和模塊類(lèi)是通過(guò)命名空間來(lái)關(guān)聯(lián)的，并且服務(wù)類(lèi)的名稱(chēng)比較特殊，統(tǒng)一以 “$” 符號(hào)開(kāi)頭。愛(ài)掏網(wǎng) - it200.com例如 , NgModule.layout.$layoutTag 就是我的一個(gè)服務(wù)類(lèi)，它的命名空間就是它所屬的模塊類(lèi)。愛(ài)掏網(wǎng) - it200.com
指令和篩選器就比較簡(jiǎn)單了，他們都是所屬模塊類(lèi)中的函數(shù)。愛(ài)掏網(wǎng) - it200.com
控制器也是一個(gè)特殊的類(lèi)，我叫他控制器類(lèi)，它的命名空間是它所屬模塊類(lèi)。愛(ài)掏網(wǎng) - it200.com與其他類(lèi)是通過(guò)類(lèi)的名稱(chēng)區(qū)分的，名稱(chēng)統(tǒng)一以”Ctrl“結(jié)尾。愛(ài)掏網(wǎng) - it200.com例如：NgModule.frame3.frameCtrl 就是我的一個(gè)控制器類(lèi)。愛(ài)掏網(wǎng) - it200.com這里，父子控制器就直接通過(guò)父類(lèi)子類(lèi)來(lái)表示。愛(ài)掏網(wǎng) - it200.com
整體的思路就是如此，那么，下面咱還是直接上代碼來(lái)說(shuō)話(huà)吧！
示例
如下所示，就是我們的一個(gè)模塊類(lèi)的部分代碼（為了方便查看，只留下了注釋?zhuān)瑒h掉了具體實(shí)現(xiàn)）：
/**
* 頁(yè)面通用小控件模塊
* @class NgModule.layout
* @alias gm.ngCustom.layout
* @author lsjcoder
*/
angular.module("gm.ngCustom.layout",[]).provider("$layoutTag",
/**
* 表示查詢(xún)項(xiàng)的標(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屬性傳值，外部顯示出來(lái)的標(biāo)簽最大個(gè)數(shù)，默認(rèn)會(huì)自動(dòng)根據(jù)頁(yè)面寬度計(jì)算
* @param {Boolean} [multi = true] DOM屬性傳值，是否開(kāi)啟多選模式
* @param {Object} tagdata 作用于傳值，指令配置項(xiàng)
* @param {String} tagdata.checkTag 選中標(biāo)簽后調(diào)用函數(shù)的名稱(chēng)
* @param {Array} tagdata.tags 標(biāo)簽數(shù)據(jù)
*/
function($layoutTag){
//查詢(xún)表單中標(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 時(shí)間指令，EAC模式
*/
function(){
return {
restrict:"EAC",
link :function(scope,element,attr,transclution){
}
}
});
代碼上看已經(jīng)很清晰了，這段代碼包含了模塊以及模塊中服務(wù)和指令的注釋方式。愛(ài)掏網(wǎng) - it200.com篩選器同指令，就不做贅述了。愛(ài)掏網(wǎng) - it200.com
下面，我們?cè)倏纯纯刂破鞯淖⑨尫绞剑?/p>
/**
* @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 刷新路由頁(yè)面
* @param {String} strPath 路由地址
* @author lsjcoder
*/
$scope.refreshPage = function(strPath){
};
}]);
如上代碼所示，我聲明了一個(gè)控制器 NgModule.frame3.frameCtrl ，它屬于模塊 NgModule.frame3 ，父控制器是 NgModule.frame.frameCtrl ，內(nèi)部有一個(gè)函數(shù)成員 refreshPage 。愛(ài)掏網(wǎng) - it200.com
至此，我們就可以按照這種方式來(lái)描述所有因?yàn)槭褂?AngularJS 框架而新增的代碼部分了。愛(ài)掏網(wǎng) - it200.com其他的框架也可以使用相同的辦法來(lái)處理。愛(ài)掏網(wǎng) - it200.com這種處理方式是一種折中方案，如果想要更加規(guī)范、優(yōu)雅的話(huà)，建議使用自定義標(biāo)簽來(lái)解決。愛(ài)掏網(wǎng) - it200.com
原文發(fā)布時(shí)間：2024/12/26
原文作者：老司機(jī)帶你擼代碼
本文來(lái)源開(kāi)源中國(guó)如需轉(zhuǎn)載請(qǐng)緊急聯(lián)系作者