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
}
}