$.fn.extend 和 $.extend 可以批量的为 jQuery 添加对象方法或者类方法的扩展,当然你也可以直接 $.fn.objMethod = function() {} 和 $.classMethod = function() {} 来单个设定
阅读本文前希望你对 js 的 引用类型/对象 和 对象方法、原型方法、类方法有一定的了解,最好是明确的认识
jQuery在日常的使用中都使用其别名 $,jQuery 是一引用类型,等同 js 的 Object Date Math 等,希望大家可以把这种基本知识点搞清楚,引用类型的实例才是对象
$ 实现的机制应该大致如下,一个封装了 new jQuery对象的方法(注意 new 一个自定义的引用的构造函数和不 new 的区别,new 的话指针指向当前上下文所产生的实力,不new的话指针指向的是当前window)
function $(id) {
return new jQuery(id);
}
OK,到这里我们很明确的知道 jQuery 是一个引用类型,大概是什么样子呢?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.color {
color: #f0f;
}
</style>
</head>
<body>
<div id="name">sallency</div>
<script type="text/javascript">
/**
* 按 jQuery 的思想仿造出的一个引用类型 当然我们这里只实现很简单的功能
* @param string id 只实现id选择器
* @return mixed
*/
function myQuery(id) {
//绑定当前对象
this.obj = document.getElementById(id);
//仿着 jQuery 写一个可以传递功能函数的 click 事件监听
this.click = function(lambadaFunc) {
// webkit 内核的 ie 的 attachEvent我就不写了
this.obj.addEventListener("click", function() {
//闭包 常用来立即执行一个匿名函数
(lambadaFunc)();
});
};
//属性设定和获取的方法
this.attr = function(key, val) {
if (val !== undefined) {
if (key == 'class') {
this.obj.className = val;
} else {
this.obj.setAttribute(key, val);
}
return "success";
} else {
if (key == 'class') {
return this.obj.className;
} else {
return this.obj.getAttribute(key);
}
}
}
this.html = function(content) {
if (content === undefined) {
return this.obj.innerHTML;
} else {
this.obj.innerHTML = content;
}
}
}
//山寨无底线 迎合你们的口味
function $(param) {
return new myQuery(param);
}
// new 的话就是生成一个当前域为当前引用类型的对象实例 你如果直接函数调用的话里面的 this 都是指向全局的 window
$('name').click(function(){
alert("execuse me? I am lambada function");
});
$('name').attr("class", "color");
$('name').html("new content");
document.write($('name').html());
</script>
</body>
</html>
当然我只是梳理下封装的理念,大概的就是这么回事
OK,看到这里你也知道 jQuery 也是一个引用类型,那就该让原型链出来了
// $.fn = $.prototype = jQuery.fn = jQuery.prototype
jQuery.fn.objMethod = function() {
alert("i am jquery obj method!");
}
jQuery.classMethod = function() {
alert("i am jquery class method");
}
这里要注意引用类型包含三大类:对象方法,原型方法,类方法
对象方法:引用类型内部定义好的,对象实例可继承 click hover 等
原型方法:在外部通过 Prototype 链后期加入的,对象可继承,你可以通过此方法封装自己的jQuery对象方法
类方法: 类型自身的方法,对象不会继承,$.get() $.post() $.ajax() 我们可以直接 jQuery.methodName() 来定义自己的jQuery的类方法
当我们需要做批量原型方法或类方法定义时就可以使用
//对象方法对象
var jqueryObjMethod = {
obj_method_1: function() {
alert("obj_method_1");
},
obj_method_2: function() {
alert("obj_method_2");
}
}
//类方法对象
var jqueryClassMethod = {
class_method_1: function() {
alert("class_method_1");
},
class_method_2: function() {
alert("class_method_2");
}
}
//原型扩展对象方法
$.fn.extend(jqueryObjMethod);
//扩展类方法
$.extend(jqueryClassMethod);
这样我们就扩充了 jQuery 的对象方法和类方法