jQuery本质上就是用javascript代码写成的各种方法的集合,之所以jQuery会存在,是为了使JS代码编写更加简洁、易懂、快速化开发。
javascript工作的基本流程:
1 选择目标元素
2 对目标元素的操作jQuery的简化操作:
1 尽量封装所有变量
2 简单的调用方法函数
所以,jQuery以对象的方式绑定到window对象,实现相关操作。
(function (ROOT)
{
// 构造函数
var jQuery = function (selector)
{
return new jQuery.fn.init(selector);
};
// 生成原型对象并覆盖prototype对象
jQuery.fn = jQuery.prototype = {
// 每当我们定义一个函数,系统都会隐式地为这个函数添加一个原型对象,存放在函数的prototype属性内。这个原型是通过构造函数Object构造而成的。
// 如果加上construtor属性(属性值是这个函数的引用),所以添加新对象就不需要在原来的原型对象上逐个添加,而是重新构建一个新对象,统一在新对象内定义方法和属性,然后把这个新对象赋值给函数的prototype属性覆盖原来的原型对象。
construtor: jQuery,
version: '1.0.0',
init: function (selector)
{
// 获取相关元素
this[0]= document.querySelector(selector);
return this;
},
// 在原型上添加方法
toArray: function (){},
get: function (){},
each: function (){},
ready: function (){},
first: function (){},
slice: function (){}
// ... ...
};
// 为什么这么写,因为有些操作不需要选择元素,所以jQuery.fn.init.prototype赋值对象
jQuery.fn.init.prototype = jQuery.fn;
// 为什么用俩个对象
// 如果用过jQuery应该知道有一些方法是这么用,比如$.ajax()
// 显然他不需要选择器,所以$.ajax() === jQuery.ajax,也就是jQuery.extend中的方法。通过调用jQuery.extend()方法添加
// 如果用到选择器,那么$(xxx).xx(),同理等于jQuery().xx(),也就是也就是jQuery.fn.extend中的方法。通过调用jQuery.fn.extend()方法添加
jQuery.extend = jQuery.fn.extend = function (options)
{
var target = this;
for (name in options)
{
target[name] = options[name];
}
return target;
};
// 调用extend方法,添加到构造函数 $.xx = jQuery.xx
jQuery.extend({
isFunction: function (){},
type: function (){},
parseHTML: function (){},
parseJSON: function (){},
ajax: function (){
return 1;
}
});
// 调用fn.extend方法,添加到原型上 $(init).xx = jQuery(init).xx
jQuery.fn.extend({
queue: function () {},
promise: function () {},
attr: function () {},
prop: function () {},
addClass: function () {},
removeClass: function () {},
val: function (v) {
v = this[0].defaultValue;
return v;
},
css: function () {
},
html: function (el) {
el = this[0].innerText;
return el;
}
});
// ...
// $符号的由来,实际上它就是jQuery,一个简化的写法,在这里我们还可以替换成其他可用字符
ROOT.$ = jQuery;
// 简化打印
ROOT.$$ = function (...d)
{
return console.log(...d);
};
})(window);