首页 / 脚本样式 / JavaScript / JavaScript基本编码模式小结

无论编写任何程序都会接触到编码风格，设计模式等概念，编码风格一般侧重于书写规范，而设计模式则偏向于程序架构设计。本文中笔者整理的这些“模式”包含了编写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";
// 使用文档碎片操作更好
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

9. 事件代理
复制代码 代码如下:
// 使用事件代理，在更外层的元素上监听事件
document.getElementById（"list"）.onclick = function（evt）{
var evt = evt || window.event,
target = evt.target || evt.srcElement;
if（target.id === "btn1"）{
// do something
}
}

10. 命名空间
复制代码 代码如下:
// An Object as a Namespace
var MYAPP = {};
MYAPP.dom.get = function（id）{};
MYAPP.style.css = function（el, style）{};
MYAPP.namespace（"event"）;

11. 链式操作
复制代码 代码如下:
// 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"）;

12. 私有作用域
复制代码 代码如下:
// Function
（function（）{
var _private = "cant see me";
}）（）;
（function（$）{
$（"#xxb"）.click（function（）{ }）;
}）（jQuery）;

13. 配置对象
复制代码 代码如下:
// Configure Object
function foo（id, conf, null , null）{
// do somethin
}
foo（"bar", {
key1 : 1,
key2 : 2
}）;

14. 类型转换
复制代码 代码如下:
// Type Conversion
+"010" === 10;
Number（"010"） === 10;
parseInt（"010", 10） === 10;
10 + "" === "10";
+new Date（） // timestamp
+new Date;

15. 扩展原型
复制代码 代码如下:
// 仅在需要向前兼容时才使用，其他情况不建议扩展原型对象
Array.prototype.forEach = function（）{
// only for forward compatible
};

16. 循环优化
复制代码 代码如下:
// 缓存
for（var i=0, j = document.getElementsByTagName（"a"）.length; i0; i--）{
// maybe faster
}
// 据说是最快的
while（i--）{
// maybe fastest
}

17. 尽量使用新特新
复制代码 代码如下:
Array.forEach（）;
getElementsByClassName（）;
querySlectorAll（）;
// 首先检测是否支持新特性，能用就用
if（document.getElementsByClassName）{
// use
}else{
// your implementations
}

18. 惰性载入
复制代码 代码如下:
// 只判断一次，再次调用该函数则无需判断
function lazyDef（）{
if（condition1）{
lazyDef = function（）{ };
}else if（condition2）{
lazyDef = function（）{ };
}
return lazyDef（）;
}

19. 私有函数与公共方法
复制代码 代码如下:
var MYAPP = {};
MYAPP.dom = （function（）{
var _setStyle = function（el, prop, value）{
console.log（"setStyle"）;
};
return {
setStyle: _setStyle
};
}）（）;
// 当 MYAPP.dom.setStyle 不慎被覆写时，_setStyle在内部仍然可用

20. 调试
复制代码 代码如下:
// 尽量使用，可以传入多个参数，最后输出拼接后的字符串
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
}
}

基本上目前想到的只有这些，欢迎大家补充讨论：）