插件编写的高可配模式

在应用一组元素时，通过HTML5数据属性可以在单个元素级别上定制选项，而不需要实例化每个元素让其拥有不同的默认值。

比如：

html

<li class="item-a" >aa</li>
<li class="item-b" >bb</li>

js

$(".item-a").draggable({"position": "top-left"});
$(".item-a").draggable({"position": "bottom-left"});

我们为一组元素li编写一个拖动插件，但是针对每个li，我们需要定制一些选项，这里是position。

假设这里有100个，那么，我们需要实例化100个带有不同默认值的插件对象。

更好的办法：

html

<li class="item" data-plugin-options="{'position':'top-left'}">aa</li>
<li class="item" data-plugin-options="{'position':'bottom-left'}">bb</li>

js

$("item").draggable();

是不是简单多了，那么，这种插件如何实现呢，请看：

;(function($,window,undefined){
	var Plugin = function(elem, options){
		this.elem = elem;
		this.$elem = $(elem);
		this.options = options;
		this.metadata = this.$elem.data("plugin-options");
	};
	Plugin.prototype = {
		defaults:{
			message:"hello world"
		},
		init : function(){
			this.config = $.extend({}, this.defaults, this.options, this.metadata);
			this.create();
			return this;
		},
		create:function(){

		}
	};
	......
})(jQuery,window)

上面构造插件的代码跟之前规范构造插件的代码，貌似只差了一行代码，就是获取了元素HTML5自定义属性的值，也就是

this.metadata = this.$elem.data("plugin-options");

然后，在初始化时，此属性值会覆盖之前所有的值，因此达到了配置的效果。

此种模式，也比较重要，angularjs就是利用html的自定义属性实现所需要的功能的。

 

 

 

 

加油！