编写可维护的前端代码

最近在看JavaScript高级程序设计，看到可维护代码的编写，作一下笔记与总结，方便之后查看。

1.代码约定

1.1可读性

• 代码的格式化 使用若干个空格来进行缩进，由于制表符在不一样编辑器种的显示效果不一样
• 注释
  函数和方法 注明参数，返回值，前提假设....
  大段代码
  复杂的算法 说明算法逻辑，方便别人查看，也方便本身查阅
  Hack 说明浏览器的差别，防止别人修改时没考虑到误删...

1.2 变量和函数命名

• 不要使用没有意义或容易引发歧义的名字，如：foo，doSomething...
• 变量名尽可能用名词，如： car，person....
• 函数名用动词开始，如：getName(); 返回值为boolean用 is 开头
• 变量和函数使用能够说清楚方法做用和变量含义的名称，不要担忧长度，后期能够压缩

1.3 变量类型透明

类型透明也就是在变量定义的时候能够知道变量的类型

主要有如下三种方式：

• 初始化变量

  var found = false; // boolean
  var count = -1; // number

  缺点：不能使用在函数声明中的函数参数（如今经过ES6中的函数参数初始化解决）

• 使用匈牙利标记法 o表示对象，s表示字符串...

  var bFound; // boolean
  var iCount; // int

  缺点：代码难以阅读

• 使用类型注释 类型注释放到变量名右边，初始化前面

  var found /*:Boolean*/ = false;
  var count /*:int*/ = -1;

  缺点：不能使用js多行注释

• 使用typeScript（终极）

2.松散耦合

2.1 解耦HTML/JavaScript

JavaScript中使用HTML

• 不要使用js插入HTML，能够经过在页面中隐藏元素，当页面渲染后，经过js显示该元素，而不是生成
• 经过Ajax请求获取HTML

HTML中使用JavaScript

• 将js文件写成独立文件，script标签引入

2.2 解耦CSS/JavaScript

• 经过动态修改样式类，而不是修改特定样式

  // 不建议写法
  element.style.color = 'red';
  element.style.backgroundColor = 'blue';
  
  // 建议写法
  // css
  .dit{
      color: red;
      background-color: blue;
  }
  
  // js
  element.className = 'edit';

2.3 解耦应用逻辑/事件处理程序

有如下几条原则：

• 勿将event对象传给其余方法，只传函数中须要的数据
• 任何能够在应用层面动做都应该能够在不执行任何事件处理程序的状况下进行

• 任何事件处理程序都应该处理事件，而后将处理转交给应用逻辑

  // 不建议写法
  function handleKeyPress(event){
      if(event.keyCode === 13){
          var target = event.target;
          var value = 5 * parseInt(target.value);
          if(value > 10){
              document.getElementById('id').style.display = 'block';
          }
      }
  }
  
  // 建议写法
  // 好处：若是我点击鼠标也执行相同逻辑，那么直接调用validateValue就能够了
  // 应用逻辑
  function validateValue(value){
      value = 5 * parseInt(value);
      
      if(value > 10){
          document.getElementById('id').style.display = 'block';
      }
  }
  
  // 事件处理程序
  function handleKeyPress(event){
      if(event.keyCode === 13){
          var target = event.target;
          validateValue(target.value);
      }
  }

3.其余

3.1 尊重对象全部权

简单点说就是否是你本身的建立或者维护的某个对象，他的对象和方法，不能修改

具体说：

• 不要为实例或原型添加属性或方法
• 不要从新定义已存在的方法

3.2 避免全局变量

最多建立一个全局变量，其余对象或函数保存在其中，其中有个概念叫作命名空间

命名空间就是指用来放置页面功能的对象

// 命名空间
let YAHOO = {};

YAHOO.util.Dom 
YAHOO.util.Event
....

3.3 避免与null进行比较

判断一个是否为null 若是直接比较是使用过分的，而且因为比较不充分可能致使错误，
因此在判断一个值的类型的时候要与指望的类型进行比较，而非不被指望的那些

// value 指望一个Array
if(value !== null){
    // do something....
}

// 建议
if(value instanceof Array){
    // do something....
}

下面列举一下判断数据类型的方法

• 判断基本类型，使用typeof
• 判断引用类型，可使用instanceof
• 判断是否为函数，也可使用typeof
• 判断是否为undefined,使用typeof,不要直接===判断，若是函数没有声明，那么会报错
• 全部类型均可以使用Object.prototype.toString.call

let ts = Object.prototype.toString;

ts.call([]) === '[Object Array]'; // true
ts.call(123) === '[Object Number]'; // true
ts.call({}) === '[Object Object]'; // true
....

3.4 使用常量

使用常量能够避免魔术字符串，也能够帮助构建国际化

建议使用常量的几种状况：

• 重复值 --- 任何多处使用到的值
• 用户界面字符串 --- 方便国际化
• URLs --- 推荐用一个公共地方专门存放全部的URL
• 任意可能变动的值 --- 若是是之后可能变动的值，都应该提取出来做为一个常量