你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
MrZheng

如何管理你的 Javascript 代码 1个回复 专栏 @ Javascript

MrZheng 发布于 2 年前

今天不聊技术的问题,咱们来聊聊在前端开发中如何管理好自己的 Javascript 代码。首先,咱们先来说说一般都有哪些管理方式?我相信 seajsrequirejs 对于前端开发者而言都不陌生,不错它们都是前端代码模块化开发的利器,显然以模块化的方式去管理我们的 Javascript 代码,是很不错的选择。

不过今天咱不谈模块化开发,因为上面的两个工具已经做得很好了,只要到他们的官方网站找到相应的文档资料,认真学习,不需太多时日你也能掌握模块化开发了。今天咱们要谈的是在不依赖模块管理工具的前提下,如何做好自己项目的代码管理。

首先,笔者认为一个独立的 Web 项目,应该有一个顶级的命名空间,而针对这个项目开发的所有附属代码应该尽量都放到该命名空间下。如果项目特别大,咱可以根据业务模块再分二级命名空间,三级命名空间,等等。但是何谓大项目,这个就只能开发者自己去定义了。

然后,仅仅有命名空间还不够,如果你所有的代码都码在一个 js 文件中,那将会是一个悲剧。为什么这么说呢?第一,如果我们有一个 Tip 组件,功能是给指定元素添加标签提示功能,当我们需要在多个页面中使用这个组件时,你就会发现,每个页面都会引用 N 多没用的代码。第二,所有的代码都写在一个文件中,那么你的这个 js 文件,必将是一个庞然大物,几千上万行,调试起来也是相当有难度的。所以,要管好你的 js 代码,请把独立的插件、组件、公共方法,保存到独立的 js 文件中,再用我们上面准备的顶级命名空间把它们聚集到一起来。

再然后,一套合理的编码规范会让你的代码管理事半功倍。普通变量小驼峰,类名大驼峰,常量大写,私有变量加前置下划线,能很好的提高你代码的可读性和可维护性。运算符之间添加空格,代码使用 4(或 2)个空格合理缩进,可以让你的代码整齐有序,清晰易读。代码块严格使用大括号包裹(即便只有一行语句),三元运算符合理使用小括号,会让你的代码整齐,逻辑清晰。统一的组件开发模式,可以让你的代码专业而不失优雅。还有很多很多,就不再往下罗列了,这些规范在很多规范文档中已经写得非常清楚,这里给大家推荐一个个人感觉很不错的 js 规范,感兴趣的朋友还可以找谷姐、度娘勾兑勾兑,学习更多的 js 规范,让自己更专业。当然,所谓“尽信书,则不如无书”,所以,规范仅作参考,并不是严格限定,开发者可以在规范的基础上保留一点点自己的个性,但必须保证风格统一。

最后,咱一起来看一个简单的代码示例,命名空间就以 SEEJS 为例了。

第一步,咱们先把我们的命名空间给弄出来,顺便加一些基础信息:

window.SEEJS = {
    copyright: "CopyRight © MrZheng",
    version: "1.0.0"
};

第二步,我们来定义一个组件结构:

(function(window, undefined){
    SEEJS.plugins = SEEJS.plugins || {};

    function Tips(cfg) {...}

    Tips.prototype = {
        constructor: Tips,
        init: function() {...}
    };

    SEEJS.plugins.Tips = SEEJS.plugins.Tips || Tips;
})(window);

只为举例,咱就不再多写了。最后,咱给我们的项目提供一些工具方法:

(function(window, undefined){
    var TOOLS = SEEJS.tools || {};

    TOOLS.trim = function(str) {...};
    TOOLS.hexToRgba = function(hex, alpha) {...};

    SEEJS.tools = TOOLS;
})(window);

现在我们在控制台输入 SEEJS,然后敲一下回车,就可以清晰的看到我们的代码结构了:

SEEJS = {
    copyright: "CopyRight © MrZheng",
    plugins: {
        Tips: function(cfg) {}
    },
    tools: {
        trim: function(str) {},
        hexToRgba: function(hex, alpha) {}
    },
    version: "1.0.0"
}

好了,就到这里了,纯属个人拙见,欢迎交流!!!

作者博客:百码山庄

  • nimo

    以前我也是用这种方式,可当页面越来越多时会发现越来越难管理 SEEJS 下的 plugins 和 tools。

    一、 多人维护时候,很容易破坏SEEJS的结构。虽然使用了 namespace

    二、例如:Viewdata 插件依赖于 Tip插件, Viewdata的代码如下

    (function(window, undefined){
        SEEJS.plugins = SEEJS.plugins || {};
    
        function Viewdata(cfg) {...}
    
        Viewdata.prototype = {
            init: function() {...},
            show: function(str) {
                new SEEJS.plugins.Tip(str);
            }
        };
        SEEJS.plugins.Tips = SEEJS.plugins.Tips || Tips;
    })(window);
    

    Viewdata 的 show 函数依赖于 Tip 插件,依赖关系是通过 SEEJS 关联。

    我们发现 Tip 现有功能已经不能满足开发需求了,需要升级 Tip 。这个升级工作可能会修改 Tip 的 api。
    一旦完成升级并修改了 Tip 的 api 就需要修改所有页面的 Tip 相关代码和 Viewdata 相关代码,因为它是通过 SEEJS.plugins 访问的。


    为了解决这些问题,现在我们使用 seajs 加载文件和管理依赖关系。

    通过文件目录命名空间去解决组件的加载和版本控制

    // old code
    seajs.use('tip/0.0.1/tip',function () {
        // 无特殊必要不会修改旧的代码
    })
    
    // new code
    seajs.use('tip/0.0.2/tip',function () {
        // 新的页面则使用新版本的组件
    })
    

    utils 可通过约定集成到 base.jsbase.js 包含 seajs 和 utils

    目前我们全局变量是 S , S 下面有 namespace 方法。

    约定所有页面临时变量全部用 S.page 自由存放,声明变量全部使用 namespace 声明。

    S.namespace('page.data')
    
    S.page.data.username = 'NimoChu';
    
    S.namespace('page.data.ui')
    
    seajs.use('tip/0.0.2/tip',function () {
        S.page.ui.tip = new Tip();    
    }))
    

    seajs 帮我们完成了组件的加载、版本控制、依赖管理。
    而全局变量 Snamespace 帮助我们管理和创建本页所需的变量

    #1
登录后回复,如无账号,请使用邀请码注册