web开发中UI层的松耦合

程序员文章站 2022-03-30 20:53:16

...

这次给大家带来web开发中UI层的松耦合，web开发中UI层松耦合使用的注意事项有哪些，下面就是实战案例，一起来看一下。

在Web开发中，UI是由三个彼此隔离又相互作用的层定义的。

HTML用来定义页面的数据和语义

CSS用来给页面添加样式，创建视觉特征

JS用来给页面添加行为，使其更具交互性

关于松耦合，容我废话几句。当你能够做到修改一个组件而不需要更改其他的组件时，你就做到了松耦合。对于多人大型系统来说，有很多人参与维护代码，松耦合对于代码可维护性来说至关重要。你绝对希望开发人员在修改某部分代码时不会破坏其他人的代码。当一个大系统的每个组件的内容有了限制，就做到了松耦合。本质上讲，每个组件需要保持足够瘦身来确保松耦合。组件知道的越少，就越有利于形成整个系统。

有一点需要注意：在一起工作的组件无法达到“无耦合”（no coupling）。在所有系统中，组件之间总要共享一些信息来完成各自的工作。这很好理解，我们的目标是确保对一个组件的修改不会经常性地影响其他部分。

如果一个 Web UI是松耦合的，则很容易调试。和文本或结构相关的问题，通过查找HTML即可定位。当发生了样式相关的问题，你知道问题出现在CSS中。最后，对于那些行为相关的问题，你直接去JS中找到问题所在，这种能力是Web界面的可维护性的核心部分。

WebPage时代，我们推崇将HTML/CSS/JS三层分离，例如禁止使用DOM的内联属性来绑定监听器，<button onclick=handler>test</button>这么写会被喷的。但是，WebApp时代下，以React为代表性的MVVM和MVC框架（严格来说，React只是个专注于View层的一个框架），它们都推崇你把HTML、CSS和JS写一块，经常就可以看到内联绑定事件监听器的代码。

你不禁在想，难道我们在走倒退路？

历史有时候会打转，咋一看以为是回去了。实际上是螺旋转了一圈，站在了一个新的起点。——玉伯《Web 研发模式演变》

传统WebPage时代，组件化支持程度不高，语言层面和框架层面上都是如此，想想没有原生不支持模块的JS（ES6之前的时代）和jQuery，所以为了避免增加维护成本，推崇三层分离的最佳实践。随着ES6与前端MV*框架的崛起，整个的前端开发模式都发生了变化。你会发现前端不仅仅是写页面了，写的更多的是WebApp，应用的规模和复杂程度与WebPage时代不可同日而语。

React就是其中极为典型的代表，它提出用JSX来写HTML，直接是将页面结构和页面逻辑写在了一块。这若放在WebPage时代，相信直接被当做反模式的典型教材；但在WebApp时代却为大多数人接受并使用。包括React团队提出的CSS in JS，更是想通过把CSS写在JS中，使得前端开发完全由JS主导，组件化做的更加彻底（CSS in JS我没有做更深的调研和理解，没有实际大型项目的实践经验，所以现在我还是保持观望态度，继续沿用之前的SASS和LESS来做CSS开发）。

尽管两个Web时代的开发模式发生了巨大变化，关于三层的松耦合设计，还是有一些通用原则你需要遵守：

将JS从CSS中抽离。早期的IE8和更早版本的浏览器中允许在CSS中写JS（不写例子，这是反模式，记不住更好），这会带来性能底下的问题，更可怕的是后期难以维护。不过我相信在座各位估计都接触不到这类代码了，也好。

将CSS从JS中抽离。不是说不能再JS中修改CSS，是不允许你直接去改样式，而是通过修改类来间接的修改样式。见如下示例：

// 不好的写法element.style.color = 'red';
element.style.left = '10px';
element.style.top = '100px';
element.style.visibility = 'visible';// 好的写法.reveal {  color: red;
  left: 10px;
  top: 100px;
  visibility: visible;
}
element.classList.add('.reveal');

由于CSS的className可以成为CSS和JS之间通信的桥梁。在页面的生命周期中, JS可以随意添加和删除元素的className。而className所定义的样式则在CSS代码之中。任何时刻,CSS中的样式都是可以修改的而不必更新JS。JS不应当直接操作样式，以便保持和CSS的松耦合。

有一种使用style属性的情形是可以接受的：当你需要给页面中的元素会作定位，使其相对于另外一个元素或整个页面重新定位。这种计算是无法在CSS中完成的，因此这时是可以使用style.top、style.left、style.bottom和style.rght来对元素作正确定位的。在CSS中定义这个元素的默认属性，而在 Javascript中修改这些默认值。

鉴于现在前端已经将HTML和JS写在一块的现状，我就不谈原书中如何将两者分离的实践了。但是，我说了这么多废话，请记住一点：“可预见性”(Predictability)会带来更快的遇试和开发，并确信（而非猜测）从何入手调试bug，这会让问题解决得更快、代码总体质量更高。

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！