制作高质量的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 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
基于jquery的表格排序
Sep 11 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 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 获取当前访问的url文件名的方法小结
2010/02/08 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
php 常用的系统函数
2017/02/07 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
mouse_on_title.js
2006/08/25 Javascript
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
Python-接口开发入门解析
2019/08/01 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
巴西购物网站:Estrela10
2018/12/13 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
奥巴马英文演讲稿
2014/05/15 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
邀请书模板
2015/02/02 职场文书
清明节寄语2015
2015/03/23 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