金沙澳门官网网址解耦你的HTML

作者: 前端知识  发布:2019-09-06

多个类选择器的职责

一个类选择器往往是用来同时作为样式和JavaScript的钩子。虽然这看起来似乎很节约(因为至少减少了一个类标记),但事实上,这是把元素的表现和功能耦合起来了。

XHTML

<button class="add-item">Add to Cart</button>

1
<button class="add-item">Add to Cart</button>

以上例子描述了一个带有add-item类样式的”添加到购物车”按钮。

如果开发者想为此元素添加一个单击事件监听器,用已经存在的类选择器作为钩子非常的容易。我的意思是,既然已经存在了一个,为何要添加另一个呢? 但是想想看,有很多像这样的按钮,遍布了整个网站,都调用了相同的JavaScript功能。再想想看,如果市场团队想要其中一个和其它看起来完全不同但功能相同的按钮呢。也许这样就需要更多显著的色彩了。

问题就来了,因为监听单击事件的JavaScript代码希望add-item类选择器被使用到,但是你新的按钮又无法使用这个样式(或者它必须清除所有声明的,然后再重置新的样式)。还有,如果你测试的代码同时也希望使用add-item类选择器,那么你不得不要去更新那么代码用到的地方。更糟糕的是,如果这个”添加到购物车”功能不仅仅是当前应用用到的话,也就是说,把这份代码抽象出来作为一个独立的模块,那么即使一个简单的样式修改,可能会在完全不同的应用中引发问题。

使用javaScript钩子最好的(事实上也是比较鼓励的)做法是,如果你需要这么做,使用一种方式来避免样式和行为类选择器之间的耦合。

我的个人建议是让JavaScript钩子使用前缀,比如:js-*。这样的话,当开发者在HTML源代码中看到这样的类选择器,他就完全明白个中原因了。所以,上述的”添加到购物车”的例子可以重写成这样:

XHTML

<button class="js-add-to-cart add-item">Add to Cart</button>

1
<button class="js-add-to-cart add-item">Add to Cart</button>

现在,如果需要一个看起来不同的按钮,你可以很简单地修改下样式类选择器,而不管行为的类选择器。

XHTML

<button class="js-add-to-cart add-item-special">Add to Cart</button>

1
<button class="js-add-to-cart add-item-special">Add to Cart</button>

今天大一点的web公司,越来越多的人接触越到比例越来越大的前端代码。因此,大多数公司努力保持他们的代码模块化。改变一个应用程序的一部分经常无意中影响到看似不相关的其他部分。

JavaScript”选择器”

jQuery和新的API,像document.querySelectorAll,让用户非常简单地通过一种他们已经非常熟悉的语言–CSS选择器来查找DOM中的元素。虽然如此强大,但同样有CSS选择器已经存在的相同的问题。JavaScript选择器不应过度依赖于DOM结构。这样的选择器非常慢,并且需要更深入认识HTML知识。

就第一个例子来讲,负责HTML模板的开发者应该能在标记上做基本的改动,而不需担心破坏基本的功能。如果有个功能会被破坏,那么它就应该在标记上显而易见。

我已经提及到应该用js-*前缀的类选择器来表示JavaScript钩子。另外针对消除样式和功能类选择器之间的二义性,需要在标记中表达出来。当某人编写HTML看到js-*前缀的类选择器时,他就会明白这是别有用途的。但如果JavaScript代码使用特定的标记结构查找元素时,正在触发的功能在标记上就不那么明显了。

为了避免使用冗长而又复杂的选择器遍历DOM,坚持使用单一的类或者ID选择器。 考虑以下代码:

JavaScript

var saveBtn = document.querySelector("#modal div:last-child > button:last-child")

1
var saveBtn = document.querySelector("#modal div:last-child > button:last-child")

这么长的选择器是可以节省你在HTML中添加一个类选择器,但同样让你的代码对于标记更改非常容易受到影响。如果设计者突然决定要把保持按钮放在左边,而让取消按钮放在右边,这样的选择器就不再匹配了。

一个更好的方式(使用上述的前缀方法)是仅仅使用类选择器。

JavaScript

var saveBtn = document.querySelector(".js-save-btn")

1
var saveBtn = document.querySelector(".js-save-btn")

