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 相关文章推荐
javascript引用对象的方法代码
Aug 13 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
JavaScript继承与聚合实例详解
Jan 22 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
JS可断点续传文件上传实现代码解析
Jul 30 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 多维数组排序(usort,uasort)
2010/06/30 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
Yii清理缓存的方法
2016/01/06 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
python连接数据库的方法
2017/10/19 Python
Python实现翻转数组功能示例
2018/01/12 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
小学教师学期末自我评价
2013/09/25 职场文书
财务会计人员岗位职责
2013/11/30 职场文书
国际贸易个人求职信范文
2014/01/04 职场文书
环保建议书100字
2014/05/14 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
优秀党员推荐材料
2014/12/18 职场文书
2015年检验科工作总结
2015/04/27 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python