JQuery插件开发简述
jQuery优秀的插件不计其数,个人还是看好JQ对DOM完善的操作性。
先了解几个概念
把代码放在闭包中
(function ($) {
$.fn.extned({
//code here
});
})(jQuery);
上述代码等价于
var justFun = function ($) {
$.fn.extned({//Code here
});
}
justFun(jQuery);
为什么要这样,说的官方一点避免全局依赖,避免第三方库的兼容,兼容jQuery与$ 总之好处多多(一般还会在前面加‘;’,体现压缩代码需要遵循规则)。
为插件提供默认选项
可以通过jQuery的extend功能来设置这些选项,具体猛击这里：JQuery.extend()与JQuery.fn.extend()
var defaults = {
Text: "this is my first JqPlug.",
Color: "red"
};
var setting = $.extend({}, defaults, options);
遵循链式操作
$.fn.Tabs = function (options) {
return this.each(function () {
$(this).xxx; //code here
})
}
这样我们的插件将会支持链式操作
把一次性的代码放在循环体外
如插件的配置参数
var defaults = { Text: "this is my JQPlug",
Color: "red"
};
$.fn.textHover = function (options) {
var setting = $.extend({}, defaults, options); //code here
}
简单的说如果有一段代码是一堆默认值,只需要被实例化一次,而不是每次调用你插件功能的时候都实例化，你应该把这段代码放在插件方法的外面。
这样可以让你的插件运行的更高效,节省内存。
管理好 prototype(原型与面向对象)
function Person(options){
this.name=”Irving”,
this.age=”22”,
this.photo=null
}
Person.prototype={
generate:function(){
//code here
} }
这样有什么好处呢,保证数据是每一个实例自己的,可以用this来引用,避免重复代码,节省内存,好吧 总之各种好处。
闭包传递正确的this引用(js中的闭包还是要理解一下的)
可以声明变量来保存 var $this =this;这个要看具体应用,高级话题,我也不太深入 哈哈哈!
插件的种类
ok,继续说几点概念,开发JQ插件有几种方式呢!
封装全局函数($.ajax等方法) 封装对象方法(如$('xx').appendto等方法) 选择器插件(自定义自己的选择器 如$('girlfind bf guy:money(1000000…)'))
一般情况下选择器插件可以是不必要的,原因不解释,但特殊情况下还是蛮有用的,如做一个隔行变色的插件,后面将会介绍,当然其他方式也可以实现。
jQuery插件的机制就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法来扩展jQuery的功能。
扩展全局函数插件
; function ($) {
$.extend({
getSize: function () { },
getPage: function () { } //……
});
} (jQuery)
或者简写
jQuery.getSize=function(){}; jQuery.getPage=function(){};
备注:上述的写法当然可以加上命名空间jQuery.myNameSpace = { getSize: function () { }, getPage: function () { } };
调用jQuery.getSize();或$.getPage();
优点就是方便,缺点就是破坏JQ本身的贞操,具体什么时候用看最后摘抄的2条,这能为我们扩展什么功能呢,如取出字符串中的空字符串,序列化对象数据,数据验证,数值的操作等等。
扩展对象方法插件
要扩展对象方法就需要在$.fn.extend({});上扩展我们的插件,如扩展一个能使元素淡出的动画(只是为了示例),我们命名为jquery.myFadeOutPlugin.js
; (function ($) {
$.fn.extend({ "myFadeOutPlugin": function (value) { return this.fadeOut("5000"); } });
})(jQuery);
或者简写
; (function ($) {
$.fn.myFadeOutPlugin = function () { return this.fadeOut("5000"); };
})(jQuery);
备注:如果需要多个方法;(function($){$.fn.extend({ "myFadeOutPlugin":function(){ return this.fadeOut("5000"); }, "myFadeInPlugin":function(){} //and so on }); })(jQuery);
调用(注意这里的return为了链式)
$('#XX').myFadeOutPlugin();
这里只有一个元素(没有元素的遍历)并没有提供任何默认参数
如果有多个元素呢,OK ,so easy!
(function ($) {
$.fn.myFadeOutPlugin = function () { return this.each(function () { $(this).fadeOut("5000"); }); };
})(jQuery);
要提供默认参数呢如 渐变的时间,ok,改造如下
(function ($) {
var defaults = { time: 5000 }; $.fn.myFadeOutPlugin = function (options) { options = $.extend({}, defaults, options); return this.each(function () { $(this).fadeOut(options.time); }); };
})(jQuery);
调用:
$('.div').myFadeOutPlugin({time:1000});//当然也可以使用缺省值
一般开发插件都是基于对象方法的插件,尽量保持JQAPI不变动,具体神马功能自己挖掘吧!
OK,最后给一个模板方便自己
选择器插件
I’am wroking on my way,waiting! 表格渐变插件介绍一个Ajax插件与反射的案例
附一个模板
/*
* @Extends jquery.1.7.2
* @Overview 搜索提示框
* @Author Irving
* @Email * @version 0.xx
* @Date xxxx年1月4日1:11:33
* @Copyright (c) xxxx Irving
*/
(function ($) {
var defaults = { xxx: xxx }; //params
$.fn.yourPlugName = function(options){
options = $.extend(defaults, options);
this.each(function(){
//code here
});
};
})(jQuery);
摘抄一段话
jQuery插件的文件名推荐命名为jquery.[插件名].js，以免和其他JS库插件混淆。
所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身。 可以通过this.each 来遍历所有的元素 在插件头部加上一个分号，以免他人的不规范代码给插件带来影响。
所有的方法或函数插件，都应当以分号结尾，以免压缩时出现问题
除非插件需要返回的是一些需要获取的变量，插件应该返回一个jQuery对象，以保证插件的可链式操作。
利于jQuery.extend()方法设置插件方法的默认参数，增加插件的可用性。 在插件内部,this指向的是当前通过选择器获取的JQuery对象，而不像一般方法那样,内部的this指向的是DOM元素。
网络上说开发插件是多用data(.data()方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险),绑定事件用Bind(xxx,function(){});不过我还没领悟其中的奥秘。要想写出优秀的插件,需要对原生js理论有一定的功底,JQ api的熟练,看大牛们写的插件源码,Good luck!
