管理资源吧首页>>>教程>>>编程>>>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

　　}

　　}

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

教程首页 更多教程