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

为什么80%的码农都做不了架构师？>>>   

个人从事前端开发刚好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?

谢谢查阅！欢迎探讨～

转载于:https://my.oschina.net/luozt/blog/186438