JavaScript基本编码模式小结


Posted in Javascript onMay 23, 2012

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

基本上目前想到的只有这些,欢迎大家补充讨论:)
Javascript 相关文章推荐
JS的千分位算法实现思路
Jul 31 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
angular.element方法汇总
Jan 07 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
Javascript处理DOM元素事件实现代码
May 23 #Javascript
面向对象Javascript核心支持代码分享
May 23 #Javascript
Package.js  现代化的JavaScript项目make工具
May 23 #Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 #Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 #Javascript
setTimeout的延时为0时多个浏览器的区别
May 23 #Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 #Javascript
You might like
PHP 开发工具
2006/12/06 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
JavaScript XML操作 封装类
2009/07/01 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
document.write的几点使用心得
2014/05/14 Javascript
js获取字符串最后一位方法汇总
2014/11/13 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
Python合并多个装饰器小技巧
2015/04/28 Python
在类Unix系统上开始Python3编程入门
2015/08/20 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
python可视化实现KNN算法
2019/10/16 Python
python 读取二进制 显示图片案例
2020/04/24 Python
python字典与json转换的方法总结
2020/12/28 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
高中数学教学反思
2014/01/30 职场文书
高校教师岗位职责
2014/03/18 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
罚站检讨书
2015/01/29 职场文书
食品质检员岗位职责
2015/04/08 职场文书
法律服务所工作总结
2015/08/10 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技