JQuery插件的学习
此前一直想就关于Jquery插件的开发,做一个深入的学习,由于各种原因,当然主要是自己太懒了...今天就系统分析一下Jquery插件的开发(参考了http://www.xprogrammer.com/812.html)
1.对JQuery自身的扩展插件
直接上代码,代码中体会
$.extend({
handler:function(event){
.....//代码区
}
});
主要是$.extend()方法的运用,回头自习看一下$.extend()的运用.
2.对HTML标记或页面元素进行扩展
使用这种插件时,需要首先引用经过JQuery包装的页面元素,如:$('selecter').method();
示例代码:
(function($){
$.fn.handler=function(event){
...//代码区
};
})(JQuery)
个人感觉就是一个匿名函数的使用,当然$.fn才是这种方式的精髓.
3.不要用在页面显式调用JQuery的方法,而是通过直接添加JQuery插件脚本引用,即可实现对该插件的调用
(function($){
$.handler={
set:function(){
},
get:function(){
}
....
};
$(function(){
$.handler.set();
});
})(JQuery);
使用的时候,需要对外部脚本引用
插件的基本要点
在编写插件的时候,我们需要记住这些要点,虽然不照着这么做不会影响使用,但是要是你的插件是不规范的代码,那何必花苦心思去写插件.JQuery插件的文件名推荐命名为jquery.[插件名].js,以免和其他JavaScript库插件混淆.例如命名为jquery.color.js
所有的对象方法都应当附加到JQuery.fn对象上,而所有的全局函数都应当附加到JQuery对象本身上.
在插件内部,this指向的是当前通过选择器获取的JQuery对象,而不像一般的方法那样,例如click()方法,内部的this指向的是DOM元素
可以通过this.each来遍历所有元素.
所有的方法或函数插件,都应当以分号结尾,否则压缩的时候可能出现的问题.为了更稳妥些,甚至可以在插件头部先加上一个分号,以免他人的不规范代码给插件带来影响.具体方法可以参考后面的代码.
插件应该返回一个jQuery对象,以保证插件的可链式操作.除非插件需要返回的是一些需要获取的量,例如字符串或者数组等.
避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示.这样可以避免冲突.当然,也可以利用闭包这种技巧来回避这个问题,使插件内部继续使用$作为jQuery的别名.很多插件都是这么做的.
好的关于jQuery插件的开发就先到这里......
浙公网安备 33010602011771号