Analysis of Zepto source code design structure

Zepto can be said to be a simplified version of jQuery, mainly for the mobile end. The use method is not too different, and the source code is easier to read.

Basic structure

var Zepto = (function(){
    var $,
        zepto = {}

    // ...ellipsis N Line code...

    zepto.init = function(selector, context) {
        // Function content
    }


    $ = function(selector, context){
        return zepto.init(selector, context)
    }

    // ...ellipsis N Line code...

    return $
})()

window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)

So when we execute $('p'), we actually call zepto.init('p ')

init function

The following structure can be obtained by disassembling the init function

zepto.init = function(selector, context) {
    var dom

    // ...Omitted here N That's ok...
    // Assign values to dom according to situations:
    // 1. selector Empty
    // 2. selector Is a string. There are several cases
    // 3. selector It's a function
    // 4. Other situations, such as selector Are arrays, objects, etc

    return zepto.Z(dom, selector)
  }

Old Z function

  zepto.Z = function(dom, selector) {
    dom = dom || []
    dom.__proto__ = $.fn
    dom.selector = selector || ''
    return dom
  }

In the above code, dom is an array, and its implicit prototype is assigned $. fn, which is actually a common js object, in which various tool functions are stored.

For example, we use the function $('p'). html() which is actually defined in $. fn.

New Z function

  function Z(dom, selector) {
    var i, len = dom ? dom.length : 0
    for (i = 0; i < len; i++) this[i] = dom[i]
    this.length = len
    this.selector = selector || ''
  }


  zepto.Z = function(dom, selector) {
    return new Z(dom, selector)
  }

  $.fn = {
    // ...Many attributes...
  }

  zepto.Z.prototype = Z.prototype = $.fn

Directly modify the prototype of the constructor, i.e. z.prototype = $. fn. After such a change, the implicit prototype of the object out of the constructor and then new is pointed to $. fn.

The difference between the new Z function and the old one is that it returns an array of objects, that is, objects that can simulate array operations.

var objArray = {
    0: 'abc',
    1: 'bcd',
    2: 'cde',
    length: 3
};

console.log( objArray[1] )
console.log( objArray.length )

So why not use arrays, but arrays of objects? ——Objects are inherently more flexible and intuitive

You can convert an array of objects into a pure array in the following ways

var arr =  Array.prototype.slice.call(objArray);
console.log(arr);

summary

In summary, we summarize the following code structure

var Zepto = (function(){

    var $,zepto = {}

    // ...ellipsis N Line code...

    $ = function(selector, context){
        return zepto.init(selector, context)
    }

    zepto.init = function(selector, context) {
        var dom

        // In the case of parameters, dom is assigned respectively

        // Data returned from the final call to zepto.Z
        return zepto.Z(dom, selector)
    }    

   function Z(dom, selector) {
      var i, len = dom ? dom.length : 0
      for (i = 0; i < len; i++) this[i] = dom[i]
      this.length = len
      this.selector = selector || ''
    }

   zepto.Z = function(dom, selector) {
     return new Z(dom, selector)
   }

    $.fn = {
        // There are several utility functions in it
    }


    zepto.Z.prototype = Z.prototype = $.fn


    // ...ellipsis N Line code...

    return $
})()

window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)

Tags: JQuery Mobile

Posted on Sun, 03 May 2020 12:23:18 -0700 by SamShade