我在页面上有多个用户可以选择的DIV项目,我在JavaScript代码中实现的是,当一个项目被选中时,我添加了一个CSS类来标记它是一个选定的项目,然后再使用它围绕它应用业务规则逻辑.
这只是一个例子,但总的来说,我想知道我是否应该以这种方式使用该类,因为类本身不以任何方式改变页面的表示,并且CSS类的目的是用于表示目的.这样做是一种混合表示和业务逻辑的情况,这被认为不是一个好的设计模式？
此外,它可能会触发浏览器在添加类时执行一些演示处理开销,并可能减慢速度.
我确信使用data- *属性来存储数据比使用类更具语法性.
所以你有2个选择.
使用专为将元素应用于元素而设计的类,还可以在后台运行一些不必要的代码来检查样式.
或者使用data- *属性,该属性旨在将此类数据存储在特定元素上,并且可能不会在后台运行任何不必要的代码.
我肯定知道我会选择选项2.
更新
您可能会看到一些javascript框架在实际上不应用任何样式的类中使用某些数据,例如angular.js,它们使用ng-binding& ng-scope类.但是我很确定他们为这个数据使用类的唯一原因是他们可以使用getElementsByClassName获取类的所有元素.
您还可以使用javascript对象来跟踪这种东西.这是一个跟踪已点击的元素的示例.
var clickedElements = [];
forEach -- allElements -- .addEventListener('click',function() {
clickedElements.push(this);
});
// ^ Here you would actually have to loop through the elements
// To apply the event Listener.
通过这种方式,您可以轻松地遍历所有元素,并且不会影响您的DOM内容.
这是很久以前读过的文章的一小部分.
Have you ever found yourself using element class names or rel attributes to store arbitrary snippets of Metadata for the sole purpose of making your JavaScript simpler? If you have,then I have some exciting news for you! If you haven’t and you’re thinking,Wow,that’s a great idea! I implore you to rid your mind of that thought immediately and continue reading.
