编写可维护的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);
