改善javascript代碼結構

首先看下常規開發中javascript非結構化組織代碼javascript

function appInit () { //程序初始化操做
} function appModule1 () { //程序功能模塊1 
} function appModule2 () { //程序功能模塊2 
} function appModule3 () { //程序功能模塊3 
} $( document ).ready(appInit )

從技術角度看，這種代碼方式並無任何錯誤，可是經過下圖能夠發現這些函數都是創建在全局名稱空間下css

若在全局名稱空間中建立不少變量很快會致使嚴重的問題、好比在全局名稱空間中定義了名爲i、_或$的變量。java

如何改善呢？jquery

一、使用一個單例建立一個應用程序名稱空間chrome

var myApp = { init : function () { //程序初始化操做
 }, appModule1 : function () { //程序功能模塊1
 }, appModule2 : function () { //程序功能模塊2
 }, appModule3 : function () { //程序功能模塊3
 } } $( document ).ready(myApp.init)

對於上面的新結構，打開chrome查看window下的屬性時僅看到單個變量myApp，這中方式極大的下降了變量名衝突的可能性。app

這一模式容許多個開發人員跨越多個文件，在單個應用程序名稱空間之下進行協同開發。從代碼結構角度來講，能夠將網站的每一部分拆成獨立文件。好比本例中的common.js、函數

appModule1.js、appModule2.js和appModule3.js。每一個開發人員都有一個本身負責的網站部分和相應的javascript文件，開發人員只須要關注本身的文件，不須要擔憂會發生衝突。測試

common.js var myApp = { common : { init : function () { //初始化應用程序通用代碼
 } } } appModule1.js myApp.appModule1 = { init : function () { //初始化代碼
 }, update : function () { //更新模塊1的代碼
 }， render : function () { //呈現模塊1的代碼
 } } appModule2.js myApp.appModule2 = { init : function () { //初始化代碼
 }, update : function () { //更新模塊2的代碼
 }， render : function () { //呈現模塊2的代碼
 } } appModule3.js myApp.appModule3 = { init : function () { //初始化代碼
 }, update : function () { //更新模塊3的代碼
 }， render : function () { //呈現模塊3的代碼
 } }

二、Module模式網站

模塊模式是單例的一種變種，加強了單例模式提供的封裝性，並增長了建立私有方法和私有屬性的功能spa

模塊模式包含三個主要組件：一個與前面例子相似的命名空間、一個當即執行函數和函數返回對象，該返回對象包含公有方法和公有屬性，js代碼以下：

//app的名稱空間。傳入jquery對象以縮短查找過程
var myApp = function( $ ){ //私有變量和方法
    var message = " i am a module "; function multiplier (x,y) { return x * y; }; //返回對象包含公有屬性和方法
    return { init:function(){ //初始化app
 }, prop : '42', getProduct : function(){ //訪問私有方法
            return multiplier(2,3); }, shareMessage : function (arg){ //對私有屬性進行限制訪問
            if(arg == "admin"){ return message; } else { throw new Error("No access"); } } } }(jQuery)

控制檯中測試以下：

擴展該模式以增長更多的模塊也很是簡單。以下代碼：

myApp.module1 = function($){ //私有變量和方法
    var config = { "color":"red", "title":"module1", "width":"20px" }; return { init:function(){ //初始化module1
 }, updateConfig : function(obj){ config.color = obj.color || config.color; config.title = obj.title || config.title; config.width = obj.width || config.width; }, render:function(){ var $module1 = $("#id"); $module1.text(config.title) .css({"width":config.width,"color":config.color}) } } }(jQuery)

該代碼描述了一個module1模塊，它包含一個私有配置對象和一個公共方法，該公有方法容許根據一組預約義條件得到對module1配置的訪問，相似於java中private和public關鍵字的使用。在js開發中，並不是因此時候都須要使用這種保護訪問，但當咱們須要實現這樣功能時，使用模塊模式是很是重要的。