改善javascript程式碼結構

JavaScript · 發表 2018-10-09 21:55:00

摘要：首先看下常規開發中javascript非結構化組織程式碼 function appInit () { //程式初始化操作 } function appModule1 () { //程式功能模組1 } function appModule2 () { //程式功...

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

function appInit () {
//程式初始化操作
}

function appModule1 () {
//程式功能模組1
}

function appModule2 () {
//程式功能模組2
}

function appModule3 () {
//程式功能模組3
}

$( document ).ready(appInit )

從技術角度看，這種程式碼方式並沒有任何錯誤，但是通過下圖可以發現這些函式都是建立在全域性名稱空間下

若在全域性名稱空間中建立很多變數很快會導致嚴重的問題、比如在全域性名稱空間中定義了名為i、_或$的變數。

如何改善呢？

1、使用一個單例建立一個應用程式名稱空間

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

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

這一模式允許多個開發人員跨越多個檔案，在單個應用程式名稱空間之下進行協同開發。從程式碼結構角度來說，可以將網站的每一部分拆成獨立檔案。比如本例中的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的程式碼
}
}

2、Module模式

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

模組模式包含三個主要元件：一個與前面例子類似的名稱空間、一個立即執行函式和函式返回物件，該返回物件包含公有方法和公有屬性，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開發中，並非所以時候都需要使用這種保護訪問，但當我們需要實現這樣功能時，使用模組模式是非常重要的。

改善javascript程式碼結構

您可能也會喜歡…