1. 程式人生 > >js書寫技巧1

js書寫技巧1

1、物件屬性定義

js物件可以理解為鍵值對桶,也可以理解成Java中Map,屬於Key-value形式。定義屬性時可以通過字面量設定屬性,如:

var obj = {
    "user-name":'張三',
    "age" : 15
}

也可以通過中括號([])形式設定屬性,如:

var obj = {}
obj['user-name'] = '張三'
obj['age'] = 15

第三種屬性設定設定屬性值與其他語言類似,通過”.”進行屬性賦值,如:

var obj = {}
//obj.user-name = '張三'//報錯Uncaught ReferenceError:Invalid left-hand side in assignment
obj.user_name = '張三'

對於以上三種方法賦值,各有優缺點。第1、2種,物件屬性設定靈活,可以設定成任意字串,甚至是js預留欄位以及可以不符合js變數定義規範
最後一種賦值方式,與其他面嚮物件語言寫法類似,開發人員容易接受,但是屬性名必須嚴格遵守js變數命名規範。

建議為了規範程式碼,儘量使用最後一種屬性設定方式。

屬性取值與以上類似,可以通過中括號或者“.”進行屬性值獲取

2、js物件取值防禦式開發

  • 防止獲取到值存在undefined情況,可以設定預設值
var obj = {
    "userName":'張三',
    "age" : 15
} var username = obj.userName//張三 var birthday = obj.birthday // undefined var birthday = obj.birthday || '未填寫'
  • 防止物件是undefined,獲取屬性值報錯
var obj = undefined
var username = obj.userName//Uncaught TypeError: Cannot read property 'userName' of undefined
var birthday = obj && obj.userName//undefined

3、物件字面量的原型物件

所有通過物件字面量建立的物件都連線到Object.prototype.

4、減少全域性變數汙染

  • 建立唯一一個全域性變數,相當於一個容器,將所有函式與變數定義到全域性容器中
var MYAPP = {}
MYAPP.stooge = {
    "first-name" : Jone
}

5、函式(方法)呼叫中的this

如果函式是某個物件的屬性,我們將這個函式稱為物件的方法,當呼叫物件的某個方法時,方法體中的this關鍵字指向的是物件本身,而如果直接呼叫函式,this指向的是全域性作用域。

6、arguments

arguments與this是函式呼叫時,預設傳入引數,其中arguments並不是一個數組,只是一個類陣列的資料結構。arguments擁有一個length屬性,但是沒有其他陣列方法

var sum = function(){
    var i,sum = 0;
    for(i = 0 ; i < arguments.length ; i++){
        sum += arguments[i]
    }
    return sum'
}

7、js函式返回值

js與其他語言不通,所有函式(方法)都有返回值,即使直接return也會有返回值”undefined”.

var testReturn = function(){
    console.log("testReturn end")
    return;
}
testReturn();//undefined

8、js異常處理

異常處理主要是解決那些干擾正常流程執行的事故,防禦式程式設計的習慣是儘可能早的發現問題並處理問題。如下程式碼,做兩個數的加法,需要校驗是否數字,如果不是,將異常丟擲。

var add = function (a,b){
    if(typeof a != 'number' || typeof b != 'number'){
        throw{
            name: 'TypeError',
            message: 'add needs numbers'
        }
    }
    return a + b;
}

通過throw語句可以中斷當前邏輯的執行,並且會丟擲一個exception物件。在js中exception物件必須包含一個用來標識異常型別的“name”屬性和一個異常描述的“message”屬性。

對於丟擲的異常,我們可以捕獲也可以不處理,直接向上丟擲,直到呼叫棧頂層如果都未被捕獲,則阻斷當前程式碼執行邏輯,直接跳出。

var try_it = function(){
    try{
        add("seven","one")
    }catch(e){
        console.log(e.name + "-------" + e.message)//TypeError-------add needs numbers
    }
}