howieyi

No pains, No gains!

View project on GitHub

jQuery 技术内幕

jQuery 构造函数

// 这里的参数 undefined 拿到的是真的 undefined
var jQuery = (function(window, undefined){
    var jQuery = function(selector) {
        return new jQuery.fn.init(selector);
    };
    jQuery.fn = jQuery.prototype = {
        init: function(){ },
        extend: function(){ }
    };
    // 可以共用 jQuery 的 this
    // ==> jQuery.fn.init = jQuery
    jQuery.fn.init.prototype = jQuery.fn;

    // 返回 jQuery
    return jQuery;
})(window);

jQuery.fn.extend // 对 jQuery 的原型链进行扩展
jQuery.extend // 直接添加 jQuery 静态

重载

function addMethod(obj, name, fn){
    var old = obj[name];
    obj[name] = function(){
        // arguments 实参
        if(fn.length === arguments.length){
            return fn.apply(this, arguments);
        }else if{
            return old.apply(this, arguments);
        }
    }
}
var objs = [1, 2, 3];
addMethod(objs, 'find', function(){return 0;});
addMethod(objs, 'find', function(one){return 1;});
addMethod(objs, 'find', function(one, two){return 2;});

链式调用

var obj = {
    a: function(){
        return this;
    },
    b: function(){
        return this;
    }
};

obj.a().b(); // 链式调用,每个 function 返回this

»> 0 按位操作(二进制操作,加快运算)

var obj = new Array(10);
var length = obj.length >>> 0; // 二进制位运算,加快运算

短路操作 && ||

// 避免使用 if else 逻辑
a && a();
b || a();

sizzle jQuery 选择器引擎

hook 映射 表驱动原理(用来解决一种或多种情况的处理)

(function(window, undefined){
    var class2Types = {};
    jQuery.each('Array Object Number Function Error Boolean Date RegExp Symbol String').split(' '), function(type){
        class2Types['[object ' + type + ']'] = name;
    });
})(window);

// 使用

连贯接口

  • 链式调用
  • 命令查询媒体(重载)
  • 参数映射

ready(DOMContentedloaded)

// ==> $.ready();
window.addEventListener('DOMContentedloaded', function(){
    // ready....
});

// ie 利用滚动条的一个方法,抛错处理
(function(){
    function IEContentLoaded(){
        (function(){
            try {
                document.documentElement.doScroll('left');
            } catch(e) {
                setTimeout(arguments.callee, 50);
            }
        })();
    }
})();