一步一步教你写一个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 相关文章推荐
javscript对象原型的一些看法
Sep 19 Javascript
Jquery 表格合并的问题分享
Sep 17 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
js Dom实现换肤效果
Oct 21 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
详解vue-cli中模拟数据的两种方法
Jul 03 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
JavaScript获取URL参数的方法分享
Apr 07 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 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
php正则修正符用法实例详解
2016/12/29 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
Javascript中的数学函数集合
2007/05/08 Javascript
js 异步处理进度条
2010/04/01 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
学习python (1)
2006/10/31 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
Python中的取模运算方法
2018/11/10 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
感恩节活动方案
2014/01/27 职场文书
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
诉前财产保全担保书
2014/05/20 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
南京大屠杀观后感
2015/06/02 职场文书
国际贸易实训总结
2015/08/03 职场文书
教师廉政准则心得体会
2016/01/20 职场文书