学习 JQuery 插件开发之后, 可以将自己平时常用的功能封装成插件, 便于在不同的项目之间使用.
JQuery 官网上的 插件开发教程就很不错, 简单易懂.
参考网址:
<a href="http://learn.jquery.com/plugins/basic-plugin-creation/">http://learn.jquery.com/plugins/basic-plugin-creation/</a>
<a href="http://learn.jquery.com/plugins/advanced-plugin-concepts/">http://learn.jquery.com/plugins/advanced-plugin-concepts/</a>
本文就是基于官网上的教程整理的, 也加入了自己实验的一些示例。
jquery 中有2个重要的API是和插件编写相关的.
jQuery.extend(object) 即 $.extend(object)
jQuery.fn.extend(object) 即 $.fn.extend(object)
这2个API都是为了将自己编写的功能以插件的形式加入到 jquery 中.
但是含义上是有区别的.
这个函数是用来扩展 jQuery 本身, 也就是扩展 "$" 的.
示例如下:
首先点击 [btn-test] 按钮, 提示没有 test 方法, 然后点击 [btn-extend] 按钮, 扩展 $ 本身.
再次点击 [btn-test] 按钮, 执行扩展的 $.test() 函数.
这个函数用来为 jQuery 对象提供新的方法.
所谓 jQuery 对象, 最常见的我们平时通过jQuery选择器获取的对象, 比如: $("#id"), $(".class") 等等.
首先点击 [btn-test] 按钮, 提示没有 test 方法, 然后点击 [btn-extend] 按钮, 扩展 $ 对象.
再次点击 [btn-test] 按钮, 执行扩展的 $.fn.test() 函数.
编写 jQuery 插件之前, 一定要弄懂 "$ 本身" 和 "$ 对象" 的区别. ($ 就是 jQuery)
也就是弄懂 $.extend 和 $.fn.extend 之间的区别.
一般来说, 纯UI相关的插件很少, 都是UI和功能一起配合使用的, 比如 jQuery UI 库.
下面的示例主要为了说明如何使用 jQuery 插件, 所以只和UI相关.
示例 HTML:
示例 jQuery 插件:
通过点击 html 页面上的按钮, 可以切换所有 smalldiv 的背景色.
这个例子比上面那个略微复杂一些, 上面的示例1 是对所有 smalldiv 统一设置背景色, 不够灵活.
这个示例通过 jQuery 的 $.fn.each 函数根据每个 smalldiv 的 class 分别设置背景色.
(HTML部分的代码和示例1 一样)
这里需要注意2个地方:
1. 代码中 this 的含义
这里的 this 是jQuery 对象, 也就是通过 $("#id"), $(".class") 之类的选择器获取的对象.
*注意* 这个 this 的位置是在 $.fn.toggle_back 的主函数体中.
这里的 this 是 DOM 对象, 所以通过 $(this) 才能变成 jQuery 对象.
至于为什么 each 中的this就是各个 DOM 对象, 那是因为 each 的实现中将 jQuery 对象转换为了 DOM 对象.
2. 插件代码最后的 return this;
这里之所以要 return this; 是为了实现 jQuery 的链式表达式. 也就是 return this; 之后, 可以接着调用其他 jQuery 函数.
比如 $(".class").toggle_back().css("color", "red");
上面的示例2中 $("#btn-plugin").click 函数可以改为如下:
下面通过一个 日期转换 的例子, 说明功能型插件的写法.
HTML 部分:
插件 js 只是简单的转换了一时间格式, 仅仅为了演示:
点击HTML页面上的按钮, 分别转换出不同的时间格式并显示在页面上.
上面的插件需要一个参数, 如果调用插件时没有带参数, 则导致js错误.
为了更好的用户体验, 下面给插件加入默认参数(也就是当前时间).
新的 plugin js如下:
HTML中调用插件时可以不用参数了
补充: 合并参数时, 使用了 $.extend, 这个方法的作用是将所有参数 合并成一个大的json对象, 有相同的key时, 后面的参数覆盖前面的参数.
$.extend 的第一个参数是 {}, 之所以这样, 是因为合并后, 会破坏第一个参数, 所以不能将 defaults 放在第一个.
说明示例如下: (用chrome的console窗口可以看到输出结果)
虽然 javascript 不是纯粹的面向对象的语言, 但是通过其强大的闭包功能, 也能构造出类似其他面向对象语言的公有/私有函数.
*功能型插件* 中的示例中3个函数 $.fn.dt_format.date, $.fn.dt_format.time, $.fn.dt_format.datetime 都是公有函数, 可以被插件使用者所覆盖.
比如, 将上面示例的HTML改为如下: (覆盖了插件中的 $.fn.dt_format.datetime 方法)
如果不想公开方法, 改变那3个函数定义方法即可:
这样, 插件使用者就不能覆盖 date, time, datetime 方法了.
是从 jQuery 官方网站的插件教程中总结出来的:
不要自定义语法
不要写死元素的id或者class, 将其以 options 的形式开放出来
提供 callback
本文转自wang_yb博客园博客,原文链接:http://www.cnblogs.com/wang_yb/p/4103137.html,如需转载请自行联系原作者