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

问题描述

问 题

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

解决方案

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 div = $('div');
div[0]; //第一个div元素
div.length; // 1
div.html(); // 里面的html
div.html('<p>abcd</p>'); //支持赋值

这篇关于javascript - zepto 源码怎么将dom对象转化成自己的$对象的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！