JavaScript基本編碼模式小結
2024-05-06 14:21:55
供稿：網友
無論編寫任何程序都會接觸到編碼風格，設計模式等概念，編碼風格一般側重于書寫規范，而設計模式則偏向于程序架構設計。本文中筆者整理的這些“模式”包含了編寫JavaScript代碼時一些常用的方法或者小技巧，可以幫助初學JavaScript的同學迅速提升代碼質量。當然，在此之前首先要保證規范的書寫習慣，在此之上可以再將本文介紹的知識點運用到代碼編寫中，則可以大大提升代碼質量。
下面是筆者整理的一些點，沒有什么邏輯順序，想到哪兒寫到哪兒了，不足之處歡迎大家補充指正。
1. 變量定義
代碼如下:
// 一般寫法
var a = 0;
var b = 1;
var c = 'xxx';
// 推薦寫法
var a = 0,
b = 1,
c = 'xxx';
2. 盡量使用字面量
代碼如下:
// 一般寫法
var obj = new Object();
obj.a = 'aa';
obj.b = 'bb';
obj.c = 'cc';
var arr = new Array();
// 推薦寫法
var obj = {
a: 'aa',
b: 'bb'
};
var arr = [];
function getXX(index){
return ['aa', 'bb', 'xx', 55, 'xxb'](index);
}
function getMessage(code){
return {
404: 'xxx',
500: 'xxx'
}[code];
}
3. 正則字面量
代碼如下:
var regex = new RegExp('someting');
// 當正則表達式可能變化時才使用構造函數
var cls = 'someclass',
regex = new RegExp(cls + '//s*', 'ig'); // only for dynamic regexs
// 其他情況均使用字面量
var regex = /someting/ig;
4. 設置默認值
代碼如下:
// Default values
var arg = arg || 'default'; // fallback
document.getElementById('test').onclick = function(event){
var event = event || window.event;
};
function getX(a){
return a+1 || 'default';
}
5. 條件判斷
代碼如下:
// Conditions
answer = obj && obj.xx && obj.xx.xxx;
// 連續判斷
if(obj && obj.xx && obj.xx.xxx){
// do something
}
if(obj.xx){
// do something
}
if(!obj){
// do something
}
// 使用全等判斷
if(a === b){
// do something
}
// 盡量不檢測瀏覽器，僅檢測要使用的特性是否支持
if(document.getElementById){
// ability detect
}
6. 三元操作符
代碼如下:
// Ternary
check ? value1 : value2;
// 三元操作符更簡潔
var foo = (condition) ? value1 : value2;
function xx(){
if(condition){
return value1;
}else{
return value2;
}
}
function xx(){
return (condition) ? value1 : value2;
}
// 格式化三元操作符
foo = predicate ? "one" :
predicate ? "two" :
"default"; // format
7. 插入迭代值
代碼如下:
// Insert iteration
var name = value[i];
i++;
// 直接將迭代值插入
var name = value[i++];
8. DOM操作
代碼如下:
// DOM Operation
el.style.display = 'none'; // offline
// operation
el.style.display = 'block';
