编写可维护的JAVASCRIPT 读书笔记

• 缩进层级：4个空格字符为一个缩进层级
• 行的长度：单行不超过80个字符
• 换行：在运算符后换行（避免自动插入分号而造成的错误），第二行追加两个缩进
• 变量命名：驼峰法、命名前缀应当是名词
• 函数命名：驼峰法、命名前缀应当是动词
• 常量命名：全大写字母和下划线
• 构造函数：首字母大写
• 创建对象：使用对象直接量
• 创建数组：使用数组直接量

注释

• 注释之前总有一个空行，且缩进层级和下一行代码保持一致
• 注释和代码之间至少有一个缩进
• 多行注释

/*
 * 注释注释
 * 注释注释
 */
var count = 28;

• for in 循环用来遍历对象属性，会遍历原型上的属性，用hasOwnProperty()来过滤出实例属性
• 函数声明不应当出现在语句块之内

严格模式

• 最好不要在全局作用域中使用‘use strict’
• 如果希望在多个文件中应用严格模式而不必写很多‘use strict’，可以使用立即执行函数

(function() {
  'use strict';
  function doSomething() {

  }
  function doSomethingElse() {

  }
})();

将css从javascript中抽离

// 不好的写法
// 当出现样式问题，会通常查找css而非js
element.style.color = "red";

// 解决方法： 操作css的classname
element.className += 'newClass';

事件处理

function handleClick(event) {
  var popup = document.getElementById('popup');
  popup.style.left = event.clientX + 'px';
  popup.style.top = event.clientY + 'px';
  popup.className = 'reveal';
}
// 封装过的事件监听函数
addListener(element, 'click', handleClick);

这段代码第一个问题是事件处理程序包含了应用逻辑。
应用逻辑是和应用相关的功能性代码，而不是和用户行为相关的。

将应用逻辑从所有事件处理程序中抽离出来的做法是一种最佳实践。
这样多个事件的处理程序执行了同样的逻辑，而你的代码缺不用拷贝多份

将应用逻辑放置于事件处理程序中的另一个缺点是和测试有关的。
测试时需要直接触发功能代码，而不必通过模拟元素的点击来触发。

var MyApplication = {
  handleClick: function (event) {
    this.showPopup(event);
  },
  showPopup: function (event) {
    var popup = document.getElementById('popup');
    popup.style.left = event.clientX + 'px';
    popup.style.top = event.clientY + 'px';
    popup.className = 'reveal';
  }
}
// 封装过的事件监听函数
addListener(element, 'click', function(event) {
  MyApplication.handleClick(event);
});

上述代码还存在一个问题，即event对象被无节制地分发。

• 没有表明哪儿些数据是必要的。好的API一定是对于期望和依赖都是透明的。
• 测试这个方法时，你必须重新创建一个event对象并将它作为参数传入。

最佳办法是让事件处理程序使用event对象来处理事件，
然后拿到所有需要的数据传给应用逻辑。

var MyApplication = {
  handleClick: function (event) {

    // 当处理事件时，最好让事件处理程序成为接触到event对象的唯一函数。
    event.stopPropagation(); // 阻止事件冒泡
    this.showPopup(event.clientX, event.clientY);
  },
  showPopup: function (x, y) {
    var popup = document.getElementById('popup');
    popup.style.left = x + 'px';
    popup.style.top = y + 'px';
    popup.className = 'reveal';
  }
}
// 封装过的事件监听函数
addListener(element, 'click', function(event) {
  MyApplication.handleClick(event);
});

在测试或代码的任意位置都可以很轻易地直接调用这段逻辑：

MyApplication.showPopup(10, 10);