美文网首页Front End
[jQuery] jQuery内核

[jQuery] jQuery内核

作者: 何幻 | 来源:发表于2016-03-02 19:54 被阅读31次

(1)创建全局jQuery对象

(function(global,document){
    jQuery.prototype=InstanceCreation.prototype;
    jQuery.extend=jQuery.prototype.extend=extend;
    
    function jQuery(selector){
        return new InstanceCreation(selector);
    }
    
    function InstanceCreation(selector){
        var instance=this;
            
        instance[0]=document.querySelector(selector);
        return this;
    }
    
    function extend(material){
        var depository=this;
    
        for(var property in material){
            if(!material.hasOwnProperty(property)){
                continue;
            }
            
            depository[property]=material[property];
        }
        
        return this;
    };
    
    //export:
    global.jQuery=jQuery;
}(window,document));

(2)扩展jQuery.prototype,然后调用

<input id=testButton type=button value=test />

<script>
    (function($){
        $.prototype.extend({
            click:function(){
                var $button=this,
                    htmlButton=$button[0],
                    clickEventHandler=arguments[0];
                
                htmlButton.addEventListener('click',function(){
                    clickEventHandler.call($button);
                },false);
                
                return this;
            }
        });
        
        $('#testButton').click(function(){
            var $button=this,
                htmlButton=$button[0];
                
            alert(htmlButton.value);
        });
    }(jQuery));
</script>

相关文章

网友评论

    本文标题:[jQuery] jQuery内核

    本文链接:https://www.haomeiwen.com/subject/kmpnkttx.html