JavaScript基本编码模式小结

// 一般写法
var a = 0;
var b = 1;
var c = xxx;
// 推荐写法
var a = 0,
b = 1,
c = xxx;

// 一般写法
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];
}

var regex = new RegExp(someting);
// 当正则表达式可能变化时才使用构造函数
var cls = someclass,
regex = new RegExp(cls + \\s*, ig); // only for dynamic regexs
// 其他情况均使用字面量
var regex = /someting/ig;

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

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

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

// Insert iteration
var name = value[i];
i++;
// 直接将迭代值插入
var name = value[i++];

// DOM Operation
el.style.display = none; // offline
// operation
el.style.display = block;
// 使用文档碎片操作更好
var fragment = document.createDocumentFragment(); // better
el.innerHTML = ; // fast remove all children, but may leaks memory
el.innerHTML = xxx; // ok, use it!
// 小心处理NodeList
var images = document.getElementsByTagName(img); // be careful! dynamic list

// 使用事件代理，在更外层的元素上监听事件
document.getElementById(list).onclick = function(evt){
var evt = evt || window.event,
target = evt.target || evt.srcElement;
if(target.id === btn1){
// do something
}
}

// An Object as a Namespace
var MYAPP = {};
MYAPP.dom.get = function(id){};
MYAPP.style.css = function(el, style){};
MYAPP.namespace(event);

// Chaining operation: return this
function setValue(el, value){
el.value = value;
return this;
}
var obj = new MYAPP.dom.Element(span);
obj.setText(hello)
.setStyle(color, red)
.setStyle(font, Verdana);

// Function
(function(){
var _private = cant see me;
})();
(function($){
$(#xxb).click(function(){ });
})(jQuery);

// Configure Object
function foo(id, conf, null , null){
// do somethin
}
foo(bar, {
key1 : 1,
key2 : 2
});

// Type Conversion
+010 === 10;
Number(010) === 10;
parseInt(010, 10) === 10;
10 + === 10;
+new Date() // timestamp
+new Date;

// 仅在需要向前兼容时才使用，其他情况不建议扩展原型对象
Array.prototype.forEach = function(){
// only for forward compatible
};

// 缓存
for(var i=0, j = document.getElementsByTagName(a).length; i0; i--){
// maybe faster
}
// 据说是最快的
while(i--){
// maybe fastest
}

Array.forEach();
getElementsByClassName();
querySlectorAll();
// 首先检测是否支持新特性，能用就用
if(document.getElementsByClassName){
// use
}else{
// your implementations
}

// 只判断一次，再次调用该函数则无需判断
function lazyDef(){
if(condition1){
lazyDef = function(){ };
}else if(condition2){
lazyDef = function(){ };
}
return lazyDef();
}

var MYAPP = {};
MYAPP.dom = (function(){
var _setStyle = function(el, prop, value){
console.log(setStyle);
};
return {
setStyle: _setStyle
};
})();
// 当 MYAPP.dom.setStyle 不慎被覆写时，_setStyle在内部仍然可用

// 尽量使用，可以传入多个参数，最后输出拼接后的字符串
console.log(xx,xx,...);
console.dir(someObj);
console.dirxml(someDom);
console.time(timer);
console.warn(xxx);
// 封装可以保证不小心发布出去也不会导致问题，但报错时行号可能有问题
function msg(msg){
if(console && console.log){
console.log(msg); // wrong line number
}
}