javascript - zepto 源码怎么将dom对象转化成自己的$对象的?
大家讲道理
大家讲道理 2017-04-10 17:16:14
0
2
356

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

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

reply all(2)
洪涛

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>'); //支持赋值
刘奇

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template