一步一步教你写一个jQuery的插件教程(Plugin)


Posted in Javascript onSeptember 03, 2009

jQuery 的plugin开发需要注意的事情,
1.       明确jQuery的命名空间只有一个。
2.       明白options参数用来控制plugin的行为。
3.       为默认的plugin设定提供公共的访问权限。
4.       为子函数提供公共的访问权限。
5.       私有的函数绝对是私有访问
6.       支持metadata plugin。
我将会在下面的例子中一个一个的说明上面这几个条件,做完这些事情后我们就会创建一个高亮显示text的简单插件。

1. 明确jQuery的命名空间只有一个

在我们的例子里,我们将会命名这个插件名字为hilight,

一步一步教你写一个jQuery的插件教程(Plugin)

也就是我们的plugin可以通过下面的方法来使用:

一步一步教你写一个jQuery的插件教程(Plugin)

为什么jQuery的plugin只有一个命名空间?可能是设计的要求,或者是这样的话可读性更强,亦或是为了面向对象的设计模式。

2.明白options参数来控制plugin的行为。

  让我们先为我们的hilight插件明确一下foreground和background的颜色。我们应该能够允许这两个option作为option对象传递给plugin的主函数。例如:

一步一步教你写一个jQuery的插件教程(Plugin)

现在插件能够设定如下的属性:

一步一步教你写一个jQuery的插件教程(Plugin)

3. 为默认的plugin设定提供公共的访问权限。

   我们这里可以改进一下,就是让上面的代码能够设置能够扩展。这样当使用这个插件的用户能够使用最少的代码重载我们的option。这也就是我们开始使用function对象的好处。

一步一步教你写一个jQuery的插件教程(Plugin)

现在用户可以在他们的script中使用一行代码来设置foreground属性:

一步一步教你写一个jQuery的插件教程(Plugin)

有了上面的代码我们就可以把某个DOM控件的foregrounf颜色设定为blue了。

一步一步教你写一个jQuery的插件教程(Plugin)

4. 为子函数提供公共的访问权限

   这个条款和上面的相仿,能很有趣的让你的Plugin有扩展功能。例如:在lilight的plugin中我们能够定义一个function是format,可以定义hilight的text的形式。我们的plugin代码将会显示如下:

一步一步教你写一个jQuery的插件教程(Plugin)

这里我们可以很容易支持另外的一个option对象来通过一个callback 函数来重载默认的formatting。那将会是另外一个不错的支持自定义的方式。

5. 私有的函数绝对是私有访问

   公开plugin的一些Option能够被自定义当然是个非常强大的功能。但是你需要考虑哪部分应该被公开,哪部分不应该通过外部访问,否则会破会你已经封装好的结果。

一步一步教你写一个jQuery的插件教程(Plugin)

  这里debug方法不能从外部访问,因为他在plugin的展现中属于私有的方法。

6.支持metadata plugin。

  使用Metadata Plugin需要看你的plugin是什么类型,可能它会使你的插件功能更加强大。个人来说,我比较喜欢metadata plugin是因为它能偶让我的plguin的option通过标记重载。

一步一步教你写一个jQuery的插件教程(Plugin)

  如果metadata plugin能够成功的封装到我们的插件,那么可以通过下面的标记来使用这个lilight插件。

一步一步教你写一个jQuery的插件教程(Plugin)

 最终代码如下:

// 
// 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 
markup = $.fn.hilight.format(markup); 
$this.html(markup); 
}); 
}; 
// 
// 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 closure 
// 
})(jQuery);
Javascript 相关文章推荐
js函数与php函数的区别实例浅析
Jan 12 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
Easyui 之 Treegrid 笔记
Apr 29 Javascript
深入理解angularjs过滤器
May 25 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
vue实现选中效果
Oct 07 Javascript
JS模拟实现京东快递单号查询
Nov 30 Javascript
动态样式类封装JS代码
Sep 02 #Javascript
JS URL传中文参数引发的乱码问题
Sep 02 #Javascript
FF IE兼容性的修改小结
Sep 02 #Javascript
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 #Javascript
获取URL地址中的文件名和参数的javascript代码
Sep 02 #Javascript
Javascript 判断函数类型完美解决方案
Sep 02 #Javascript
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 #Javascript
You might like
php学习 函数 课件
2008/06/15 PHP
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
理解Javascript_05_原型继承原理
2010/10/13 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
python中文乱码的解决方法
2013/11/04 Python
python中global用法实例分析
2015/04/30 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
python梯度下降算法的实现
2020/02/24 Python
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
大学生四个方面的自我评价
2013/09/19 职场文书
应征英语教师求职信
2013/11/27 职场文书
职工运动会邀请函
2014/02/02 职场文书
医学生自我鉴定范文
2014/03/26 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
品质保证书格式
2015/02/28 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
HTML5来实现本地文件读取和写入的实现方法
2021/05/25 HTML / CSS