第一次写东西,肯定有很多瑕疵甚至错误,望大家谅解并斧正!
现在的插件有很多,读懂代码并在需要的时候对其进行扩展也是非常必要的。接下来介绍一下jquery插件的一些写法:
1.关于引用插件,这点我想不用说了,head里面引入标签<script type="text/javascript" src="abc.js"></script>这个src里面写要引入的js的地址即可。
2.关于全局跟对象函数。
a.jquery的某些功能是通过全局函数提供的。所谓全局函数,实际上就是jquery对象的方法,可以直接通过jQuery.foo()或者$.foo()的方式进行引用该方法(假如方法名是foo的话)。
比如:我们想向jquery的命名空间添加一个函数foo(),那么可以这么写:
jQuery.foo = function (){
alert("this is function foo.........");
}
这样写好后,把这段代码复制到一个新建的js文件,比如叫abc.js,那么在你的html页面中导入该js后,我们就可以使用$.foo()来调用该函数了。
如果需要多个这样的函数,那直接在该js里继续添加这样的函数即可,另外也可以通过$.extend()函数来使函数定义看起来更清晰:
$.extend({
foo:function(){
alert("this is function foo......");
},
bar:function(){
alert("this is function bar ........");
}
})
这样写好之后我们仍旧可以通过像$.foo()的方法来调用,这样写跟第一种写法的效果是一样的。
注意:但是这样一来就有一个问题,我们怎么确定我们的函数名foo不会跟别人写的冲突呢?这个很难保证,所以为了避免不同人写的js有冲突,我们需要给自己的插件取一个名字,也就是下面的写法:
jQuery.myplugin = {
foo:function(){
alert("this is function foo......");
},
bar:function(){
alert("this is function bar ........");
}
}
现在它们都是全局jQuery函数的方法,但调用方式会略微有不同,我们采用如下的调用方式:
$.myplugin.foo();
来调用,这样我们就可以尽量避免在全局函数中发生命名空间冲去的问题了。
b.jquery的对象方法。
对于需要操作具体元素的方法,我们需要扩展jQuery.fn对象:
jQuery.fn.abcd = function(){
alert("this is function abcd");
}
然后,我们就可以在任何选择符表达式之后调用这个方法了,比如:$('div').abcd();
由于jquery的选择器可能会匹配0个一个或者多个元素,因此在设计插件时必须考虑到这些情况。要做到这点,最简单的方式就是始终在方法的环境上调用.each()方法;
jQuery.fn.showAlert() = function(){
this.each(function(){
alert("this is the test function ");
});
}
同时,为了jquery用户能正常的使用连缀行为,我们需要在插件中返回一个jquery对象,否则,我们说该方法具有破坏性。
例如:上面的方法我们应该写成:
jQuery.fn.showAlert() = function(){
return this.each(function(){
alert("this is the test function ");
});
}
否则,我们在用完该方法后,可能导致其它方法无法进行连缀。
3.相关约定:
所有插件文件必须命名为jQuery.name.js,其中name为插件的名字。
尽量避免使用太简短,含糊的方法名。
jQuery插件不能假设$有效,相反,每次都应该使用完整的jQuery名称。
在较长的插件中,许多开发者会觉得不使用$简写方式会是代码不易阅读,为了解决这个问题,可以通过定义并执行函数的方式,在插件的作用域内定义局部的简写方式。定义并立即执行函数的语法如下:
(function($){
//函数代码
})(jQuery)
这个包装函数接受一个参数,在此我们为这个参数传递的是全局jQuery对象。由于参数被命名为$,因此在这个函数的内部可以使用$别名而不会导致冲突。
方法应该返回jQuery对象以保持连缀能力,如果匹配对象被修改,那么应该通过.pushStack()创建一个新的jQuery对象,而且返回这个新对象。如果返回的值不是jQuery对象,必须明确的加以说明。 方法定义必须以分号结尾,以便代码压缩程序能够正确的解析相应的文件。