“别滥用Class”——HTML语义化、前端三层分离理解

谁说我不能喝 提交于 2019-12-11 18:24:01

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

个人从事前端开发刚好2年(持续更新),从HTML重构到现在JS脚本开发,虽不敢说很有经验,但对前端某些部分还是有个人的独特的见解,比如HTML常用属性[class]:

[class]是HTML语言中定义节点元素样式的属性。顾名思义,这个属性是为设计元素外观所用的,按照前端三层分离的原则,class是为表现层服务的,但是很多前端开发者甚至专业的资深前端工程师把[class]写到了逻辑层,他们经常使用$(.nodeClass)之类的类选择器来获取元素进行脚本开发。

这种方式我是不推荐的,因为class就是定义元素外观的,不涉及脚本。把class里面任一样式删去或者添加更多样式是不应该影响脚本的。但上面的做法把css和js在耦合在一齐了,这样就背离了前端三层分离原则。你可以想想,假如这样做的话,我想更改元素的class命名,又要去到脚本众多的js中同步更改相应的代码,那这样怎么算得上前端三层分离呢?!

所以,我建议是,[class]属性专门为定义元素外观服务的,js获取元素最好使用id或name属性——$("#nodeId"), $("[name=nodeName]")。打个比喻,把元素比作人来看的话,id实际上是人的身份证/学号,name是个人姓名,class是个人衣服。你想想,老师想叫你起来回答问题,他每次都可以叫你姓名name。不过如果你班很多人重名name的,他每次也可以喊你身份证号/学号,但他就不可能每天说“那个穿蓝衣服的”,因为你外观是可以每天都变的。See?

另外,这样做的话,如果设计更改时,你直接替换class相应样式即可,大多情况下根本不需要担心这样对js的影响!Right?

谢谢查阅!欢迎探讨~

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!