欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

web开发中UI层的松耦合

程序员文章站 2022-04-23 09:57:35
...
这次给大家带来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,这会让问题解决得更快、代码总体质量更高。

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

推荐阅读:

怎样利用JS做出引用传递与值传递

如何做出node.js界面

以上就是web开发中UI层的松耦合的详细内容,更多请关注其它相关文章!

相关标签: web 耦合 开发