JavaScript基本编码模式小结
更新时间：2012年05月23日 21:20:03 作者：
本文中笔者整理的这些模式包含了编写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
}
}
基本上目前想到的只有这些，欢迎大家补充讨论：）
下面是笔者整理的一些点，没有什么逻辑顺序，想到哪儿写到哪儿了，不足之处欢迎大家补充指正。
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
}
}
基本上目前想到的只有这些，欢迎大家补充讨论：）
相关文章
这篇文章主要介绍了详解JavaScript中的forEach()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
由于浏览器同源策略的限制,非同源下的请求,都会产生跨域问题,jsonp即是为了解决这个问题出现的一种简便解决方案,下面这篇文章主要给大家介绍了关于JSONP跨域原理以及实现的相关资料,需要的朋友可以参考下2022-06-06
你需要一个防止错误产生的机器，可以理解CSS并且理解你:你的意图、喜好、主意以及弱点。 只要是它可以阻止的错误它都会持续阻止。同时，你和你的同事可以一直改善机器，扩展它的功能并且削弱其局限性。2016-04-04
这篇文章主要为大家介绍了JavaScript稀疏数组的使用示例教程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
javascript中attribute和property的区别详解
这篇文章主要介绍了javascript中attribute和property的区别详解,attribute和property对新手来说,特别容易混淆概念,本文就清晰的讲解了它们的区别,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了S的组成与基本语法，JS 主要是用来开发前端,但是也可以做别的,JS 现在是一个 "通用" 的编程语言，感兴趣的小伙伴可以参考阅读2023-04-04
这一章详细介绍的表单错误提示的方法比那种大多数使用警告框的方法要好的多。2010-02-02
新手入门常用代码集锦...2007-01-01
JS数组在直接赋值时属于数组的浅拷贝，新数组保存的是原数据的内存地址，修改新数组或原数组其中一个数组，另一个数组也会相应的变化，数组的直接赋值属于数组的浅拷贝，JS存储对象都是存内存地址2022-10-10
javascript编程起步（第四课）...2007-02-02
最新评论