对象的构建：

- 采用原型式的结构，使用构造函数，这样的好处节省了内存空间，性能上得到了优化

- 但是ajQuery类这个结构与目标jQuery的结构的还是有很大不一致：没有采用new操作符；return返回的是一个通过new出来的的对象。

jQuery多库共存处理：

1、引入jquery时，jQuery内部先将当前window对象上的jQuery和$记录下来

var _jQuery = window.jQuery,
    _$ = window.$;

2、引入jquery后，jQuery占领了window对象上的jQuery和$

3、手动执行$.noConflict()函数，重新让出jQuery和$，还原到占领之前的情况

jQuery.noConflict = function( deep ) {
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }
    if ( deep && window.jQuery === jQuery ) {
            window.jQuery = _jQuery;
        }
        return jQuery;
    };
}

jQuery中ready与load事件：

- ready先执行，load后执行

- ready在页面DOM构造完成后执行，无需等待图片等外部文件的加载

- load在页面加载完毕后才执行

- 网页中有图片时，ready先执行；网页无图片时，load先执行，因为ready异步？

DOMContentLoaded与load

- DOMContentLoaded 事件的触发时机为：HTML解析为DOM之后触发，无需等- 待样式表、图像和子框架的完成加载。

- load 意思就是：当一个资源及其依赖资源已完成加载时，将触发 load 事件

- 简而言之，二者触发时间的区别在于：DOMContentLoaded 在 HTML 文档本解析之后触发，而 load 是在 HTML 所有相关资源被加载完成后触发

无new构建原理：检测参数类型，并将强制转换为jquery对象

const jquery = function(selector){
    if(!(selector instanceof jquery)){
        return new jquery(selector);
    }
    
    let elem = document.querySelector(selector[0]);
    this[0] = elem;
    this.length = 1;
    this.context = document;
    this.selector = selector[0];
    return this
}

使用立即执行函数解决命名空间与变量污染的问题

(function(global){
    global.jquery = function(){...}
})(window)

jQuery的核心理念，简洁的API、优雅的链式、强大的查询与便捷的操作

2、简单模拟

function aDeferred(){
    var arr = [];
    return {
        then: function(fn){
            arr.push(fn);
            return this;
        },
        resolve: function(args){
            var returned;
            arr.forEach(function(fn, i){
                var o = returned || args;
                returned = fn(o);
            })
        }
    }
}

1、使用$.Deferred

var dfd = $.Deferred()
dfd.then(function(preVale){
    return 2 * preVale;
}).then(function(preVale){
    return 3 * preVale;
}).then(function(preVale){
    console.log("使用$.Deferred代码结果:"+preVale);
});
dfd.resolve(2);

1、

$.data()
eg:
var ele1 = $("#aaron");
$.data(ele1, 'a', '111' );

2、

$(ele).data()
1）设置值
eg：
var ele1 = $("#aaron");
ele1.data('a', '111'); 
2）获取值
eg：
var ele1 = $("#aaron");
ele1.data('a');

function fn1(val){
    console.log('fn1 says ' + val);
}
var callbacks = $.Callbacks("unique");
callbacks.add(fn1); 
callbacks.add(fn1); 
callbacks.add(fn1); 
callbacks.fire("foo");
结果： fn1 says foo

function Callbacks(options){
    var list = [],
    self,
    var firingStart,
    memory;
    
    function _fire(data){
        memory = options === 'memory' && data;
        firingIndex = firingStart || 0;
        firingStart = 0;
        firingLength = list.length;
        for(; list && firingIndex < firingLength;  firingIndex++ ){
            list[firingIndex](data)
        }
    }
    
    self = {
        add:function(fn){
            var start = list.length;
            if(options == 'unique'){
                if(-1 === list.indexOf(fn)){
                    list.push(fn);
                }
            } else {
                list.push(fn);
            }
            if(memory){
                firingStart = start; // 获取最后一个值
                _fire(memory);
            }
        },
        fire: function(args){
            if(list){
                _fire(args);
            }
        }
    }
    return self;  
}

function fn1(val) {
    console.log("fn1 says " + val);
}
var cbs = $.Callbacks('once');
cbs.add(fn1);
cbs.fire('foo');
cbs.fire('foo');

function Callbacks(options) {
    list = [],
    self;
    self = {
        add: function(fn) {
            list.push(fn)
        },
        fire: function(args) {
            if(list){
                list.forEach(function(fn){
                    fn(args);
                });
                if(options==='once'){
                    list = undefined;
                }
            }
        }
    }
    return self;
}

默认回调对象设计

function fn1(val){
    console.log("fn1 says:"+val);
}
function fn2(val){
    console.log("fn2 says:"+val);
}
var cbs = $.Callbacks();
cbs.add(fn1);
cbs.fire("foo");
console.log("............................");
cbs.add(fn2);
cbs.fire("bar");

模拟代码

function Callbacks(){
    var list = [],
    self;
    self = {
        add: function(fn){
            list.push(fn)
        },
        fire: function(args){
            list.forEach(function(fn){
                fn(args);
            })
        }
    }
    return self;
}
function fn1(val){
    console.log("fn1 says:"+val);
}
function fn2(val){
    console.log("fn2 says:"+val);
}

var cbs = Callbacks();
cbs.add(fn1);
cbs.fire("foo");
cbs.add(fn2);
cbs.fire("bar")

function f1(value){
    alert(value);
}
function f2(value){
    alert("fn2 says：" + value);
    return false;
}

var callbacks = $.Callbacks();
callbacks.add(f1);
callbacks.fire("foo!");

callbacks.add(f2);
callbacks.fire("bar!");

var callbacks = $.Callbacks();
callbacks,add(function(){
    alert(1);
}) 
callbacks.add(function(){
    alert(2);
});
callbacks.fire();

var $$ = ajQuery = function(selector) {
    retrun new ajQuery.fn.init(selector);
}

ajQuery.fn = ajQuery.prototype = {
    naem: 'aaron',
    init: function(selector) {
        this.selector = selector;
        return this;
    },
    constructor: ajQuery
}

ajQuery.fn.init.prototype = ajQuery.fn;