编写可维护的javascript(五):UI层的松耦合
来源:互联网 发布:js 更改表单action 编辑:程序博客网 时间:2024/05/22 07:40
松耦合
当你能做到修改一个组件而不需要修改其他的组件时,你就做到了松耦合。
将Javascript从CSS中抽离
在IE8和更早的版本,存在CSS表达式。CSS表达式允许你讲Javascript直接插入到CSS中,这样可以在CSS代码中直接执行运算或其他操作。如:
.box { width: expression(document.body.offsetWidth + 'px'); }
CSS表达式包裹在一个特殊的expression() 函数中,可以给它传递任意Javascript代码。但这对于代码维护来说是一场噩梦。IE9不再支持CSS表达式。
2017年3月,微软宣布 Edge 浏览器将支持 CSS 变量。(详细可参见阮一峰老师的这篇文章)
http://www.ruanyifeng.com/blog/2017/05/css-variables.html
将CSS从Javascript中抽离
CSS和Javascript之间清晰的分离是很有挑战的,这两门语言相互协作的很不错,所以经常讲样式数据和Javascript混写在一起。比如:
// bad element.style.color = "red"; element.style.left = '10px';
将CSS从Javascript中抽离意味着所有的样式信息应该保持在CSS中。当需要通过JavaScript来修改元素样式的时候,最佳方法是操作CSS的className,比如:
.reveal{ color: red; left: 10px; top: 100px; visibility: visible; } // good(js原生方法) element.className += "reveal";
CSS的className可以成为CSS和JavaScript之间通信的桥梁。任何时刻CSS的样式都是可以修改的,而不必更新Javascript。Javascript不应当直接操作样式,以便保持和CSS的松耦合。当然有一种使用style属性的情形是可以接受:当你给页面的元素作定位的时候,并且通过计算(计算无法再CSS中完成),此时可以使用style.top等等。
将Javascript从HTML中抽离
// bad <button onclick="doSomething()" id="action-btn">Click me</button> // good function doSomething() { // 代码 } var btn = document.getElementById('action-btn'); btn.addEventListener("click",doSomething, false);
下面写法的优势在于,函数doSomething() 的定义和事件处理程序的绑定都是在一个文件中完成的。如果函数名称需要修改,只需要修改一个文件。
在HTML中嵌入Javascript的另一种方法就是使用script标签,标签内包含内联的脚本代码,如下:
<!-- bad --> <script> doSomething(); </script>
最好将所有的Javascript代码都放入外置文件中,以确保在HTML代码中不会有内联的Javascript代码。
文章内容从《编写可维护的Javascript》[美] Nicholas C. Zakas著 一书中总结写出。
- 编写可维护的javascript(五):UI层的松耦合
- 编写可维护的JavaScript
- 《编写可维护的javascript》
- 编写可维护的javascript
- 如何编写可维护的JavaScript代码?
- 编写可维护的JavaScript读书笔记(1)
- 编写可维护的JavaScript读书笔记(2)
- 编写可维护的JavaScript(一)
- 读书笔记:编写可维护的javascript
- 《编写可维护的JavaScript》笔记
- 编写可维护的Javascript代码
- 《编写可维护的javascript》笔记
- 编写可维护的javascript读书笔记
- 《编写可维护的JavaScript》- 读书笔记
- 编写可维护的 JavaScript 笔记 (6
- 编写可维护的 JavaScript 笔记 (11
- JavaScript编写可维护的代码。
- 编写可维护的javascript(一):基本的格式化
- 设置div的宽度从0加到100,从100减到0,反复执行
- Oracle安装填坑
- 多校联合赛第一场 Balala Power
- opencv3.0+VS2015+64位win7配置
- Spring注入集合值
- 编写可维护的javascript(五):UI层的松耦合
- 最简单的IOS
- J2EE学习笔记(一)之JSP原理详解
- 有趣的树
- Anaconda使用总结(转载)
- Android使用Minio对象存储服务API
- c语言for循环变量i,i的定义位置不同会导致错误
- hadoop源码解析一之hadoop jmx 监控
- python中的urlencode与urldecode