现在标记可以更改它想改的,并且只要类选择还是在正确的元素上,一切都会很正常。

注:本文为翻译文章,原文<Decoupling Your HTML, CSS, and JavaScript>

关于作者:蝈蝈

金沙澳门官网网址 1

(新浪微博:@烈焱石) 个人主页 · 我的文章

金沙澳门官网网址 2

在本文中,我将谈谈我是如何学会分离我的HTML、CSS和JavaScript。据我的经验和我所知道的其他人的经验,完成目标的最好的方式是不明显,反直觉的,有时不利于大量所谓的“最佳实践”的。

结论

可维护的HTML,CSS和JavaScript的标志是每个开发者可以容易并且很自信地编写代码库的每个部分,而不需担心这些修改会无意中影响到其它不相关部分。阻止这样意想不到的后果的最佳方式之一是,通过一组能够表达其义的,任何开发者碰到时能想出它的用途的,可预测的人性化的类选择器名,把这三者技术结合在一起。

为避免上述的反模式,请把下述的原则谨记于心:

  • 1. 在CSS和JavaScript里,优先考虑显式组件和行为类选择器,而不是复杂的CSS选择器。
    1. 命名组件要基于它们是什么,而不是它们在哪里
    1. 不用为样式和行为使用相同的类选择器去
    1. 把状态样式和默认样式区分开来

在HTML中这样运用类选择器经常会需要很多需要表现的类选择器,但获取的是可预见性和可维护性,这点值得肯定。毕竟,为HTML增加类选择器是相当容易的,不需要开发者有多少技能。摘自Nicolas Gallagher的原话:

当你要寻找一种方式来减少花费在编写和修改CSS的时间上来制作HTML和CSS时,这就涉及到你必须接受如果你想更改样式,你是不想花费更多时间去更改HTML元素上的类选择器。这对前端和后端开发者都有一定的实用性,任何人都可以重新安排预构建的乐高积木。这样没有人会去展示CSS的魔力了。

1 赞 收藏 2 评论

今天在web上任何大一点的网站或应用程序都包含大量的html,css和javascript。随着互联网的发展和我们对互联网越来越依赖,计划组织和维护你的前端代码是绝对必要的。

未来

网页超文本技术工作小组(WHATWG)正在致力于web组件的规范,能让开发者把HTML,CSS和JavaScript绑定一起作为一个单独的组件或者模块,并与其它的页面元素进行交互封装。如果这个规范已经在大多数的浏览器中实现的话,那么我在本文中提供的很多建议就变得不那么重要了(因为代码和谁交互变得很清晰);但是无论如何,理解这些更广泛的原则以及为何需要它们仍然很重要。即使这些实践在Web组件时代会变得不那么重要,但其中的理论仍然适用。在大型团队和大型应用中的实践仍然要适用于小模块的编写中,反之则不需要。

类是你的钥匙

几乎所有类型的HTML、CSS和JavaScript之间的耦合可以被减轻通过适当的使用的类和一个可预测的类命名约定。

乍一看在标记中使用大量的类这可能看起来像一个高耦合的信号,因为HTML需要知道这些类的名字。但我认为使用类的做法非常类似传统的程序设计事件模型(隐式风格调用)或外观模式(观察者模式或发布订阅模式)。

在事件驱动编程中,取而代之对象 a 调用对象 b 一个方法,对象 a 只是简单的在一个给定的情况会下会触发特定的事件,而对象b可以订阅该事件。这种方式,对象a不需要知道任何关于对象b 的接口,只需要知道要监听的事件。

可以说事件系统存在一个形式的耦合由于对象B需要知道事件的名字从而订阅,但和对象a需要知道对象B的公共方法相比它是相当松散的耦合。

给HTML添加类是非常相似的。取而代之在CSS文件定义复杂的选择器(这相当于知道HTML的内部接口),它可以通过一个类简单地定义组件的视觉外观。HTML可能会选择使用或不使用这个类,CSS无需关心。

同样,JavaScript不需要复杂DOM序列功能,这也需要非常了解html结构知识,它可以简单的监听用户的交互元素,通过协商的类名。

类应该是将你的HTML、CSS和JavaScript连接在一起的纽带。在我的经验中这是是最简单和最棒的方法来连接这三个技术而没有将他们混合在一起太多。

