jQuery插件开发之jQuery.fn.extend(object)、$.fn.extend({})、$.fn.Xxx = function(){} 和$.extend() 或 jQuery.extend()
题外话: jQuery、jquery、$ 在jQuery编程时是同一含义或同一对象, 对于初学者来说, 会带来点困惑。这在Javascript的世界里特别常见，就是同一个事物的不同命名。这让我想到了一件事
当时也被 Vanilla Javascript Application 这个名字“欺骗”过，原来这就是原生Javascript编程啊。
jQuery为开发插件（PLUGIN DEFINITION）提拱了两个方法
Q&A：怎样为jQuery对象设计自定义方法, 强调一点,是"jQuery对象"而非jQuery自身.
请区别为jQuery设计自定义方法 //可以理解为对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
定义jQuery插件语法（发现语法2在很多github的开源项目中很常见，如jQuery pagination plugin）
例1 语法1 jQuery.fn.extend(object); 因为: jQuery.fn = jQuery.prototype
<head>
<script type="text/javascript">
$.fn.extend({
alertWhileClick:function() {
$(this).click(function(){
alert($(this).val());
});
}
});
$(function(){
$("#input1").alertWhileClick();
});
</script>
</head>
<body>
<input id="input1" type="text" value="Oman" />
</body>
等价 语法2
<script type="text/javascript">
$.fn.alertWhileClick = function() {
$(this).click(function(){
alert($(this).val());
});
};
$(function(){
$("#input1").alertWhileClick();
});
</script>
<body>
<input id="input1" type="text" value="Oman" />
</body>
例2 自定义tagInput
_$.fn.tagsInput = function (u) { var e = this, f = jQuery.extend({ interactive: !0, defaultText: "add a tag", minChars: 0, width: "300px", height: "100px", autocomplete: {}, hide: !0, delimiter: ",", unique: !0, removeWithBackspace: !0, placeholderColor: "#666666", autosize: !0, comfortZone: 20, inputPadding: 12, preventTab: !0 }, u), o; return f.autocomplete = jQuery.extend({ onSelect: function (t) { //TODO } } };
//调用端
jQuery("#tb_tags").tagsInput({
height: "20px",
minInputWidth: "203px",
width: "205px",
defaultText: "回车输入",
autocomplete: {
lookup: u,
noSuggestionNotice: t,
showNoSuggestionNotice: !0
}
})
为jQuery设计自定义方法
语法现象1:
$.extend() 或 jQuery.extend() 如 jQuery.extend(object) 或 jQuery.extend({//TODO},{})
//可以理解为为jQuery类添加类方法或静态方法
【例子1.】:
//设计部分
jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } });
//调用部分,还是必须通过jQuery进行引用 jQuery.min(2,3); // 2 jQuery.max(4,5); // 5
语法现象2:
$.extend(object, {}) = jQuery.extend(object,{})
1 $.extend($.validator.messages, { 2 required: "必选字段", 3 remote: "请修正该字段", 4 email: "请输入正确格式的电子邮件", 5 url: "请输入合法的网址", 6 date: "请输入合法的日期", 7 dateISO: "请输入合法的日期 (ISO).", 8 number: "请输入合法的数字", 9 digits: "只能输入整数", 10 creditcard: "请输入合法的信用卡号", 11 equalTo: "请再次输入相同的值", 12 accept: "请输入拥有合法后缀名的字符串" 13 });
这代码是在研究jQuery.validation插件时,验证提示消息汉化时遇到的的,validation版本v1.15.1,把$改写成jQuery是等效的.
其中,第1行$.validator是validation插件预定义对象引用名(这点应该是通过查询validation开发API查到的吧), 当然你运行这就代码前,必须先引入jQuery.validate.js文件,至此,我非常好奇,jQuery.validate插件是怎样coding的.
参考
