博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript基本编码模式
阅读量:5144 次
发布时间:2019-06-13

本文共 4311 字,大约阅读时间需要 14 分钟。

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. 设置默认值(个人感觉typeof)// Default valuesvar arg = arg || 'default';  // fallback document.getElementById('test').onclick = function(event){    var event = event || window.event;}; function getX(a){    return a+1 || 'default';}
function getY(b){
  return typeof b !== "undefined" ? b : 'default';
} 5. 条件判断// Conditionsanswer = 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. 三元操作符// Ternarycheck ? 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 iterationvar name = value[i]; i++; // 直接将迭代值插入var name = value[i++];  8. DOM操作// DOM Operationel.style.display = 'none'; // offline // operationel.style.display = 'block'; // 使用文档碎片操作更好 www.2cto.com var fragment = document.createDocumentFragment(); // better el.innerHTML = ''; // fast remove all children, but may leaks memoryel.innerHTML = 'xxx'; // ok, use it! // 小心处理NodeListvar 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 Namespacevar MYAPP = {}; MYAPP.dom.get = function(id){}; MYAPP.style.css = function(el, style){}; MYAPP.namespace('event');  11. 链式操作// Chaining operation: return thisfunction 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 Objectfunction 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 }}

 

转载于:https://www.cnblogs.com/sntetwt/archive/2013/03/19/2969434.html

你可能感兴趣的文章
SQL Server 2005 实现数据库同步备份 过程--结果---分析
查看>>
Qt中实现无边框的窗体
查看>>
Java:反射
查看>>
用python从redis的有序集合中一次性删除多个值
查看>>
SQL 数据优化之不建立索引的情况
查看>>
python编码问题总结
查看>>
数独问题--github网址:
查看>>
centos7 - mysql修改密码
查看>>
我给女朋讲编程网络系列(2)--IIS8 如何在本地发布网站
查看>>
我给女朋友讲编程总结建议篇,怎么学习html和css
查看>>
Selenium记录
查看>>
python 学习总结2 多进程与协程
查看>>
avm2 pcode 学习笔记。高手勿笑
查看>>
codeforce344 C report
查看>>
汇编笔记 RET
查看>>
Developer Friendly | 基础设施即代码的事实标准Terraform已支持京东云!
查看>>
vue中v-bind:class动态添加class
查看>>
nginx源码包安装
查看>>
【BZOJ 1588】 [HNOI2002]营业额统计
查看>>
2012重新开始的
查看>>