资讯专栏INFORMATION COLUMN

JSDuck 与 AngularJS 融合技巧

CarterLi / 3296人阅读

摘要:融合思路解决这个问题,有两种思路。给我们带来了以下新成员模块服务指令筛选器和控制器。与其他类是通过类的名称区分的,名称统一以结尾。这种处理方式是一种折中方案,如果想要更加规范优雅的话,建议使用自定义标签来解决。

字数:1568

阅读时间:10分钟


前言

  前面,我们以一个实战案例来详细说明了如何在实际开发中使用JSDuck工具。但是,并不是所有的时候,代码的封装方式都受我们控制的。例如,如果我们使用了现在的几个主流框架AngularJS、React或者Vue的时候,代码的封装方式就必须按照框架定义的方式来构建。当我们的代码中出现了模块、控制器、服务、指令等JSDuck完全不认识的组成部分时,我们该如何使用JSDuck来正确描述我们的代码呢?

  那么,下面,笔者就以 AngularJS 为例,来说一说笔者自己的解决方案。


融合思路

  解决这个问题,有两种思路。第一种,可以将JSDuck不识别的代码部分映射到工具识别的标签来进行描述。第二种,既然没有现成的标签来描述这些新成员,那我们可以自定义一套标签来描述它们。

  第一种方法更方便,不需要额外编码;第二种方法更优雅,但是需要自定义一整套标签。

  这里,由于笔者对文档的要求主要是实用,不需要那么完美,而且现在也没有过多的精力来研发一整套标签。所以,笔者选择了第一种解决方案。

  第一种方案最核心的地方就是需要确定AngularJS框架给我们的代码带来了哪些新成员,而后如何将这些新成员映射到原有的标签中去。

  AngularJS给我们带来了以下新成员:模块、服务、指令、筛选器和控制器。然后映射关系如下:

新成员 映射的JSDuck标签
模块 模块类(@class)
服务 服务类(@class)
指令 模块类中的函数(@method)
筛选器 模块类中的函数(@method)
控制器 控制器类(@class)

  其中,模块是一个特殊的类,我叫它模块类,它和其他的类是通过命名空间和类名来区分的。例如,NgModule.layout ,就是我的一个模块类,NgModule 这个命名空间就是专门存放模块类的命名空间。

  服务是另一种特殊的类,我叫它服务类,服务类和模块类是通过命名空间来关联的,并且服务类的名称比较特殊,统一以 “$” 符号开头。例如 , NgModule.layout.$layoutTag 就是我的一个服务类,它的命名空间就是它所属的模块类。

  指令和筛选器就比较简单了,他们都是所属模块类中的函数。

  控制器也是一个特殊的类,我叫他控制器类,它的命名空间是它所属模块类。与其他类是通过类的名称区分的,名称统一以”Ctrl“结尾。例如:NgModule.frame3.frameCtrl 就是我的一个控制器类。这里,父子控制器就直接通过父类子类来表示。

  整体的思路就是如此,那么,下面咱还是直接上代码来说话吧!


