【原創】如何管理你的 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"
}

好了，就到這裏了，純屬我的拙見，歡迎交流！！！

做者博客：百碼山莊