无中生有,如何编写一个最简单的jQuery插件.
首先是最基础的,大多数乃至99%的jQuery插件都会用到的代码介绍一下,一共就2条.
1. extend()函数,参数是一个Object,为一个对象做扩展,添加一些方法或者属性.比如:
jQuery.extend({
hello:function(){
alert("say hello");
}
});
这是为jQuery类本身扩展了新的方法hello,也可以通过$.fn.extend()为jQuery对象添加方法.在插件的一般开发中,都是添加到对象的.如果这还不能理解的话,可以把jQuery想象成是一个类,直接extend就相当于给它添加静态方法.通过$.fn去extend就相当于给jQuery的prototype扩展,要在实例对象上才能调用.
2. (function($){})(jQuery) 这个代码的含义简单说就是一个匿名函数的执行,(fun1)()表达的是一个名为fun1的函数执行.这里面function($){}这个匿名函数就是代替了fun1的位置.这里这个匿名函数的执行,传入的实参jQuery对象,匿名函数中用$这个形参去接收.
好了知道了上面的2个比较关键的点,我们就可以自己写一个控件了.我们希望这个控件实现的功能就是对input做限制,限制它输入的最大长度.我们希望它的使用看起来是这样的:
$(".inputlimt").limit({
max:2
});
//为所有class是inputlimit的标签加上最大长度为2的限制.
如此通过一个配置对象设置插件的参数,我们搭起插件的骨架.
(function($){
$.fn.setmaxlen = function(options){
var opts = $.extend({},$.fn.setmaxlen.defaults,options);
};
$.fn.setmaxlen.defaults = {
max:2
};
})(jQuery);
上面的代码就是插件的骨架了,构建了一个闭包环境后,扩展了jQuery对象,添加了一个setmaxlen方法和一个setmaxlen.defaults对象.在使用配置信息的时候,不断向空对象中填充.defaults对象对外部开放,可以直接修改.
现在在setmaxlen函数中继续编写功能,加上长度限制的代码:
(function($){
$.fn.setmaxlen = function(options){
var opts = $.extend({},$.fn.setmaxlen.defaults,options);
return this.each(function(){
var $this = $(this);
$(document).delegate($this,"keyup",function(e){
var l = parseInt(opts.max);
limitDo.call($this,l)
});
var len=function(s){//获取字符串的字节长度
s=String(s);
return s.length+(s.match(/[^\x00-\xff]/g) || "").length;
//返回字符长度 + 从原字符中提取的所有双字节字符的长度
}
limitDo=function(limit){
var val=$(this).val();
if(len(val)>limit) {
while(len(val=val.substr(0,val.length-1))>limit);
$(this).val(val);
}
}
});
};
$.fn.setmaxlen.defaults = {
max:2
};
})(jQuery);
在闭包区域还可以通过$.fn设置暴露的函数,或者直接function fun(){}设置私有函数.这些都是可以的,一般性的插件就是如此.完整代码如下:
<html>
<head>
<script type="text/javascript" src="http://www.ostools.net/js/jquery/jquery-1.7.2.js"></script>
<script>
(function($){
$.fn.setmaxlen = function(options){
var opts = $.extend({},$.fn.setmaxlen.defaults,options);
return this.each(function(){
var $this = $(this);
$(document).delegate($this,"keyup",function(e){
var l = parseInt(opts.max);
limitDo.call($this,l)
consolelog();
});
var len=function(s){//获取字符串的字节长度
s=String(s);
return s.length+(s.match(/[^\x00-\xff]/g) || "").length;
//返回字符长度 + 从原字符中提取的所有双字节字符的长度
}
limitDo=function(limit){
var val=$(this).val();
if(len(val)>limit) {
while(len(val=val.substr(0,val.length-1))>limit);
$(this).val(val);
}
}
});
};
function consolelog(){
console.log("绑定执行成功")
};
$.fn.setmaxlen.defaults = {
max:2
};
})(jQuery);
</script>
</head>
<body>
<input type="text" id="numonly" />
<input type="text" id="sss" />
<script>
$("#numonly").setmaxlen();
</script>
</body>
</html>