第二部编程实践
UI层的松耦合
本章作者主要讲解了:
- css和JavaScript之间的相互抽离
- HTML和JavaScript之间的相互抽离
虽然现代前端框架已经对这些进行了抽离,但作者的思想还是很值得学习的: 保证对应的代码在对应的位置: 样式相关代码只出现在css文件中,交互逻辑只出现在js中,有时我们在css中查找原因,但最终发现问题原因深埋在js中,这时就会发现做相互的抽离是很重要的!
什么是松耦合
当修改了一个组件而不需要修改其他组件时,就做到了松耦合,本质上每个组件知道的越少,越有利于降低系统整体的耦合性.当然不可能没有无耦合的系统,我们的目标是确保一个组件的修改不会经常性的影响其他部分.
JavaScript从CSS中抽离
- 不要在css中使用js(在老版本IE中支持)
CSS从JavaScript中抽离
- 在JS中操作样式最佳的方式是操作类名,对于css无法实现的效果才在js中实现
className是css和js之间的通信桥梁,以便于保证css与js的松耦合
JavaScript从HTML中抽离
举一个紧耦合的例子:
<button onclick="doSmeothing" >Click</button>
为什么说这种写法是紧耦合的呢,原因有两点:
- 试想一下,当包含
doSomething函数的代码从外部文件加载失败,那么用户点击就会发生错误,或者点击没有响应 - 如果后期
doSomething函数的名字更换了,我们既要修改js又要修改HTML
如何抽离:
绝大多数的js应该包含在外部文件中并在页面中通过<script>标签引入
HTML从JavaScript中抽离
将HTML嵌入js代码中主要存在两个问题:
- 增加了文本和结构性问题追踪的复杂度
- 代码可维护性较低,如果想要修改一个标签,你只希望去一个地方修改,那就是可以控制你HTML代码的地方,如果HTML文件和js文件都参与很深,排查的时候就不得不将两个地方都进行排查了
作者推荐通过模板的方式,完成js与HTML的解耦,现代框架已经实现这个思想了