解耦 HTML、CSS 和 JavaScript

2013/06/22 · CSS, JavaScript · 2 评论 · CSS, Javascript

本文由 伯乐在线 - 蝈蝈 翻译。未经许可,禁止转载!
英文出处:Philip Walton。欢迎加入翻译组。

当前在互联网上,任何一个稍微复杂的网站或者应用程序都会包含许多HTML、CSS和JavaScript。随着互联网运用的发展以及我们对它的依赖性日益增加,设定一个关于组织和维护你的前端代码的计划是绝对需要的。

当今的一些大型互联网公司,由于越来越多的人会接触到日益增加的前端代码,它们会试图去坚持代码的模块化。这样更改程序的部分代码,并不会无意中过多地影响后续不相关部分的执行过程。

防止意想不到的后果不是一个容易解决的问题,尤其是HTML,CSS和JavaScript本质上是相互依赖的。更糟糕的是,当涉及到前端代码时,一些传统计算机科学原则,比如关注分离,这一长期运用在服务端开发中,很少会讨论到。

金沙澳门官网网址 ,在本文中,我将会讲讲我所学到的如何去解耦我的HTML,CSS和JavaScript代码。从个人以及他人经验所得,这种的最好办法并不是那么显而易见,而通常是不直观的,而且有时还会与许多所谓的最佳实践相违背。

目标

HTML、CSS和JavaScript之间总是会有一些耦合。不管怎样,这些技术被用来互相作用。举个例子,一个fly-in transition(飞入变换)可能在样式表中定义了一个类选择器,但它通常是由用户交互来触发,通过JavaScript来执行,并且通过在html中添加一个类来初始化。

由于在你的前端代码中存在一些耦合是不可避免的。你的目标不应该是简单地完全消除耦合,而应该是最小化耦合,使这部分代码不必依赖其他部分。

后端开发人员应该能够改变HTML模板中的标记而不用担心不小心破坏一个CSS规则或一些JavaScript功能。随着今天的Web团队规模的增大和专业化,这一目标是比以往更重要。

类选择器就是你的契约

使用合适的类选择器以及可预测的类名约定可以减少几乎每一种HTML,CSS和JavaScript之间的耦合。起初由于为了展现HTML需要知道很多类选择器的名称,这种在标记中使用很多类选择器看起来像是强耦合的迹象。但是我发觉,使用类选择器和传统编程设计中的事件或者观察者模式非常相似。在事件驱动编程中,为了不直接在对象A上调用对象B,而是对象A简单地在提供的环境中发布一个特定的事件,然后对象B能够订阅那个事件。这样,对象B就不需要知道任何关于对象A的接口,而仅仅需要知道监听什么事件。按理说,事件系统需要某种形式上的耦合,因为对象B需要知道订阅的事件名称,但和对象A需要知道对象B的公共方法相比,这已经更松散的耦合了。

HTML类选择器都非常相似。与CSS文件中定义复杂的选择器(就像HTML的内部接口一样)不同的是,它可以通过单一类选择器简单定义一个可视化组件的外观。CSS文件不需要关心HTML对类选择器的使用与否。同样,JavaScript不用那些需要更深入理解HTML结构的复杂DOM遍历功能,而是仅仅监听与类名一致的元素的用户交互。类选择器应该像是胶水一样,把HTML,CSS和JavaScript连接在一起。从个人经验得知,它们也是最容易以及最好的方式把三者技术连接起来,而不是混合过度。

结论

编写可维护的HTML、CSS和JavaScript的要点是个体开发人员可以很容易地和自信地编辑部分的代码库而这些变化不经意间影响其他不相关的部分。

防止意想不到的后果的一个最好的方法来是通过一组可预见的类来连接这三个技术,任何开发人员遇到这些类都能清楚它们的意图和选择的他们目的。

为了避免上面的反模式,牢记下面的原则:

  • 在CSS和JavaScript用明确组件和行为类代替复杂的CSS选择器。
  • 风格组件依赖于它们是什么,而不是他们的位置。
  • 样式和行为不要使用相同的类。
  • 从默认的样式分离出状态样式。

这种方式往往在HTML中呈现大量类,但在可预见性和可维护性上的收益是值得的。毕竟,在HTML中添加类是相当容易,并大多数开发人员的技术水平可以做到。引用 Nicolas Gallagher的一段话:

