1. 變數定義//一般寫法
var a = 0;
var b = 1;
var c = '***'; //
推薦寫法
var a = 0,
b = 1,
c = '***';
2. 盡量使用字面量
//一般寫法
var obj = new
object();
obj.a = 'aa';
obj.b = 'bb';
obj.c = 'cc';
var arr = new
array(); //
推薦寫法
var obj =;
var arr =;
function
getxx(index)
function
getmessage(code)[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. 設定預設值(個人感覺typeof)
//default values
var arg = arg || 'default'; //
fallback
document.getelementbyid('test').onclick = function
(event);
function
getx(a)
function gety(b)
5. 條件判斷
//conditions
answer = obj && obj.xx &&obj.xx.***; //
連續判斷
if(obj && obj.xx &&obj.xx.***) if
(obj.xx)
if(!obj) //
使用全等判斷
if(a ===b) //
盡量不檢測瀏覽器，僅檢測要使用的特性是否支援
if(document.getelementbyid)
6. 三元操作符
//ternary
check ?value1 : value2; //
三元操作符更簡潔
var foo = (condition) ?value1 : value2;
function
xx()
else}
function
xx() //
格式化三元操作符
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'; //
使用文件碎片操作更好 www.2cto.com
var fragment = document.createdocumentfragment(); //
better
el.innerhtml = ''; //
fast remove all children, but may leaks memory
el.innerhtml = '***'; //
ok, use it!
//小心處理nodelist
var images = document.getelementsbytagname('img'); //
be careful! dynamic list
9. 事件**
//使用事件**，在更外層的元素上監聽事件
document.getelementbyid('list').onclick = function
(evt)}
10. 命名空間
//an object as a namespace
(id){};
(el, style){};
11. 鏈式操作
//chaining operation: return this
function
setvalue(el, value)
obj.settext('hello')
.setstyle('color', 'red')
.setstyle('font', 'verdana');
12. 私有作用域
//function
(function
())(); (
function
($));
})(jquery);
13. 配置物件
//configure object
function foo(id, conf, null , null)
foo('bar', );
14. 型別轉換
//type conversion
+'010' === 10;
number('010') === 10;
parseint('010', 10) === 10;
10 + '' === '10';
+new date() //
timestamp
+new
date;
15. 擴充套件原型
//僅在需要向前相容時才使用，其他情況不建議擴充套件原型物件
array.prototype.foreach = function
();
16. 迴圈優化
//快取
for(var i=0, j = document.getelementsbytagname('a').length; i0; i--) //
據說是最快的
while(i--)
17. 盡量使用新特新
array.foreach();
getelementsbyclassname();
queryslectorall(); //
首先檢測是否支援新特性，能用就用
if(document.getelementsbyclassname)else
18. 惰性載入
//只判斷一次，再次呼叫該函式則無需判斷
function
lazydef();
}else
if(condition2);
}return
lazydef();}
19. 私有函式與公共方法
();return
;})(); //
20. 除錯
//盡量使用，可以傳入多個引數，最後輸出拼接後的字串
console.log('xx','xx','...');
console.dir(someobj);
console.dirxml(somedom);
console.time('timer');
console.warn('***'); //
封裝可以保證不小心發布出去也不會導致問題，但報錯時行號可能有問題
function
msg(msg)
}
JavaScript編碼相關
我 u6211 a.我 charcodeat 0 tostring 16 6211 其中charcodeat 方法可返回指定位置的字元的 unicode 編碼。這個返回值是 0 65535之間的整數。b.而ascii字元在0 255之間，故有 a charcodeat 0 tostring 16 4...
JavaScript編碼解碼
encodeuri 函式可把字串作為 uri 進行編碼。encodeuri uristring 引數 描述uristring 必需。乙個字串，含有 uri 或其他要編碼的文字。uristring 的副本，其中的某些字元將被十六進製制的轉義序列進行替換。該方法不會對 ascii 字母和數字進行編碼，也...
Javascript編碼風格
js 編碼風格 1 所有 行以分號結束。儘管 js確實允許使用換行符結束。2 使用if 或者for 語句，必須使用 即時只有一句！3 不同於其他程式語言，js中，塊 不會作為變數的作用域。js只支援函式級的作用域 var定義 或者全域性作用域 不定義，或者 var定義在函式外 因此，js中只允許 f...