最佳实践
前言
《Javascript高级程序设计》最佳实践
1 可维护性
- 可理解性
- 直观性
- 可适应性
- 可扩展性
- 可调试性
总结:
要做到可维护性、可读性强的代码,至少完成以下几点
-
函数注释(功能、参数、返回值)
/** * 功能描述 * * @param {参数类型}参数名 参数说明 * @return {返回值类型} 返回值说明 */ function fn(p1, p2) { // 参数类型:fn、Number、String、Boolean、Array、Object }
-
完成独立功能的大段代码,写功能注释
-
有意义的变量名、函数名,驼峰命名
2 降低耦合
耦合:两个模块之间的输入与输出的联系紧密,相互影响过多
代码耦合过紧会导致模块难以维护,修改一处的同时另一处也需要修改,降低了我们的开发效率。
2.1 将css从js中抽离
// bad
element.style.color = '#FFF';
element.style.width = '30px';
element.sytle.display = 'block';
// good
.show {
// css
color: #FFF;
width: 30px;
display: block;
}
element.className += 'show';
2.2 模板文本写注释
需要JS动态生成的HTML内容,在父元素下写上模板的注释,易于后期维护
<ul id="mylist">
<!-- <li><a href="1">First item</a></li> -->
</ul>
2.3 应用逻辑 / 事件处理程序分离
2.3.1 概念
什么是事件处理程序:
事件就是用户或浏览器自身执行的某种动作。比如说 click,mouseover,都是事件的名字。而相应某个事件的函数就叫事件处理程序
什么是应用逻辑:
被事件处理函数触发的一些动作,比如对元素的颜色、宽度等属性进行操作
为什么要分离:
- 方便更改触发事件的方式,比如从鼠标点击事件切换成按键事件
- 可以直接测试应用逻辑代码,无需通过特定事件
2.3.2 Demo
按下Enter键,div移动
document.onkeydown = function handle1(event) {
if (event.keyCode === 13) {
div.style.left = 100 + 'px';
div.style.top = 100 + 'px';
}
}
一般这样写并没有什么问题
加功能:点击document对象,div移动到鼠标位置
document.onclick = function handle2(event) {
div.style.left = event.clientX + 'px';
div.style.top = event.clientY + 'px';
}
这样里面的代码就重复了
分析一下代码
// handle1是事件处理函数,判断是否是Enter键按下
document.onkeydown = function handle1(event) {
if (event.keyCode === 13)