当你选择修改HTML和CSS,试图减少你花在写作和编辑CSS上的大量时间,这包括接受,你必须花更多的时间更改HTML元素的类,如果你想改变元素的风格。这被证明是相当实用的,包括前端和后端开发人员——任何人都可以重新排列预先构建的“乐高积木”;事实证明,没有人可以执行css炼金术。

如果你觉得我翻译的不错你可以关注我的微博

反模式

前端代码的紧耦合现象并不总是很明显。事实上复杂的是,一方面看起来似乎松耦合,但从另一方面则是紧耦合。以下是我曾经多次做过或者看过,以及吸取我的过错中,总结的所有的反模式。对每一个模式,我会尝试去解释为何耦合这么糟糕,并且指出如何去避免它。

过度复杂的选择器

CSS Zen Garden向世界展示了你可以完全改变整个网站的外观而无需更改任意一个的HTML标记。这是语义网运动的典型代表,主要原则之一就是去避免使用表象类。乍一看,CSS Zen Garden可能看起来像是一个很好的解耦合例子,毕竟,把样式从标记语言中分离出来是它的重点所在。但是,若按照这样做,问题就来了,你会经常需要在你的样式表里有这样的选择器,如下:

JavaScript

#sidebar section:first-child h3 p { }

1
#sidebar section:first-child h3 p { }

CSS Zen Garden中,虽然HTML几乎与CSS完全分离,但CSS会强耦合到HTML中去,此时就需要你对标记语言的结构有深层次的理解。这可能看起来似乎并不是很糟糕,尤其是某人维护着CSS,同时需要维护HTML,但一旦你增加了许多人手进去,这种情况就变得无法控制了。如果某个开发者在某种情况下在第一个<section>前增加了<div>,上面的规则就无法生效,然而他也不清楚其中缘由。

只要你网站的标记很少改动,CSS Zen Garden就是一个非常不错的主意。但是这和当今的Web应用不尽然都是这种情况。与冗长而又复杂的CSS选择器相比,最好的办法是在可视化组件本身的根元素增加一个或多个类选择器。比如,如果侧边栏有子菜单,只需要为每个子菜单元素增加submenu类选择器,而不要用这样的形式:

CSS

ul.sidebar > li > ul { /* submenu styles */ }

1
2
3
ul.sidebar > li > ul {
  /* submenu styles */
}

这种方式的结果是在HTML中需要更多的类选择器,但从长远来看,这又降低了耦合度,以及让代码更可重用和可维护,并且还能让你的标记自文档化。如果HTML里没有类选择器,那些对CSS不熟悉的开发者就不清楚HTML的改动如何影响了其它代码。另一方面,在HTML中使用类选择器能很清晰地看到那些样式或者功能被使用到了。

JavaScript对样式知道的太多

同样,JavaScript可以使用类来查找DOM中的元素,它也可以添加或删除类来改变元素的样式。但这可能产生一个问题,如果这些类不是明显区别于出现在页面加载中的类。

如果JavaScript对关于组件样式代码知道的太多,下面的情况将变得非常平常,一个CSS开发人员修改样式表并没有意识到他正在破坏关键的功能。

这并不是说JavaScript不应该更改组件的外观在用户与他们交互后,但应该通过一种一致的接口。它应该使用与定义的默认样式类有明显区别的类。

类似于 js-* 前缀的类,我建议使用 is-* 前缀定义改变可视化组件状态的类选择器。一个CSS规则示例可能看起来像这样:

.pop-up.is-visible { }

注意,状态类(is-visible)和组件类(pop-up)是交集关系,这一点是重要的。因为状态规则描述组件的状态,他们不应该独立出现。这区别有助于进一步区分状态样式是自默认组件样式的特殊情况。

此外,为了使用一个类似 is-* 的前缀,我们可以编写测试程序来确保我们遵循了规则。一个测试这些类型的规则方法是使用 CSSLint 和 HTML Inspector。

更多关于特定状态类的信息中可以在优秀的书 SMACSSJonathan Snook 中找到。

本文由金沙澳门官网发布于前端知识,转载请注明出处:金沙澳门官网网址解耦你的HTML

关键词: 金沙澳门官网

上一篇:Bookstap开始精通
下一篇:没有了