jQuery整体架构-核心功能函数揭秘 #1
Description
2.1.1 jQuery整体架构-核心功能函数揭秘
JavaScript进阶攻略之jQuery整体架构-核心功能extend函数揭秘,其中包含三个部分: jQuery无new构建实例、共享原型、extend源码解析
jQuery无new构建实例
无new化构建:
$ 就是jQuery的别称
$() 就是在创建jQuery的实例对象
举个简单的例子：
(function(root){
var jQuery = function() {
return new jQuery.prototype.init();
}
root.$ = root.jQuery = jQuery;
})(this);使用自执行函数将$符挂载到Window对象上
共享原型
举个简单的例子：
(function(root){
var jQuery = function() {
return new jQuery.prototype.init();
}
jQuery.prototype = {
init: function(){},
css: function(){}
}
jQuery.prototype.init.prototype = jQuery.prototype;
root.$ = root.jQuery = jQuery;
})(this);jQuery prototype上的init方法和jQuery共享原型对象
extend源码解析
demo.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="jQuery.1.0.1.js"></script>
<script>
console.log($);
console.log($());
任意对象扩展
浅拷贝
var obj = $.extend({name: 'george', age: '30'}, {salary: '30K'});
console.log(obj);
深拷贝
var obj = $.extend(true, {salary: '30K', person: {sex: '男'}}, {age: '30', person: {name: 'bbb'}});
console.log(obj);
jQuery本身扩展
$.extend({
work: function(){}
});
jQuery.work();
jQuery实例对象扩展
$.fn.extend({
sex: '男'
});
$().sex
</script>
</body>
</html>jQuery.1.0.1.js:
(function(root){
var jQuery = function() {
return new jQuery.prototype.init();
}
jQuery.fn = jQuery.prototype = {
init: function(){},
css: function(){}
}
//extend
jQuery.fn.extend = jQuery.extend = function() {
console.log(arguments);
var target = arguments[0] || {};
var length = arguments.length;
var i = 1;
var deep = false;
var name, option, src, copy, copyIsArray, clone;
if (typeof target === 'boolean') {
deep = target;
target = arguments[i] || {};
i++;
}
// 第一个参数一定要是Object
if (typeof target !== 'object') {
target = {};
}
if (length === i) {
target = this;
i--;
}
for (; i < length; i++) {
// 貌似不用!=null 判断也行
if ((option = arguments[i]) != null) {
for (name in option) {
src = target[name]
copy = option[name];
if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {
if (copyIsArray) {
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : []
} else {
clone = src && jQuery.isPlainObject(src) ? src : {}
}
target[name] = jQuery.extend(deep, clone, copy);
} else if (copy != undefined) {
target[name] = copy;
}
}
}
}
return target;
}
jQuery.extend({
isPlainObject: function(obj) {
return toString.call(obj) === '[object Object]';
},
isArray: function(obj) {
return toString.call(obj) === '[object Array]';
},
});
// 共享原型
jQuery.fn.init.prototype = jQuery.fn;
root.$ = root.jQuery = jQuery;
})(this);注意:
-
extend第一个对象的数据类型必须是Object
-
extend方法在只有一个参数时参数类型必须是对象
-
new 一个实例 (var j = new jQuery())
1).创建一个空对象
2).调用本身的构造函数