对于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