JavaScript的三種程式碼書寫格式
阿新 • • 發佈:2019-01-22
在這裡我將 JavaScript 的類與 Java(本人主要是做Java開發的) 的類做一個比較,以便大家能夠更好的理解。
1. 在沒有接觸 JS 的面向物件程式設計之前,寫JS的函式都是像下面這樣寫的:
function test(){
var v1 = "test";
var v2 = "value";
if(v1=="test"){
v2 = v1;
}
}
在上面這個 test() 函式裡面的變數 v1 和 v2 其實我們可以看成是 Java 裡面的全域性靜態常量,
寫在 test() 裡的一些程式碼和邏程相當於 Java 裡面的靜態程式碼塊, 所以我們在 html 或者jsp裡面呼叫 test() 函式可以直接寫呼叫, 而不用去初使化,因為靜態常量 和 靜態程式碼塊是可以直接通過類名呼叫的。例如 :<input type="button" onclick="test() "
>
2. 如果我們要將去封裝一個JavaScript 的類庫, 並在類庫中提供相應的方法,該如何去寫呢? 如下:
function KTools(){}
KTools.prototype = {
//去除首尾空格
trim : function(str){
return str.replace(/(^\s+)|(\s+$)/g, "");
},
//去除全部空格
trimAll : function(str){
return str.replace(/\s+/g, "");
}
};
這裡的 KTools 類,如果我們在 html 裡進行呼叫的話,直接通過類名去呼叫 trim() 方法的話,是呼叫不到的,我們必須先 new KTools() 的物件,例如:<input type="button" onclick="new KTools().trim('sss ssss') " >如果在
trim() 方法裡面定義一個變數,就屬於是區域性變量了。通過和 Java 對比我們發現,其實JavaScript 和 Java 還有不少相似之處!
3. 除了上面這兩種JS程式碼塊的書寫格式,我還用過第三種書寫格式,如下:
var DT = {
//模組載入
moduleLoad : function(){
DT.menuLoad(null);
},
//列表載入
listLoad : function(){
.........
},
//選單載入
menuLoad : function (json){
..........
},
//評論載入
commentLoad : function(){
.........
}
};
這種格式書寫的程式碼,在 html 中呼叫是 變數名[DT].方法名[menuLoad](),例如:<input type="button" onclick="DT.listLoad();"
>
在這裡,方法之間也可以相互呼叫。 通過這種格式書寫出來的程式碼,呼叫起來也比較方便,程式碼的層次結構也比較清晰!
在使用的過程中,可以選擇一種更適合自己的格式去書寫 JS 程式碼!