【原创】如何管理你的 Javascript 代码

今天不聊技术的问题，我们来聊聊在前端开发中如何管理好本身的 Javascript 代码。首先，我们先来讲说通常都有哪些管理方式？我相信 seajs、requirejs 对于前端开发者而言都不陌生，不错它们都是前端代码模块化开发的利器，显然以模块化的方式去管理咱们的 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"
}

好了，就到这里了，纯属我的拙见，欢迎交流！！！

做者博客：百码山庄