Action By Class,利用Element 的class触发行为

做Web应用，页面上的元素(Element)，常常要进行一些特殊的处理，

比如增加特效，处理innerHTML等等。

举个例子：

jQuery有一个插件lavaLamp ,可以做出漂亮的菜单。

使用的时候，除了写好css,设置好style,就是调用：

$(elm).lavaLamp(options);
/*elm是对应的元素，具体写法可以用#ID等jQuery选择器，options就是参数了参加lavaLamp的说明*/

 对于这个需求，这个用法是无可非议的。

但是向这样要先筛选元素然后再进行不同除了的需求，在某些应用中可能有大量的需求。

如果一个个的写选择器，为元素设置特殊的ID或属性是很麻烦的。

我这里有一个简单的方法来处理这个问题（此方法我已经用了2年了，非常安逸），就是通过设置源文件相关元素(html 标签)的class属性来解决此类问题。类似上面的需求html代码如下:

<ul class="lavaLampBottomStyle abc abc.lavaLamp({fx:'easeOutBack',speed:700})">
	<li><a>测试</a></li>
	<li><a>测试</a></li>
</ul>

 这是lavaLamp的最简单形式，lavaLampBottomStyle用来设置菜单的样式。

abc abc.lavaLamp({fx:'easeOutBack',speed:700})

 

就是用了触发生效lavaLamp效果的设置。

可能你已经明白了，里面的abc是用来声明一个特殊的标记。表示这个class中有Action By Class的方法。而abc.lavaLamp({fx:'easeOutBack',speed:700})就是激活lavaLamp的语法。

这个语法要生效我写了个jQuery扩展Action By Class------abc：

$.extend($.fn, {
	abc: function(prefix) {
		prefix=(prefix ||'abc')+'.';
		//for (var i=this.length - 1;i>=0;i--) {//这个有讲究，后面再说，次序问题
		for (var i=0 ;i<this.length;i++) {
			var cna = this[i ].className.split(/\s+/);
			var self=this[i];//预留eval做接口
			var selfjQ = $(this[i]);//预留eval做接口的jQuery对象
			for (var j=0; j<cna.length; j++) {
				if (prefix!=cna[j].slice(0,prefix.length) || cna[j].indexOf('(')<1 || cna[j].slice(cna[j].length-1)!=')') continue;
				var fn=cna[j].slice(0,cna[j].indexOf('('));
				var option=cna[j].slice(fn.length+1,cna[j].length-1);
				option=option.replace(/&/g,' ')||undefined;
				fn = fn+'(this[i],'+option+')';
				//selfjQ.removeClass(cna[j]);
				//try {
					//alert(('$.'+fn));
					window.eval(('$.'+fn));
				//catch (ex){alert('abc error:'+fn)};
			}
		}
		this.removeClass(prefix.slice(0,-1));
	}
});
$.abc = {};
$.extend($.abc, {
	lavaLamp:function(elm,options){
		$(elm).lavaLamp(options);
	}
);

注意：代码是直接从我的扩展中帖出来的，有写东西是为了调试用的，有些东西是我试验用的。读者只需要明白原理，可以自己写一个。

这个扩展很简单就是：

$('.abc').abc()

对应abc的代码你可以看到，$('.abc')或的了具有abc class的Elements。abc分析class name 中以“abc.”(当然也可以用prefix定义其他的，用来区分次序)打头的class,其实也就是Action命令了。调用相关的$.abc.xxxx

通过这个方法，无需费心定义大量不同的ID了（这个很烦的），调用也一句就触发了。

 

思考：

1.其实经过2年的使用我觉得实际当中这个方法可以优化的，不过用的是契约式编程，不一定能被大家普遍接受，就不提了。

2.关于前面说的问题，其实是在复杂的应用当中action触发的次序是有要求的，开始的时候我是用递增或递减循环来解决的，后来就改用设置prefix来触发了，比如:

 

abc abc.lavaLamp({fx:'easeOutBack',speed:700});//如果和其他的abc配合有次序的要求的话，可以写
abc2 abc2.lavaLamp({fx:'easeOutBack',speed:700});

调用次序写两个就行了:

$('.abc').abc();
$('.abc2').abc('abc2');

 

思路巧妙，且使用十分便捷！

但个人觉得既然用了jQuery，那么它的css选择器功能已经够强了。
既然最后还是要调用
$('.abc').abc(); 
那也不如直接
$('.abc').lavaLamp({fx:'easeOutBack',speed:700});
 
我觉得又是一个JS逻辑“侵入”HTML结构的经典例子。这样做降低了可移植性和灵活性。而对于解决问题没有实质性的提高。

个人意见，仅供参考。

你好像还是没有理解这个的用法:如果是这样的html

<ul class="lavaLampBottomStyle abc abc.lavaLamp({fx:'easeOutBack',speed:700})">  
<li><a>测试</a></li>  
<li><a>测试</a></li>  
</ul> 
<div class="abc abc.accordion({active:1})">
	<a>There is one obvious advantage:</a>
	<div>
		<p>
			You've seen it coming!<br/>
			Buy now and get nothing for free!<br/>
			Well, at least no free beer. Perhaps a bear, if you can afford it.
		</p>
	</div>
	<a>Now that you've got...</a>
	<div>
		<p>
			your bear, you have to admit it!<br/>
			No, we aren't selling bears.
		</p>
		<p>
			We could talk about renting one.
		</p>
	</div>
	<a>Rent one bear, ...</a>
	<div>
		<p>
			get two for three beer.
		</p>
		<p>
			And now, for something completely different.
		</p>
	</div>
</div>

 

也就是说页面上有lavalamp,accordion两种效果,按abc的写法激活这个只需要

$('.abc').abc();

当然对应的accordion要写(怎么优化我们先不谈,我要表达的是一句就可以激活所有的,要激活的越多这个方法的效率就越能体现).

而不像你说的要多个语句了(当然如果激活次序有要求的话,还是要分开多个语句的)