首页 > 代码库 > jQuery 插件模板
jQuery 插件模板
1、为每一个DOM对象创建一个插件对象
模板定义:
1 (function($) { 2 3 $.pluginName = function(element, options) { 4 5 var defaults = { 6 foo: ‘bar‘, 7 onFoo: function() {} 8 } 9 10 var plugin = this;11 12 plugin.settings = {}13 14 var $element = $(element),15 element = element;16 17 plugin.init = function() {18 plugin.settings = $.extend({}, defaults, options);19 // code goes here20 }21 22 plugin.foo_public_method = function() {23 // code goes here24 }25 26 var foo_private_method = function() {27 // code goes here28 }29 30 plugin.init();31 32 }33 34 $.fn.pluginName = function(options) {35 return this.each(function() {36 //为每一个DOM元素创建插件实例37 if (undefined == $(this).data(‘pluginName‘)) {38 var plugin = new $.pluginName(this, options);39 $(this).data(‘pluginName‘, plugin);40 }41 });42 43 }44 45 })(jQuery);
模板使用:
1 $(document).ready(function() { 2 3 // 将插件附加到选择器中的每一个元素(这里通过ID选择器,只有一个元素,下同。) 4 $(‘#element‘).pluginName({‘foo‘: ‘bar‘}); 5 6 // 隐式迭代,选择器中每一个元素都会调用该公共方法 7 $(‘#element‘).data(‘pluginName‘).foo_public_method(); 8 9 // 隐式迭代,访问选择器中每一个元素的属性,返回一个数组10 $(‘#element‘).data(‘pluginName‘).settings.foo;11 12 });
- 参考链接:http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/
2、面向对象的模板,只有一个插件实例
模板定义:
1 ;(function($) { 2 3 $.pluginName = function(el, options) { 4 5 var defaults = { 6 propertyName: ‘value‘, 7 onSomeEvent: function() {} 8 } 9 10 var plugin = this;11 12 plugin.settings = {}13 14 var init = function() {15 plugin.settings = $.extend({}, defaults, options);16 plugin.el = el;17 // code goes here18 }19 20 plugin.foo_public_method = function() {21 // code goes here22 }23 24 var foo_private_method = function() {25 // code goes here26 }27 28 init();29 30 }31 32 })(jQuery);
模板使用:
1 $(document).ready(function() { 2 3 // 创建插件实例,并且绑定到$(‘#element‘) 4 var myplugin = new $.pluginName($(‘#element‘)); 5 6 // 调用插件公共方法 7 myplugin.foo_public_method(); 8 9 // 获取公有属性的值10 myplugin.settings.property;11 12 });
- 参考链接:http://stefangabos.ro/jquery/jquery-plugin-boilerplate-oop/
3、面向对象的模板,充分利用习惯的链式编程
模板定义:
1 ; (function ($) { 2 //构造函数 3 $.pluginName = function (el, options) { 4 5 var defaults = { 6 propertyName: ‘value‘, 7 onSomeEvent: function () { } 8 } 9 10 var plugin = this;11 12 plugin.settings = {}13 14 var init = function () {15 plugin.settings = $.extend({}, defaults, options);16 plugin.el = el;17 // code goes here18 }19 //①:直接方法定义(模板2就是采用这种方式)20 plugin.foo_public_method = function () {21 //公有方法22 // code goes here23 }24 25 var foo_private_method = function () {26 //私有方法27 // code goes here28 }29 30 init();31 32 }33 //②:原型方法定义(均为公有方法)34 $.pluginName.prototype = {35 method1: function () {36 },37 method2: function () {38 }39 };40 41 //③:原型方法定义 也可以这么写(均为公有方法)42 //$.extend($.pluginName, {43 // method1: function () {44 // },45 // method2: function () {46 // }47 //});48 49 //在插件中使用50 $.fn.pluginName = function (options) {51 //实例化一个插件实例,通过执行构造函数初始化52 var myPlugin = new $.pluginName(this, options);53 //调用公有业务方法54 myPlugin.method1();55 myPlugin.foo_public_method();56 //返回 this,便于链式调用57 return this;58 }59 60 })(jQuery);
模板使用:
1 $(document).ready(function () {2 //熟悉的链式编程3 $(‘#element‘).pluginName({4 //插件options5 }).css({}).animate({});6 });
4、构造函数提供给外部使用(有点别扭)
模板定义:
1 ; (function ($) { 2 //构造函数 3 $.pluginName = function (el, options) { 4 //去除构造函数中对插件的初始化,转到$.fn.pluginName中初始化。 5 return $(el).pluginName(options);//该构造函数不是给插件使用,而是给外部调用者使用,需要return以链式编程 6 } 7 //②:原型方法定义(均为公有方法) 8 $.pluginName.prototype = { 9 method1: function (para1, para2) {10 },11 method2: function (para1, para2) {12 }13 };14 15 //③:原型方法定义 也可以这么写(均为公有方法)16 //$.extend($.pluginName, {17 // method1: function (para1,para2) {18 // },19 // method2: function (para1,para2) {20 // }21 //});22 23 //在插件中使用,不会创建插件实例(构造函数是给外部使用的)24 $.fn.pluginName = function (options) {25 var defaults = {26 propertyName: ‘value‘,27 onSomeEvent: function () { }28 }29 30 var settings = {}31 32 var init = function () {//私有方法33 settings = $.extend({}, defaults, options);34 // code goes here35 }36 37 var foo_private_method = function () {38 //私有方法39 // code goes here40 }41 42 init();43 44 //调用业务方法45 $.pluginName.method1(para1, para2);46 $.pluginName.method2(para1, para2);47 48 //返回 this,便于链式调用49 return this;50 }51 52 })(jQuery);
模板使用:
1 $(document).ready(function () { 2 //熟悉的链式编程 3 $(‘#element‘).pluginName({ 4 //插件options 5 }).css({}).show({}); 6 7 //构造函数提供该外部使用,所以相当于 8 new $.pluginName($(‘#element‘), { 9 //插件options10 }).css({}).animate({});11 });
总结
正如标题所说的那样,每种模板各有特点,但是最具可读性的还是第三种。当然了,模板只是一个套路,修修改改就又会变成另外一种模板了,上面只是总结了比较常见的模板格式,仅供参考。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。