JQuery模拟二------添加extend函数和简单选择器

在原来的基础上添加extend函数和#id选择器

//自调函数把window这个全局变量传入
(function(){
    //把jQuery和$另存一份
    var _jQuery = window.jQuery,_$ = window.$;
    //在上次的代码上添加选择器机制
    var jQuery = window.jQuery = window.$ = function(selector,context){
        return  new jQuery.fn.init(selector,context);

    }
    //对 HTML strings or ID strings进行判定
    /*可以把它看作是两个正则表达式串：
    第一个：^[^<]*(<(.|s)+>)[^>]*$
    第二个：^#(w+)$
    /^ 字符串开始
    [^<]* 匹配不包含<号的任意长度字符，长度可以为0
    (<(.|s)+ 匹配任意字符或空白符，长度必须大于等于1
    >)[^>]* 匹配不包含>号的任意字符，长度可以为0
    $ 字符串结束
    | 或
    ^ 字符串开始
    # 匹配符号#
    (w+) 匹配a-zA-z0-9，也就是所有英文字母及数字，长度大于等于1
    $/; 结束*/
    var quickExpr = /^[^<]*(<(.|s)+>)[^>]*$|^#(w+)$/;
    jQuery.fn = jQuery.prototype = {

        init:function(selector,context){
            selector=selector||document;
            context=context||document;
        //如果传入的是DOM 节点对象
        if ( selector.nodeType ) {
            this[0] = selector;
            this.length = 1;
            return this;
        }
        //对于选择器是字符串有可能是#id
        if ( typeof selector == "string" ) {
            // Are we dealing with HTML string or an ID?
            var match = quickExpr.exec(selector);
            console.log(match);
            // Verify a match, and that no context was specified for #id
            if ( match && (match[0] || !context)) {
                    var elem = document.getElementById( match[3] );
                    this.length=1;
                    return jQuery(elem);
                }
                selector = [];
            }
            //console.log("this is:"+Object.prototype.toString.call(this));
            return this;
        },
        //新增加一个方法用来取得或设置jQuery对象的html内容
        html:function(val){
            //遍历通过回调函数来设置innerHTML为val参数
            return jQuery.each(this,function(val){
                this.innerHTML=val;
            },val);
        },
        length: 0,
        jquery:"1.0.0",
        author:"BaiQiang",
        size:function(){
            return this.length;
        }
    };
    //简单的遍历函数
    jQuery.each=function(obj,callback,args){
        for(var i=0;i<obj.length;i++){
            callback.call(obj[i],args);
        }
        return obj;
    };
    //需要深入理解一下jQuery的复制函数写法
    jQuery.extend = jQuery.fn.extend = function() {
    ///    <summary>
    ///        用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
    ///        用于简化继承。
    ///        jQuery.extend(settings, options);
    ///        var settings = jQuery.extend({}, defaults, options);
    ///    </summary>
    //target是被扩展的对象,默认是第一个参数(下标为0)或者是一个空对象{}
    var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;
    /*如果传进来的首个参数是一个boolean类型的变量，那就证明要进行深度拷贝。
    而这时传进来的argumens[1]就是要拷贝的对象.如果是这种情况,那就要做一些"矫正"工作, 
    因为这个时候,target变量指向的是一个布尔变量而不是我们要拷贝的对象.*/
    if ( target.constructor == Boolean ) {
        deep = target;
        target = arguments[1] || {};
        //这样的话使得i=2直接跳过前两个参数
        i = 2;
    }

    // 如果target不是objet 并且也不是function 就默认设置它为{};
    if ( typeof target != "object" && typeof target != "function" )
        target = {};

    //一个参数的就是扩展jQuery对象本身
    if ( length == i ) {
        target = this;
        --i;
    }

    for ( ; i < length; i++ )
        //非null的扩展对象才把它扩展到被扩展对象上来.
        if ( (options = arguments[ i ]) != null )
            // Extend the base object
            for ( var name in options ) {
                //target是被扩展对象 options是扩展对象, 它的方法或属性将会被扩展到target上
                var src = target[ name ], copy = options[ name ];

                // target和copy如果相等还深拷贝的话就出问题了
                if ( target === copy )
                    continue;

                // Recurse if we're merging object values
                //递归src和copy深度拷贝即对每一个属性递归 
                //要是没有nodeType, 就是非Dom对象引用, 可以对它进行深度拷贝
                if ( deep && copy && typeof copy == "object" && !copy.nodeType )
                    target[ name ] = jQuery.extend( deep,
                        // Never move original objects, clone them
                        src || ( copy.length != null ? [ ] : { } )
                    , copy );

                // Don't bring in undefined values
                //如果要加进来的引用不是对象的引用(只要不是undefined ) 那就把引用加进来 
                //可能是覆盖也可能是新建name这个属性或方法
                else if ( copy !== undefined )
                    target[ name ] = copy;

            }

    //返回扩展后的被扩展对象
    return target;
};
    //使用jQuery的原型覆盖init的原型 这样就自动把jQuery.prototype的方法可以在init里面使用
    jQuery.fn.init.prototype=jQuery.fn;
})(window);

再来测试一下,给它添加一个getName()方法 然后我们调用一下它

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <script type="text/javascript">
        jQuery.extend({
        getName: function(){
        return "bq's jQuery"
    }
});
        console.log(jQuery().jquery);
        console.log(jQuery.getName());
        </script>    
    </body>
</html>

---

结果如下 

1.0.0

bq's jQuery