zoukankan      html  css  js  c++  java
  • 编写可维护性的js读书笔记

    第一部分:格式要求
     
    1. 4个空格缩进。
    2. 行的长度不要超过80个字符,
    3. 语句超过的换行4个空格缩进(2个缩进)记住标点符号处不能换到下一行,
    4. 定义变量换行则换至等号后
     
    5. 添加适当的空行
       * for if每个流控制语句之前
       * 单行多行注释
       * 方法之间
       * 方法中局部变量与第一条语句
       * 方法中逻辑片段添加空行,提高可读性
     
    6. 命名
       * 变量以名词命名
       * 函数小驼峰命名,以动词开头,常见的动词约定
        * 常量用大写命名,分割用 _ (下划线)
        * 构造函数已大驼峰命名
     7. null和undefined
     
     
     
    8. 对象直接量
     9. 数组直接量

     10. 注释

        * 单行注释有空行,每个// 之间有一个空格,缩进相同
       * 多行注释
         
        * 文档注释要用/**    **/表示
     
    11. 语句与表达式
      1> 块语句间隔
          
      2> switch语句
           每个case前加一空行
           如果没有defalut,添加注释 // 没有default ,前面加空行
      3> for循环
          * 避免使用continue(只是退出本次循环迭代),可以使用if语句判断避免使用,避免使用with
          * 普通for循环是对数组进行遍历
          * for in是循环遍历对象属性,并返回属性名,在自定义中要使用hasOwnProperty()进行判断,若想查找原型 
             链可以不用判断但是需要添加注释说明
     
    12. 变量、函数、运算符声明
      1> 将所有变量声明到头部
         
          var语句合并成一句,每个变量独占一行,赋值符号对齐,未初始化变量放在后面
       2> 立即调用函数
           dosomething(item);   不用空格,与块语句分开
           将匿名函数复制给变量或属性,用括号括起来
         
        3>严格模式 "use strict"
           最好不要全局作用域中
           多次使用严格模式 
           
        4>相等时使用===和!==(最好都是用它)
        5>禁止使用eval(()除了在Json中使用,禁止使用Function构造函数
             setTimeout()和setInterval()禁止传入字符串,要用匿名函数传值
        6>尽量不使用原始包装类型(Number,String,Boolean),直接使用var a = "ada";
        7>  三元操作符应该用在条件赋值语句中    例如:var a = b ? c : d; //对的    b ? c : d //不好的
     
    13. 优化循环 
        1>不从i= 0开始,从最大值开始
        2>使用do while更高效
        3>展开循环,使用Duff或者优化Duff对于大型数据来说
        5>原生方法更快,switch更快,位运算更快
        6>最小化现场更新
            * 创建DOM树时  *  使用事件代理   * 注意HTMLCollection先使用变量声明
            * 在情况对getElementsByTagName()调用时    * 获取childNodes属性时
            * 获取attributes属性时     * 访问特殊属性时,如document.forms,document.images
     

    第二部分

     
    1. ui层的松耦合
       1>将js从css中抽离,在css中禁用expression函数嵌套js语句
       2>将css从js中抽离,将css样式用类名组装
       3>将js从html中抽离,在html中添加onclick事件等
       4>将html从js中抽离,使用模板,可以自己写一个简单的模板,也可以使用handlebars模板
     
    2. 避免使用全局变量 
        1>避免意外的全局变量,在声明是var a = 1;b = 2;      b为全局变量了
        2>使用命名空间 var a = {}; a.b = {};  a.c = {} 或使用模块
     
    3. 事件处理
    在处理事件时,将应用逻辑隔离(这样其他事件可以进行复用回调函数)并且 在传参时,不要传入事件对象event,代码逻辑不清晰
     
    4.检测类型
       1>检测基本类型:
         * typeof独特之处在于 判断未定义的变量和值为undefined  都会返回undefined
         * typeof a === ’string’    b === ‘number’      c === ‘boolean’ && c      d === ‘undefined'
       2>引用值:
          * typeof {}   [2, 3]   new Date()  new RegExp()  都为object
          * null:也为   object
          * function :返回function
       3>检测引用值(检测引用值使用instanceof)
           * value instanceof Object     value instanceof Array   value instanceof Date 
              value instanceof RegExp   value instanceof Error
            * instanceof不仅只检测构造这个对象的构造器,还检测他的原型链
               var a = new Date();
               a instanceof Object  //true   a instance Date  //true
            * 检测自定义类型,也是唯一的方法
              function Person(name) {this.name = name}      var me = new Person(’nana’);
              me instanceof Object   me instanceof Person //me
            * 缺点:不能跨帧使用
        4>检测function
             * func instanceof Function //不能跨帧
             * typeof func   //可以frame但是在ie8之前有限制
                例如: console.log(typeof document.getElementById);  //object
                是因为浏览器对DOM的实现由差异,导致将函数识别为对象,  所以使用
             * if(“querySelectAll” in document) {}   使用querySelectAll判断在ie8之后使用,这是最安全的做法
        5>检测数组;
            js中最古老的跨域问题之一就是在frame之间来回传递数组,每个frame之间都有各自的Array构造函数,因此一个frame的实例在另外的个 frame中无法识别。所以可以使用下面的方法判断数组
           * Object.prototype.toString.call(value) === “[Object Array]"
             因为某个值的内置toString()方法都在所有浏览器返回标准的字符串结果
           * es5中的 * Array.isArray()
        6>检测属性
           * a in obj 
           * obj.hasOwnProperty()
        7>当获取节点时,如果dom节点不存在则通过document.getElementById()得到的值为null,可以用=== 和!==判断
     
    5. 将配置数据从代码中分离出来
       对于url,需要展现给用户的字符串,重复的值,设置(比如每页的配置项),任何可能发生变更的值都可以将数据抽离出来,也利于后期的维护
     
    6. 使用try catch
       try{
            //有些代码已发了错误
       } catch(ex) {
           //处理错误
        }
       可以避免js代码出错时,整个程序都不执行,必要的时候可以进行添加
     
    7. 不是你的对象不要动
       1> 不覆盖方法
           例如:document.getElementById = function() {return null;} //这样会使js库以及依赖的方法都失效 
       2> 不新增方法:
            例如:document.a = function() {} Array.prototype.a = function() {} YUI.a = function() {},不要在dom上、原生对象上、以及库对象上添加方法,会导致命名冲突
       3> 不删除方法
            例如:document..getElementById = null;
             delete document.getElementById 不受影响,因为document.getElementById()是原型上的一个方法,使用delete无法删除
       4>更好的途径,通过继承
             * 基于对象的继承:使用Object.create(),可以更改原有的方法,一旦已这种方式创建了一个新对象,该新对象就可以随意修改
            * 基于类型的继承:这种方式是通过构造函数实现的而非对象,对于开发者定义了构造函数的情况下,基于类型的继承最合适。
            *如果继承满足不了那就可以使用门面模式,用不同的接口来包装已存在的对象,也就是将内容封装起来
     
    8. 阻止修改
       1>防止扩展(禁止添加属性方法):
           * 使用Object.preventExtension(obj)  ,可以用Object.isExtensible()进行判断是否被锁定
           * 在非严格模式下新增方法会悄无生息的添加失败,严格模式下回抛出错误
       2>密封(禁止删除属性方法):
            * 使用Object.seal(obj)  ,可以用Object.isSealed(obj)进行判断是否被密封,规则同上
            * 被密封的对象同时也是不可扩展的,所以调用Object.isExtensible(obj)也是false
       3>冻结(禁止修改属性方法)
           * 使用Object.freeze(obj)  ,可以用Object.isFrozen()进行判断是否被锁定,规则同上
            * 被冻结的对象同时不可扩展和密封,所以都会返回false
     
    9. Jenkins是目前最广泛使用的CI系统之一,一个基于java的web应用程序,用于多个版本的管理,集成了多个源代码控制库,Jenkins原生支持Ant和Shell脚本
     
    10. 浏览器特性检测
  • 相关阅读:
    101. Symmetric Tree(js)
    100. Same Tree(js)
    99. Recover Binary Search Tree(js)
    98. Validate Binary Search Tree(js)
    97. Interleaving String(js)
    96. Unique Binary Search Trees(js)
    95. Unique Binary Search Trees II(js)
    94. Binary Tree Inorder Traversal(js)
    93. Restore IP Addresses(js)
    92. Reverse Linked List II(js)
  • 原文地址:https://www.cnblogs.com/nalixueblog/p/5990490.html
Copyright © 2011-2022 走看看