编写jQuery插件的方法和注意点
编写jQuery插件的方法和注意点
插件的种类
jQuery的插件主要分为3种类型。
1. 封装对象方法的插件
这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件。
2. 封装全局函数的插件
可以将独立的函数加到jQuery命名空间之下。如解决冲突用的jQuery.noConflict()方法,常用的jQuery.ajax()方法以及去除首位空间的jQuery.trim()方法等。
3. 选择器插件
个别情况下,会需要用到选择器插件。例如用:color(red)来选择所有红色字的元素之类的。
插件的基本要点
① jQuery插件的文件名推荐命名为jquery.[插件名].js,以免和其他JS库插件混淆。
② 所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上。
③ 在插件内部,this指向的是当前通过选择器获取到的jQuery对象,而不像一遍的方法那样,例如:click()方法内部的this指向的是DOM元素。
④ 可以通过this.each来遍历所有元素。
⑤ 所有的方法或函数插件,都应当以分号结尾,否则压缩的时候可能出现问题,为了更稳妥些,甚至可以在插件头部先加一个分号,以免他人的不规范代码给插件带来影响。
⑥ 插件应该返回一个jQuery对象,以保证插件的可链式操作。除非插件需要返回的是一些需要获取的两,如字符串或者数组等。
⑦ 避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示,这样可以避免冲突。当然,也可以使用闭包技巧来回避这个问题,使插件内部使用$来作为jQuery的别名。
jQuery插件的机制
jQuery提供了两个扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法。前者用于扩展之前提到的3种类型插件中的第一种,后者用于扩展后两种插件。这两个方法都接受一个参数,类型为Object。Object对象的“名/值对”分别代表"函数或方法名/函数主体"。
jQuery.extend()方法除了可以用于扩展jQuery对象之外,还有一个很强大的功能,就是用于扩展已有的Object对象。
jQuery.extend()方法经常被用于设置插件方法的一系列默认参数,如:
function foo(options) {
options = jQuery.extend({
name: "bar",
length: 5,
dataType: "xml" /* 默认参数*/
}, options); /* options为传递的参数 */
};
在传递的参数options对象中设置了相应的值,那么就使用设置的值,否则使用默认值。
编写jQuery插件
1.封装jQuery对象方法的插件.
;(function($) {
jQuery.fn.extend({ // $.fn.extend({
"color": function(value) {
return this.css("color", value);
}
});
})(jQuery);
2.封装全局函数的插件
这类插件是在jQuery命名空间内部添加一个函数。利用jQuery.extend()方法直接对jQuery对象进行扩展。
;(function($) {
$.extend({
ltrim: function(text) {
return (text || "").replace(/^\s+/g, "");
},
rtrim: function(text) {
return (text || "").replace(/\s+$/g, "");
}
});
})(jQuery);
使用函数方式jQuery.ltrim(" test "),jQuery.rtrim(" test ");
3.自定义选择器
自定义选择器个人感觉使用会少一些。目前只需要了解下就可以了,感兴趣的可以查看《锋利jquery》7.6.5 编写jQuery插件
最后,以上算是个人看书的笔记,浓缩知识点,提高学习的效率,查阅的便捷。
最新文章
- IE6下png格式图片显示问题
- CF 672C Recycling Bottles[最优次优 贪心]
- 【caffe】执行训练
- hadoop2.2.0部署
- javascript AOP实现
- 源码安装apache及配置转发
- (简单) POJ 1321 棋盘问题,回溯。
- Java 验证用户名、密码
- watchdog(IWDG)
- [cogs2701]动态树
- Linq 连接运算符:Concat
- 【IOS 开发】Object - C 语法 之 流程控制
- js动态创建元素之一--document.write
- vue: WebStorm设置快速编译运行
- jquery移除元素时会自动解绑事件
- [c++]base64编解码 and image
- APICloud 真机连接失败
- Java设计模式(7)装饰模式(Decorator模式)
- Android 在已有的项目上创建新的项目
- Udp打洞原理和源代码。
热门文章
- python 临时修改模块搜索路径
- JavaScript--查看代码运行效率console.time()与console.timeEnd()用法
- 散列表(Hash Table)
- 小爬爬6.scrapy回顾和手动请求发送
- framework7日期插件使用
- @hdu - 6687@ Rikka with Stable Marriage
- EL表达式简单总结
- 捕捉WPF应用程序中XAML代码解析异常
- Knative Tracing 介绍
- uva 11665 Chinese Ink (几何+并查集)