1.
$.fn.pluginName = function(opt){}
就是为jquery的prototype定义了函数, 这样, 任何一个jquery对象都可以使用这个成员函数,
这种写法直观明了, 你只要知道的就是$.fn = jQuery.prototype = $.prototype
2.
$.fn.extend, 在jquery中重新定义了extend的使用方法, 如果只有一个参数, 那么就是扩展本身,
即$.fn.extend({}), 就是用{}对象扩展$.fn, 也就是jquery的prototype, 这样, 和上面那个就一样了
两者没有什么区别, 怎么用看自己习惯和理解
3.
写插件的时候, 由于是扩展prototype, 所以this就是对象实例, 即this就是jquery对象,
$(this)还是jquery对象, 他们虽然不是同一对象, 但是内容是完全相同的
//匿名封装$ ,防止外部代码的冲突污染 (function($){ var plugin,privateMethod; // 声明插件名和插件的私有方法 /** * 这里是插件的主体部分 * 这里是一个自运行的单例模式。 * 这里之所以用一个 Plugin 的单例模式 包含一个 Plugin的类，主要是为了封装性，更好的划分代码块 * 同时 也 方便区分私有方法及公共方法 * PS：但有时私有方法为了方便还是写在了Plugin类里，这时建议私有方法前加上"_" */ plugin = (function(){ //实例化插件部分 @param element 传入jq对象的选择器 $("#J_plugin").plugin() ,其中 $("#J_plugin") 即是 element //* @param options 插件的一些参数 function plugin(element,options){ //将dom jquery 对象赋给插件保存,方便使用 this.$element = $(element); //将插件的默认参数及用户定义的参数合并到一个新的obj里 this.settings = $.extend({}, $.fn.plugin.defaults,options); //如果将参数设置在dom的自定义属性里，也可以这样写 this.settings = $.extend({}, $.fn.plugin.defaults, this.$element.data(), options); this.init();//初始化 } //插件的公共方法 写法1 plugin.prototype.dosomething = function(){ //.... } //插件的公共方法 写法2 plugin.prototype = { init:function (){ }, dosomething2: function(){ //... } }; return plugin; }) (); //插件的私有方法 privateMethod = function(){} //将plugin对象转换为jquery插件对象 $.fn.plugin = function(options){ return this.each(function(){ var $me = $(this), instance = $me.data('plugin'); if(!instance){ //将实例化后的插件缓存在dom结构里（内存里） $me.data('plugin', new plugin(this, options)); } //优雅处： 如果插件的参数是一个字符串，则 调用 插件的 字符串方法。 // * 如 $('#id').plugin('doSomething') 则实际调用的是 $('#id).plugin.doSomething // doSomething是刚才定义的接口(公共方法) * 这种方法 在 juqery ui 的插件里 很常见 if ($.type(options) === 'string') instance[options](); }); }; //插件的默认参数 $.fn.plugin.defaults = { xx: 'a', xxx: 123 }; //优雅处： 通过data-xxx 的方式 实例化插件 这样的话 在页面上就不需要显示调用了。 // 可以查看bootstrap 里面的JS插件写法 $(function(){ return new plugin( $('[data-plugin]') ); }); }) (jQuery);
:
zepto:
(function ($) { /** * 定义一个插件 Plugin */ var Plugin, privateMethod; //插件的私有方法，也可以看做是插件的工具方法集 /** * 这里是插件的主体部分 * 这里是一个自运行的单例模式。 * 这里之所以用一个 Plugin 的单例模式 包含一个 Plugin的类，主要是为了封装性，更好的划分代码块 * 同时 也 方便区分私有方法及公共方法 * PS：但有时私有方法为了方便还是写在了Plugin类里，这时建议私有方法前加上"_" */ Plugin = (function () { /** * 插件实例化部分，初始化时调用的代码可以放这里 * @param element 传入jq对象的选择器，如 $("#J_plugin").plugin() ,其中 $("#J_plugin") 即是 element * @param options 插件的一些参数神马的 * @constructor */ function Plugin(element, options) { //将插件的默认参数及用户定义的参数合并到一个新的obj里 this.settings = $.extend({}, $.fn.plugin.defaults, options); //将dom jquery对象赋值给插件，方便后续调用 this.$element = $(element); //初始化调用一下 this.init(); } /** * 写法一 * 插件的公共方法，相当于接口函数，用于给外部调用 */ Plugin.prototype.doSomething = function () { /** * 方法内容 */ }; /** * 写法二 * 将插件所有函数放在prototype的大对象里 * @type {{}} */ Plugin.prototype = { init:function(){ }, doSomething2:function(){ } }; return Plugin; })(); /** * 插件的私有方法 */ privateMethod = function () { }; /** * 这里是将Plugin对象 转为jq插件的形式进行调用 * 定义一个插件 plugin * zepto的data方法与jq的data方法不同 * 这里的实现方式可参考文章：http://trentrichardson.com/2013/08/20/creating-zepto-plugins-from-jquery-plugins/ */ $.fn.plugin = function(options){ return this.each(function () { var $this = $(this), instance = $.fn.plugin.lookup[$this.data('plugin')]; if (!instance) { //zepto的data方法只能保存字符串，所以用此方法解决一下 $.fn.plugin.lookup[++$.fn.plugin.lookup.i] = new Plugin(this,options); $this.data('plugin', $.fn.plugin.lookup.i); instance = $.fn.plugin.lookup[$this.data('plugin')]; } if (typeof options === 'string') instance[options](); }) }; $.fn.plugin.lookup = {i: 0}; /** * 插件的默认值 */ $.fn.plugin.defaults = { property1: 'value', property2: 'value' }; /** * 优雅处： 通过data-xxx 的方式 实例化插件。 * 这样的话 在页面上就不需要显示调用了。 * 可以查看bootstrap 里面的JS插件写法 */ $(function () { return new Plugin($('[data-plugin]')); }); })(Zepto);
参考:
http://www.tuicool.com/articles/AZ77j2
http://www.jb51.net/article/61694.htm
http://blog.jobbole.com/30550/
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
具体示例:
//调用 var slide = $('#wrapper').customSlide(); console.log('second'); var tmp = $('#wrapper').customSlide('ok'); tmp.customSlide('ok'); //插件 ;(function($){ var customSlide,privateMethods; customSlide = (function () { function customSlide(element,options) { this.settings = $.extend({}, $.fn.customSlide.defaults, options); this.$element = $(element); this.init(); } customSlide.prototype = { init: function () { console.log('init'); }, ok:function () { console.log('ok'); } }; return customSlide; }) (); $.fn.customSlide = function (options) { return this.each(function () { // return 从而可以链式调用 var $this = $(this), instance = $.fn.customSlide.lookup[$this.data('customSlide')]; //在dom元素上实例化插件并缓存到dom对象上 if(!instance){ console.log(instance); $.fn.customSlide.lookup[++$.fn.customSlide.lookup.i] = new customSlide(this,options); $this.data('customSlide',$.fn.customSlide.lookup.i); // 在dom上写 attr data-custom-slide=1; 标识已初始化实例 instance = $.fn.customSlide.lookup[$this.data('customSlide')]; console.log(instance); } if(typeof options ==='string'){ instance[options](); // 通过传递string的方式调用示例的无参方法 } }); }; $.fn.customSlide.lookup = {i: 0}; $.fn.customSlide.defaults = { }; $(function () { return new customSlide($('[data-customSlide]')); // bootstrap方式的在元素上写 data-xxx 的方式启动插件 }); }) (Zepto);
参考:
- jQuery官网学习中心关于插件开发的文章： http://learn.jquery.com/plugins/
- jQuery官网插件中心：http://plugins.jquery.com/
- jQuery官网插件发布指南：http://plugins.jquery.com/docs/publish/
- JavaScript Hoist ：http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html
- Google Web Developer Tool : https://developers.google.com/closure/