制作高质量的JQuery Plugin 插件的方法


Posted in Javascript onApril 20, 2010

JQuery Plugin插件,如果大家不明白什么是JQuery插件或都不清楚如何编写可以查看其官方的网站:jQuery Authoring Guidelines
好了,下面有一些我觉得想做一个好的插件必须应有的要求:
1、在JQuery命名空间下声明只声明一个单独的名称
2、接受options参数,以便控制插件的行为
3、暴露插件的默认设置 ,以便外面可以访问
4、适当地将子函数提供给外部访问调用
5、保持私有函数
6、支持元数据插件
下面将逐条地过一遍:
只声明一个单独的名称
这表明是一个单独的插件脚本。如果你的脚本包含多个插件或者是互补的插件(像$.fn.doSomething()和$.undoSomething()),那么你可以根据要求声明多个名称。但一般情况下,力争用单一的名称来维持插件现实的所有细节。
在本例中,我们将声明一个叫“hilight”的名称

// 插件的定义 
$.fn.hilight = function( options ){ 
// 这里就是插件的实现代码了... 
}; 
然后我们可以像这样调用它: 
$("divTest").hilight();

接受一个options参数,以便控件插件的行为
$.fn.hilight = function(options){ 
var defaults = { 
foreground : 'red', 
background : 'yellow' 
}; 
//Extends out defaults options with those privided 扩展我们默认的设置 
$.extend(defaults,options); 
};

而我们可以这样使用它:
$('#myDiv').hilight({ 
foreground: 'blue' 
});

暴露插件的默认设置 ,以便外面可以访问
作为插件的提升和优化,我们应该将上面的代码暴露出来作为插件的默认设置。
这非常重要,这样做让使用插件的用户可以非常容易地用最少的代码重写或自定义该插件。然而这个我们可以借助JavaScript function对象的优势:
$.fn.hilight = function(options){ 
//Extend our default options with those provided 
//Note that the first arg to extend is an empty object 
//this is to keep from overriding our "defaults" object 
var opts = $.extend({},$.fn.hilight.defaults,options); 
} 
$.fn.hilight.defaults = { 
foreground : 'red', 
background : 'yellow' 
};

这里值得注意的是$.extend()第一个参数是一个空的对象,这样可以让我们重写插件的默认设置
用户可以像这样使用插件:
// override plugin default foreground color 
$.fn.hilight.defaults.foreground = 'blue'; 
// ... 
// invoke plugin using new defaults 
$('.hilightDiv').hilight(); 
// ... 
// override default by passing options to plugin method 
$('#green').hilight({ 
foreground: 'green' 
});

适当地将子函数提供给外部访问调用
这个例子延续前面的例子,你会发现有一个有趣的方法可以扩展你的插件(然后还可以让其他人扩展你的插件 :))。例如,我们在插件里声明了一个函数叫“format”用来高这显示文本,我们的插件实现代码可能是这样子的:
$.fn.hight = function(options){ 
//iterate and reformat each mached element 
return this.each(function(){ 
var $this = $(this); 
//... 
var markup = $this.html(); 
//call our format function 
markup = $.fn.hilight.format(markup); 
$this.html(markup); 
}); 
}; 
//define our format function 
$.fn.hilight.format = function(txt){ 
return '<strong>' + txt + '</strong>'; 
};

保持私有函数
暴露插件有部分内容提供重写看上去似乎非常强大,但是你必须认真地考虑你的插件哪一部分是需要暴露出来的。一旦暴露出来,你就需要考虑这些变化点,一般情况下,如果你没有把握哪部分需要暴露出来,那么你可以不这样做。
那如何才能够定义更多的函数而不将其暴露出来呢?这个任务就交给闭包吧。为了证实,我们在插件中添加一个函数叫“debug”,这debug函数将会记录已选择的元素数量到FireBug控制台中。为了创建闭包,我们将插件定义的整部分都包装起来:
//create closure 
(function($){ 
//plugin definition 
$.fn.hilight = function(options){ 
debug(this); 
//... 
}; 
//private function for debuggin 
function debug($obj){ 
if(window.console && window.console.log){ 
window.console.log('hilight selection count :' + $obj.size()); 
} 
} 
//... 
//end of closure 
})(jQuery);

这样“debug”方法就不能被闭包这外调用了
支持元数据插件
依赖于所写的插件类型,并支持元数据插件会使得其本身更加强大。个人来讲,我喜欢元素据插件,因为它能让你分离标签中重写插件的配置(这在写demo和示例时特别有用)。最重要的是,想现实它特别的容易!
$.fn.hilight = function(options){ 
//build main options before element interation 
var opts = $.extend({},$.fn.hilight.defaults,options); 
return this.each(function(){ 
var $this = $(this); 
//build element specific options 
var o = $.meta ? $.extend({},opts,$this.data()) : opts; 
//一般句话,搞定支持元数据 功能 
}); 
}

几行的变化完成了以下几件事:
1、检测元数据是否已经配置
2、如果已配置,将配置属性与额外的元数据进行扩展
<!-- markup --> 
<div class="hilight { background: 'red', foreground: 'white' }"> 
Have a nice day!这是元数据 
</div> 
<div class="hilight { foreground: 'orange' }"> 
Have a nice day!在标签中配置 
</div> 
<div class="hilight { background: 'green' }"> 
Have a nice day! 
</div>

然后我们通过一句脚本就可以根据元数据配置分开地高亮显示这些div标签:
$('.hilight').hilight();

最后,将全部代码放在一起:
// 
//create closure 
// 
(function($){ 
// 
// plugin definition 
// 
$.fn.hilight = function(options){ 
debug(this); 
//build main options before element iteration 
var opts = $.extend({}, $.fn.hilight.defaults, options); 
//iterate and reformat each matched element 
return this.each(function(){ 
$this = $(this); 
//build element specific options 
var o = $.meta ? $.extend({}, opts, $this.data()) : opts; 
//update element styles 
$this.css({ 
backgroundColor: o.background, 
color: o.foreground 
}); 
var markup = $this.html(); 
//call our format function 
}); 
} 
// 
// private function for debugging 
// 
function debug($obj){ 
if(window.console && window.console.log){ 
window.console.log('hilight selection count: ' + $obj.size()); 
} 
}; 
// 
// define and expose our format function 
// 
$.fn.hilight.format = function(txt){ 
return '<strong>' + txt + '</strong>'; 
}; 
// 
// plugin defaults 
// 
$.fn.hilight.defaults = { 
foreground : 'red', 
background : 'yellow' 
}; 
// 
// end of clousure 
// 
})(jQuery);

转载请注明出处http://samlin.cnblogs.com
比较希望大家开发jquery plugin的时候可以在最后把方法开放出来
return {
method1: funcion() {},
method2: funcion() {}
}

这样我们在使用的时候就可以用如下方式调用
var plugin = $("<div/>").plugin();
plugin.mehtod1();
plugin.method2();

Javascript 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
javascript window对象属性整理
Oct 24 Javascript
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 #Javascript
jquery+json 通用三级联动下拉列表
Apr 19 #Javascript
javascript中的变量是传值还是传址的?
Apr 19 #Javascript
js获取当前select 元素值的代码
Apr 19 #Javascript
监控 url fragment变化的js代码
Apr 19 #Javascript
jquery获取input表单值的代码
Apr 19 #Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 #Javascript
You might like
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
Js apply方法详解
2017/02/16 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
网上商城创业计划书范文
2014/01/31 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
SpringBoot工程下使用OpenFeign的坑及解决
2021/07/02 Java/Android