链式编程的核心:
每次调用$()方法时会依据传入的选择器创建一个实例,该实例的属性包含利用选择器选择到的dom节点集合,该实例的构造函数原型上拥有各种方法,每次调用方法最后会返回自身这个实例。
代码
(function(globle) {
function selfJquery(selector) { //初始化函数,给这个库保留可扩展性
let target = new testJq(selector);
return target
}
function testJq(selector) { //构造器,每次调用selfJquery时会依据这个构造器创建实例
if (selector.length <= 0) {
throw Error('请传入选择器参数')
}
let eles = document.querySelectorAll(selector);
this.eles = eles;
this.ooo = 111;
}
testJq.prototype.css = function(styleName, styleValue) { //把css写在原型链而不是作为testJq的方法的原因是为了不让每个new 出来的testJq实例对象都包含一个重复的方法,节省内存
for (let i = 0; i < this.eles.length; i++) {
this.eles[i].style[styleName] = styleValue
}
return this
}
globle.$ = globle.selfJquery = selfJquery
})(window)
$('.box').css('color', 'red').css('color', 'blue')