制作高质量的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 相关文章推荐
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
基于vue-draggable 实现三级拖动排序效果
Jan 10 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
php中mt_rand()随机数函数用法
2014/11/24 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
Javascript 实用小技巧
2010/04/07 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
jsp 网站引入外部css或者js失效问题解决
2016/10/31 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
Python实现感知机(PLA)算法
2017/12/20 Python
Numpy之文件存取的示例代码
2018/08/03 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
市场部管理制度
2014/02/02 职场文书
消防安全检查制度
2014/02/04 职场文书
企业读书活动总结
2014/06/30 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
夏洛特的网观后感
2015/06/15 职场文书
城南旧事电影观后感
2015/06/16 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
检举信的写法
2019/04/10 职场文书
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python