对于Jquery插件的使用,已经司空见惯:如下:
<html>
<body>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
//1. 初始化
$("#name").write({
color: "white",
"background-color": "blue"
});
//2. 设置属性
$("#name").write('setColor', 'red');
//获取属性
alert($("#name").write("color"));
});
<body>
<label id="name">required</label>
</html>
这个简单的插件主要是设置控件的样式,做演示效果,那如何去编写这样的插件呢?
(function($) {
var Writer = function(element, options) {
this.$element = $(element);
this.options = $.extend({},
$.fn.write.defaults, options); //合并参数
this.init();
};
Writer.prototype = {
constructor: Writer,
init: function() {
this.$element.css(this.options);
},
setColor: function(args) {
this.$element.css("color", args);
this.options.color = args;
},
}
$.fn.write = function(options) {
options = options || {}
var args = arguments;
var value;
var chain = this.each(function() {
data = $(this).data("write");
if (!data) {
if (options && typeof options == 'object') { //初始化
return $(this).data("write", data = new Writer(this, options));
}
} else {
if (typeof options == 'string') {
if (data[options] instanceof Function) { //调用方法
var property = options; [].shift.apply(args);
value = data[property].apply(data, args);
} else { //获取属性
return value = data.options[options];
}
}
}
});
if (value !== undefined) {
return value;
} else {
return chain;
}
};
$.fn.write.defaults = { //设置默认属性 color:"yellow",
"background-color": "yellow"
};
})(jQuery);
在编写插件之前需要弄清楚几个javascript常见的几个难点:
1. this
2. prototype
3. apply
4. 内置对象arguments
http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html
http://www.cnblogs.com/dolphinX/p/3286177.html
http://www.zhihu.com/question/20289071