JS之框架封装篇仿jQuery——$.extend和$.fn.extend

$.extend

    (function (global) {
        function jQuery(selector) {
            return jQuery.fn.init(selector);
        }
        jQuery.fn = jQuery.prototype = {
            constructor: jQuery,
            init: function (selector) {
                let elements = document.querySelectorAll(selector);
                for (let i = 0; i < elements.length; i++) {
                    this[i] = elements[i];
                }
                this.length = elements.length;
            },
            css(name, value) {
                for (let i = 0; i < this.length; i++) {
                    let ele = this[i];
                    ele.style[name] = value;
                }
            }
        }
        jQuery.fn.init.prototype = jQuery.fn;
        jQuery.extend = function(...args){
            let target = args[0];
            for(let i=1; i<args.length; i++){
                let arg = args[i];
                for(key in arg){
                    target[key] = arg[key];
                }
            }
            return target;
        }
        global.jQuery = global.$ = jQuery;
    })(window)

$.fn.extend

  (function(global){
       function jQuery(selector){
           return new jQuery.fn.init(selector);
       }
       jQuery.fn = jQuery.prototype = {
           constructor: jQuery,
           init: function(selector){
               let elements = document.querySelectorAll(selector);
               for(let i=0; i<elements.length; i++){
                   this[i] = elements[i];
               }
               this.length = elements.length;
           },
           css(name,value) {
               for(let i=0; i<this.length; i++){
                   this[i].style[name] = value;
               }
           }
       }
       jQuery.fn.extend = function(...args){
           let target = this;
           let source = [...args];

           source.forEach((value,index) => {
               Object.keys(value).forEach((key) => {
                   target[key] = value[key];
               })
           })
           return target;
       }
       jQuery.fn.init.prototype = jQuery.fn;
       global.jQuery = global.$ = jQuery;
   })(window)

合并

  (function(global){
       function jQuery(selector){
           return new jQuery.fn.init(selector);
       }
       jQuery.fn = jQuery.prototype = {
           constructor: jQuery,
           init: function(selector){
               let elements = document.querySelectorAll(selector);
               for(let i=0; i<elements.length; i++){
                   this[i] = elements[i];
               }
               this.length = elements.length;
           },
           css(name,value) {
               for(let i=0; i<this.length; i++){
                   this[i].style[name] = value;
               }
           }
       }
       jQuery.fn.extend = jQuery.extend = function(...args){
           let target = [];
           let source = [...args];
           if(this == jQuery){
               target = args[0];
               source.splice(0,1);
           }else{
               target = this;
           }
           source.forEach((value,index) => {
               Object.keys(value).forEach((key) => {
                   target[key] = value[key];
               })
           })
           return target;
       }
       jQuery.fn.init.prototype = jQuery.fn;
       global.jQuery = global.$ = jQuery;
   })(window)