jQuery整体架构-核心功能函数揭秘 #1

george-wq · 2019-06-26T16:00:11Z

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).调用本身的构造函数

george-wq changed the title ~~JavaScript深入之从原型到原型链~~ jQuery整体架构-核心功能函数揭秘 Jun 30, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

jQuery整体架构-核心功能函数揭秘 #1

jQuery整体架构-核心功能函数揭秘 #1

george-wq commented Jun 26, 2019 •

edited

Loading

jQuery整体架构-核心功能函数揭秘 #1

jQuery整体架构-核心功能函数揭秘 #1

Comments

george-wq commented Jun 26, 2019 • edited Loading

2.1.1 jQuery整体架构-核心功能函数揭秘

jQuery无new构建实例

共享原型

extend源码解析

注意:

george-wq commented Jun 26, 2019 •

edited

Loading