jQuery - 尽可能用id或class做选择器

  • 作者:KK

  • 发表日期:2016.11.26


要点速读

  1. 不要使用标签名做选择器

  2. 用id或class取代标签名做选择器只是解决了简单的兼容问题,但删除这个dom时维护人员不容易识别出有没有js操作这个DOM,如果有,则删除了js就出错了

  3. 只使用J-xxx这样以J-开头的class提供给js操作,这样就能在删除时看到J-开头而知道要找出相关js代码并删除了


菜鸟程序员的代码往往是这样的:$('#xxx li').css(...)先通过一个#xxx定位到一个节点后,后面的有时候就是直接写标签做选择器

如果界面更新时把这个li标签换成了p或div什么的,这样选择器就会找不到了

  • 解决办法:

    给li标签加个class,比如叫yyy,然后选择器就是.xxx .yyy,则把li标签也换掉了的话,只要新替代的标签也有yyy这个class就可以依然被选择到了

总结:不要随便用 标签名 做选择器


问题:移除dom时不知道js有没有操作这个class的节点怎么办

用了class来取代标签名做选择器只是一个保险一点儿的做法,但没有完全解决问题

问题就是假设节点被删除了,但别人不知道有js代码操作了这个class怎么办?(这个维护的人不一定是你嘛,别人怎么清楚有没有js操作它呢)

比如删除<div class="userInfo">...</div>这样的节点时,难道还要搜一下所有前端代码看看有没有类似$('#xxx .userInfo .yyy')或者$('.userInfo')等操作?————这当然不现实甚至令人感到疯狂


解决方案:jQuery选择器只使用协商好的特殊class

使用J-userInfo这样带J-前缀开头的class提供给js代码做选择器就可以了,则节点既要样式,又要被js操作的话就应该是这样的:<div class="userInfo J-userInfo">...</div>

看上去写两个相似的class是有点麻烦,但这个性价比是很值得的

因为如果CSS和JS都用userInfo,则删除的时候都不知道要不要删除JS的代码以防止BUG的发生

如果用了,一看到删除的节点带有J-开头的class那知道去看看哪里的JS操作它了

  • 注意

    这个J-开头的class应该只提供给js代码操作,不提供给css做选择器,css应该用没有J-的,否则删除了J-开头的,那css可能就会找不到选择器,渲染出问题了

    同时ID也是,只提供给js操作,在css里千万不要用ID做选择器(这个当然是很多人的共识了,只是这里重复强调一次)