手写jQuery的bind和extend

(function(){

	var jQuery = function(selector){
	    return new jQuery.fn.init(selector)
	};




	function markAll(dom,that){
        var res = that;
        //���dom��һ���б�����ô���Ǿ���Ҫѭ������dom��ÿһ���ڵ㡣�ڵ�ı�������ֵ��init������
        for(var i = 0;i < dom.length;i++){
            res[i] = dom[i];
        }
        that.length = dom.length;
        //���뷵��init����������css��html��֪����˭��
        return that;
    }

	window.jQuery = window.$ = jQuery;

	jQuery.fn = jQuery.prototype = {
        init:function(selector){
           var dom=null;
        if(typeof selector != 'string'){
            //��ȡ�����ַ���Ԫ�� window��this
            dom=[selector]
         }else{
             //��ȡ��Ԫ��
             dom = document.querySelectorAll(selector);
         }     /*document.querySelectorAll(selector)���ص���dom�ڵ㣬��������Ҫ����һ�����󣬼�������Ҫ����ʽ�ǣ�init{
        0:'div'
    }
    ����������Ҫ��װһ�����������󴫻�ȥ*/
            return markAll(dom,this);
        },
        css:function(){

        },
        html:function(){
            args = arguments;

            if(args.length == 1) {
                this[0].innerHTML = args[0];
            } else {
                return this[0].innerHTML;
            }
        },
        eq:function(){

        },
        bind: function( types, data, fn ) {
            return this.on( types, null, data, fn );
        },

        on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
            fn = data;
            data = selector;
            selector = undefined;
            jQuery.event.add( this, types, fn, data, selector );
        }
    }

    //实现trigger函数

    jQuery.Event = function( src, props ) {
        // Allow instantiation without the 'new' keyword
        if ( !(this instanceof jQuery.Event) ) {
            return new jQuery.Event( src, props );
        }

        // Event object
        if ( src && src.type ) {
            this.originalEvent = src;
            this.type = src.type;

            // Events bubbling up the document may have been marked as prevented
            // by a handler lower down the tree; reflect the correct value.
            this.isDefaultPrevented = ( src.defaultPrevented || src.returnValue === false ||
                src.getPreventDefault && src.getPreventDefault() ) ? returnTrue : returnFalse;

        // Event type
        } else {
            this.type = src;
        }

        // Put explicitly provided properties onto the event object
        if ( props ) {
            jQuery.extend( this, props );
        }

        // Create a timestamp if incoming event doesn't have one
        this.timeStamp = src && src.timeStamp || jQuery.now();

        // Mark it as fixed
        this[ jQuery.expando ] = true;
    }


    jQuery.event = {

        dispatch: function(event) {
            ret = handler.apply();
            event.result = ret;
            return event.result;
        },
    	add: function( elem, types, handler, data, selector ) {
    	    eventHandle = function( e ) {
                 // Discard the second event of a jQuery.event.trigger() and
                 // when an event is called after a page has unloaded
                 return handler.apply(elem) ;
            }
    	    elem[0].addEventListener( "click", eventHandle, false );

    	    return;
    	},

    }

jQuery.fn.init.prototype = jQuery.fn;


jQuery.extend = jQuery.fn.extend = function() {
    
    var src, copyIsArray, copy, name, options, clone,
    		target = arguments[0] || {},
    		i = 1,
    		length = arguments.length,
    		deep = false;

    	// Handle a deep copy situation
    	if ( typeof target === "boolean" ) {
    		deep = target;
    		target = arguments[1] || {};
    		// skip the boolean and the target
    		i = 2;
    	}

    	// Handle case when target is a string or something (possible in deep copy)
    	if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
    		target = {};
    	}

    	// extend jQuery itself if only one argument is passed
    	if ( length === i ) {
    		target = this;
    		--i;
    	}

    	for ( ; i < length; i++ ) {
    		// Only deal with non-null/undefined values
    		if ( (options = arguments[ i ]) != null ) {
    			// Extend the base object
    			for ( name in options ) {
    				src = target[ name ];
    				copy = options[ name ];

    				// Prevent never-ending loop
    				if ( target === copy ) {
    					continue;
    				}

    				// Recurse if we're merging plain objects or arrays
    				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 : {};
    					}

    					// Never move original objects, clone them
    					target[ name ] = jQuery.extend( deep, clone, copy );

    				// Don't bring in undefined values
    				} else if ( copy !== undefined ) {
    					target[ name ] = copy;
    				}
    			}
    		}
    	}
    return target;
};


jQuery.extend({

	isReady: false
});

jQuery.extend({

	asy: false
});



jQuery.extend({

	isReady: true
});
})();

前端调用代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
<!--    <script src="jQuery.js">-->
    <script src="core.js">
    </script>

</head>
<body>

<p>点我！</p>

</body>

<script>
  $("p").bind("click",function(){
    alert("这个段落被点击了。");
  });
</script>

</html>

其实事件的思想很简单，1. 添加eventListener  2.添加eventListener的eventHandler 3.在eventHandler里面执行希望执行的function，一般是将这个function当成handler传进去

extend其实就是定义了一个function，然后在

jQuery.extend({

   isReady: true
});

这种代码时被调用，而且根据代码顺序，后面的属性会覆盖前面的属性

trigger函数实现步骤：

首先调用内部的

jQuery.event.trigger( type, data, this );

这里会通过handler.apply来反射调用callback，

这个时候会回调原来预先定义过的function，一般是通过add来把handler注入到某个element(比如input)

后面会通过dispatch来跳转到预先定义过的function

 代码参考:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.js">
    </script>
    <script>
$(document).ready(function(){
  $("input").select(function(){
    $("input").after("文本已选中!");
  });
  $("button").click(function(){
    $("input").trigger("select");
  });
});
</script>
</head>
<body>

<input type="text" value="Hello World">
<br><br>
<button>触发输入框的 select 事件</button>

</body>
</html>

上面的代码如果trigger改成triggerHandler，那么只会触发一次

那么为什么要定义trigger呢？这是为了自定义触发某种条件，比如一加载页面就自动点击查询按钮，那么我们可以用trigger或者triggerHandler来模拟触发