源码解析看的不是太懂 有没有一个简单的例子将dom对象转换成指定的对象的
光阴似箭催人老,日月如移越少年。
javascript中的自定义对象一般通过new构造出来,zepto对象也不例外;但我们直接调用$(selector)就可以得到zepto对象,是因为$里面做了个判断,如果你不是用new,就自动帮你加个new:
new
$(selector)
$
var $ = function(selector) { if (!(this instanceof $)) return new $(selector); }
返回的对象是一个类数组对象,这里不考虑匹配所有,就用querySelector模拟取到的第一个吧:
querySelector
var $ = function(selector) { if (!(this instanceof $)) return new $(element); this[0] = document.querySelector(selector); this.length = 1; }
返回的对象是$的实例,保存了匹配的元素,还有length属性,是个类数组对象。如果要给实例添加方法,就在原型($.prototype)上加,以.html()为例:
length
.html()
$.prototype = { html: function(content) { if (content === undefined) return this[0].innerHTML; this[0].innerHTML = content; //返回`this`支持方法链 return this; } }
全局方法如ajax就绑定在$上:$.ajax = function(){...}。直接就可以用了:
$.ajax = function(){...}
var p = $('p'); p[0]; //第一个p元素 p.length; // 1 p.html(); // 里面的html p.html('<p>abcd</p>'); //支持赋值
你这样理解吧,$对象就是一个数组,dom对象就是一个对象,这个转化过程就是查找页面相似的dom对象,把它扔到数组,然后返回就是$对象了,当然也继承了$对象上的一系列方法
javascript中的自定义对象一般通过
new
构造出来,zepto对象也不例外;但我们直接调用$(selector)
就可以得到zepto对象,是因为$
里面做了个判断,如果你不是用new
,就自动帮你加个new
:返回的对象是一个类数组对象,这里不考虑匹配所有,就用
querySelector
模拟取到的第一个吧:返回的对象是
$
的实例,保存了匹配的元素,还有length
属性,是个类数组对象。如果要给实例添加方法,就在原型($.prototype)上加,以.html()
为例:全局方法如ajax就绑定在
$
上:$.ajax = function(){...}
。直接就可以用了:
你这样理解吧,$对象就是一个数组,dom对象就是一个对象,这个转化过程就是查找页面相似的dom对象,把它扔到数组,然后返回就是$对象了,当然也继承了$对象上的一系列方法