首先,我们先看下jQuery是怎么用的,如下:
let a = $('p');
a.css('color', 'red');
a.html();
a.value();
简单实现zepto原型:
var zepto = {};
zepto.init = function (selector) {
var slice = Array.prototype.slice;
var dom = slice.call(document.querySelectorAll(selector));
return zepto.Z(dom, selector);
}
function z(dom, selector) {
var i, length = dom ? dom.length : 0
for (i = 0; i < length; i++) {
this[i] = dom[i];
}
this.length = length;
this.selector = selector || '';
}
//构造函数
zepto.Z = function (dom, selector) {
return new z(dom, selector);
}
var $ = function (selector) {
return zepto.init(selector);
}
$.fn = {
css: function (key, val) {
},
html: function (val) {
},
value: function (val) {
}
}
//给z的原型赋值$.fn,这样zepto就有了CSS方法
z.prototype = $.fn;
简单实现jquery原型
var jquery = function (selector) {
return new jquery.fn.init(selector)
}
jquery.fn = {
css: function (key, val) {
},
html: function (val) {
},
value: function (val) {
}
}
var init = jquery.fn.init = function (selector) {
var slice = Array.prototype.slice;
var dom = slice.call(document.querySelectorAll(selector));
var i, length = dom ? dom.length : 0
for (i = 0; i < length; i++) {
this[i] = dom[i];
}
this.length = length;
this.selector = selector || '';
}
//给z的原型赋值$.fn,这样jquery就有了CSS方法
init.prototype = jquery.fn
var $ = jquery;
/*扩展插件如下,为什么要把对象放在jquery.fn中,
因为jquery为了防止全局变量污染,只有jquery变量会暴露出来,
不可能会把init暴露出来,所以不能init.prototype.getValue
这样去添加方法,而且把可以让代码更统一*/
jquery.fn.getValue = function () {
}