100行程式碼以內實現一個你可以工作中擴充套件的jquery

前端大彬哥發表於2017-05-11

不喜歡逼逼,拿去直接擴充套件用完事兒。

;(function(window,factory){
    factory(window);
})(window,function(window){
    var jQuery=(function(){
        var jQuery=function(selector){
            return new jQuery.fn.init(selector);
        };
        jQuery.fn=jQuery.prototype={};
        var init=jQuery.fn.init=function(selector){
            if(!selector){
                return this;
            }
            if(typeof selector === "string"){
                if(selector.indexOf(`<`)!=-1){
                    this.ele = selector;                        
                }else{
                    //選擇器
                    this.eles = document.querySelectorAll(selector);
                    var len = this.eles.length;
                    for(var i = 0;i<len;i++){
                        [].push.call(this,this.eles[i]);
                    }
                }                    
            }else if(typeof selector === "function" ){
                this.ready(selector);
            }else if(typeof selector === "object"){
                    return this;
            }
            return this;
        };
        init.prototype=jQuery.fn;
        jQuery.extend=jQuery.fn.extend=function(){
            var options, name, src, copy, copyIsArray, clone,
                    target = arguments[0] || {},
                    i = 1,
                    length = arguments.length,
                    deep = false;
                if (typeof target === "boolean") {
                    deep = target;
                    target = arguments[1] || {};
                    i = 2;
                }
                if (typeof target !== "object" && !jQuery.isFunction(target)) {
                    target = {};
                }
                if (i === length) {
                    target = this;
                    i--;
                }
                for ( ; i < length; i++) {
                    if ((options = arguments[ i ]) != null){
                        for(name in options){
                            src=target[name];
                            copy=options[name];
                            if(target===copy){
                                continue;
                            }
                            if(deep&&copy&&(jQuery.isPlainObject(copy)||(copyIsArray=jQuery.isArray(copy)))){
                                if(copyIsArray){
                                    copyIsArray=false;
                                    clone=src&&jQuery.isArray(src)?src:{};
                                }else{
                                    clone=src&&jQuery.extend(deep,clone,copy);
                                }
                                target[name]=jQuery.extend(deep,clone,copy);
                            }else if(copy!==undefined){
                                target[name]=copy;
                            }
                        }
                    }
                }
                return target;
        };
        jQuery.fn.extend({
            css:function(name,value){
                for(var i = 0;i<this.length;i++){
                    this[i].style[name] = value;
                }
                return this;
            },
            appendTo:function(context){
                    var parentNode = document.querySelector(context).parentNode;
                    parentNode.insertAdjacentHTML(`afterBegin`,this.ele);
            },
            ready:function(fn){
                document.addEventListener(`DOMContentLoaded`,fn,false);
            }
        });
        return jQuery;
    })();
    window.jQuery=window.$=jQuery;
    return jQuery;
});

回頭吧class操作,事件繫結和ajax加上就基本夠用了。

相關文章