示例

  如下所示,就是我们的一个模块类的部分代码(为了方便查看,只留下了注释,删掉了具体实现):

    /**
     * 页面通用小控件模块
     * @class NgModule.layout
     * @alias gm.ngCustom.layout
     * @author lsjcoder
     */
    angular.module("gm.ngCustom.layout",[]).provider("$layoutTag",
    /**
     * 表示查询项的标签的服务
     * @class NgModule.layout.$layoutTag
     * @alias $layoutTag
     * @author lsjcoder
     */
    function() {
        this.$get = [function () {
            function factory() {
                var $layout = {};

                /**
                 * @member NgModule.layout.$layoutTag
                 * @method  getCheckedTags 获取选中的标签
                 * @param {Array} tags 标签集合
                 * @returns {Array} 选中的标签集合
                 */
                $layout.getCheckedTags = function(tags){
                };

                /**
                 * @member NgModule.layout.$layoutTag
                 * @method clearCheck 清空选择
                 * @param {Array} tags 标签集合
                 */
                $layout.clearCheck = function(tags){
                };
                return $layout;
            }
            return factory;
        }];
    }).directive("gmTags",["$layoutTag",
    /**
     * @member NgModule.layout
     * @method gmTags 标签指令,EAC模式
     * @param {Number} [max-tag-num] DOM属性传值,外部显示出来的标签最大个数,默认会自动根据页面宽度计算
     * @param {Boolean} [multi = true] DOM属性传值,是否开启多选模式
     * @param {Object} tagdata 作用于传值,指令配置项
     * @param {String} tagdata.checkTag 选中标签后调用函数的名称
     * @param {Array} tagdata.tags 标签数据
     */
    function($layoutTag){
        //查询表单中标签指令
        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){
              
            }
        }
    });

  代码上看已经很清晰了,这段代码包含了模块以及模块中服务和指令的注释方式。筛选器同指令,就不做赘述了。


  下面,我们再看看控制器的注释方式:

    /**
     * @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 ,内部有一个函数成员 refreshPage 。


  至此,我们就可以按照这种方式来描述所有因为使用 AngularJS 框架而新增的代码部分了。其他的框架也可以使用相同的办法来处理。这种处理方式是一种折中方案,如果想要更加规范、优雅的话,建议使用自定义标签来解决。



  欢迎大伙关注我的微信公众号,和老司机一起撸代码:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/90721.html

相关文章

  • Javascript自动化文档工具:YUI Doc, JSDoc 3, JSDuck等比较

    摘要:本文比较了种较为主流的注释文档生成工具。应该说是非常适合开源项目多个作者共同维护的一个文档工具。最后我选择了作为文档生成的工具。为了支持多种语言,它仅对注释块内部的内容进行解析。 最近随着写Node以及独立的CommonJS模块越来越多,我发现有一份好的文档不仅可以帮助自己在应用这些接口的时候不至于迷糊,而且对于共同开发的情况下,能够省去大量团队的交流和Debug的时间。 本文比较了...

    tyheist 评论0 收藏0
  • 五分钟玩转文档化工具JSDuck

    摘要:我们在对现在较主流的五个文档工具分别作了调研和尝试,得到结论如下工具优点缺点提供了完整的模板开发事件触发等接口,使用非常灵活。至此,的环境部署已经全部完成了。 字数:981 阅读时间:5分钟 选型依据 ​ 在经历了数个上线的项目之后,笔者所在的团队已经沉淀了一个相对稳定版本的前端框架。因此,我们需要出具一套框架API文档,以便公司其他成员的使用和框架的后期维护。我们在对...

    rickchen 评论0 收藏0
  • JSDuck用法详解

    摘要:语法父类名表示当前类继承于哪个类的标签。成员标签成员标签作用于类中的配置属性函数事件。表明可被子类继承,和一起使用。示例获取圆的面积圆的半径面积值作用于函数,表明函数的标签。作用于函数,表明构造函数参数的标签,用法同。 字数:3692字 阅读时间:15分钟 前言 ​ 首先,咱们有一个前提,JSDuck对我们而言只是一个便于API查看的文档化工具。因此,只要它能够满足我们文...

    xiaochao 评论0 收藏0
  • Jsduck的使用

    摘要:简介是众多开源项目中的一个,它是使用编写的文档生成器。系统环境变量,对所有用户起作用。使用可通过配置,也可通过直接在命令行写参数来使用。配置进入项目目录,配置文件,类似以下的写法运行命令,即可在文件夹下找到自动生成的文档。 简介 jsduck是senchalabs众多开源项目中的一个,它是使用ruby编写的 javascript API文档生成器。不像JSDoc一样,不按照符合JSDo...

    alaege 评论0 收藏0
  • JSDuck实战

    摘要:我们先声明了类,在类的注释上添加标签表示静态类。静态类中包含一个方法,实现了一个简单的扩展功能,后面类的继承需要用到这个接口。这里需要注意,静态类中,所有的成员也都是静态的。 字数:2543 阅读时间:15分钟 前言 ​ 上一篇文章我们讲述了JSDuck的详细用法。那么,本文笔者就以实例为基础,和大家一起,从零开始,搭建一个简单的API文档——我们的第一个API文档V0.0.1。...

    kel 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<