javascript - zepto 源码怎么将dom对象转化成自己的$对象的?

Question

源码解析看的不是太懂 有没有一个简单的例子将dom对象转换成指定的对象的

Answer 1

javascript中的自定义对象一般通过new构造出来，zepto对象也不例外；但我们直接调用$(selector)就可以得到zepto对象，是因为$里面做了个判断，如果你不是用new，就自动帮你加个new：

var $ = function(selector) {
     if (!(this instanceof $)) return new $(selector);
}

返回的对象是一个类数组对象，这里不考虑匹配所有，就用querySelector模拟取到的第一个吧：

var $ = function(selector) {
     if (!(this instanceof $)) return new $(element);
     this[0] = document.querySelector(selector);
     this.length = 1;
}

返回的对象是$的实例，保存了匹配的元素，还有length属性，是个类数组对象。如果要给实例添加方法，就在原型（$.prototype）上加，以.html()为例：

$.prototype = {
    html: function(content) {
        if (content === undefined) return this[0].innerHTML;
        this[0].innerHTML = content;
        //返回`this`支持方法链
        return this;
    }
}

全局方法如ajax就绑定在$上：$.ajax = function(){...}。
直接就可以用了：

var p = $('p');
p[0]; //第一个p元素
p.length; // 1
p.html(); // 里面的html
p.html('<p>abcd</p>'); //支持赋值

Answer 2

你这样理解吧，$对象就是一个数组，dom对象就是一个对象，这个转化过程就是查找页面相似的dom对象，把它扔到数组，然后返回就是$对象了，当然也继承了$对象上的一系列方法