文档章节

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

前端届的科比
 前端届的科比
发布于 2013/12/21 10:41
字数 554
阅读 148
收藏 0

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

谢谢查阅!欢迎探讨~

© 著作权归作者所有

前端届的科比
粉丝 21
博文 64
码字总数 51572
作品 0
深圳
私信 提问
编写高质量的 HTML 代码

编者寄言: 本文主要为编者读书笔记,在文章里面很多话是掺杂了编者自己的见解,如果有哪里出现错误或者用词不严谨,请友善留言,编者会及时去更改。 本文很多地方只是简单说了一下应该注意的...

mr_lp
2016/05/17
0
0
关于语义化 HTML 以及前端架构的一点思考

这是一篇我喜欢的思想,经验,理念,以及过去几年中我所试验的理念的集合。它覆盖了HTML语义,前端架构的组件和方法,类命名模式,和HTTP内容压缩。 我们不会停止探索 而我们一切探索的终点 ...

maverickpuss
2013/08/15
14.3K
7
一周一章前端书·第13周:《HTML与CSS进阶教程》S01E02

第2章 语义化 2.1 语义化简介 HTML的精髓在于标签的语义。大部分标签都有它自身的语义,比如标签,表示paragraph,一个段落;,表示header level 1,一级标题。 前端的三大核心技术HTML、CSS...

梁同学de自言自语
2018/01/13
0
0
表现与数据分离、web语义化的理解

表现与数据分离 什么是表现与数据分离 一是前后端分离,所有数据都是后端通过AJAX发送给前端,前端负责展现页面,后端负责提供数据。 二是前端页面展现与数据处理分离,也就是在前端处理数据...

祖达
04/22
29
0
前端开发面试题总结之——CSS3

相关知识点 题目&答案 如何理解CSS的盒子模型? link和@import的区别? CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?CSS 3新增伪类有哪些? 如何居中div,如何居中一个浮动元素...

sandisen
2017/02/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CQRS与AXON

CQRS 看了蛮多文章,只会CRUD,却不懂CQRS,CQRS是遵循DDD思想而产生的一种模式,Command and Query Responsibility Segregation 命令与查询隔离。查询就直接通过正常的模式service调dao层。...

无极之岚
24分钟前
2
0
OSChina 周三乱弹 —— 欢迎你来做产品经理

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :10多次劲歌金曲获奖,更多叱咤歌坛排名,黎明才应该是四大天王之首,只可惜拍的电影太少。单曲循环一个多月的歌,力荐 《无名份的...

小小编辑
39分钟前
65
4
500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。 帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!...

上海小胖
今天
8
0
关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
7
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部