制作高质量的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 兼容firefox的一些问题
May 21 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
html5调用摄像头截图功能
Jan 18 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
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP生成器简单实例
2015/05/13 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
浅谈React高阶组件
2018/03/28 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
运动会开幕式主持词
2014/03/28 职场文书
宿舍标语大全
2014/06/19 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
高中社区服务活动报告
2015/02/05 职场文书
专家推荐信怎么写
2015/03/25 职场文书
物业接待员岗位职责
2015/04/15 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
经营场所证明范本
2015/06/19 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python