手写jQuery与源码分析

• 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);