当前位置:Gxlcms > JavaScript > web开发中UI层的松耦合

web开发中UI层的松耦合

时间:2021-07-01 10:21:17 帮助过:40人阅读

这次给大家带来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,这会让问题解决得更快、代码总体质量更高。

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

推荐阅读:

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

如何做出node.js界面

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

人气教程排行