プラグイン作成の高アダプタモード

要素のセットを適用する場合は、HTML 5データ属性を使用して、各要素をインスタンス化して異なるデフォルト値にすることなく、単一の要素レベルでオプションをカスタマイズできます.
例:
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)

上に構築されたプラグインのコードは、以前の仕様で構築されたプラグインのコードと1行しか違わないようです.つまり、要素HTML 5のカスタム属性の値、つまり
this.metadata = this.$elem.data("plugin-options");
その後、初期化時にこの属性値が以前のすべての値を上書きするため、構成の効果が得られます.
このモードは、angularjsがhtmlのカスタム属性を利用して必要な機能を実現することも重要です.
 
 
 
 
がんばって!