zoukankan      html  css  js  c++  java
  • 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. 设置默认值(个人感觉typeof)

    // 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';
    }

    function getY(b){
      return typeof b !== "undefined" ? b : '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
        }
    }
    

      

    http://44ux.com/index.php/2012/05/basic-javascript-coding-pattern/

     

  • 相关阅读:
    【LeetCode】70. 爬楼梯
    C++Socket编程—socket网络模型之IOCP
    leetcode_买卖股票_dp状态机
    leetcode_买卖股票_暴力递归
    tensorflow正则化
    程序员掌握这些面试技巧,成功上岸!
    阶段二Linux 高级编程:Linux基础命令三019
    阶段二Linux 高级编程:Linux基础命令二018
    阶段二Linux 高级编程:Linux基础命令一017
    阶段一Python核心编程:面向对象版学员管理系统016
  • 原文地址:https://www.cnblogs.com/zsk526/p/2514355.html
Copyright © 2011-2022 走看看