模拟简单的jquery中的链式调用
简单链式调用
function Dog(){
this.run = function(){
alert('dog is run...');
return this ;
};
this.eat = function(){
alert('dog is eat...');
return this ;
};
this.sleep = function(){
alert('dog is sleep...');
return this ;
}
}
var d1 = new Dog();
d1.run().eat().sleep();
//d1.eat();
//d1.sleep();
模拟jquery底层链式调用
第一步,模拟出全局的准备方法和$绑定:
(function(window, undefined) {
//window上先注册一个全局变量,与外界产生关系
window.$ = _$;
//写一个准备方法,类似jquery调用的准备函数
_$.onReady = function(fn) {
//直接执行传入的函数
fn();
};
})(window);
$.onReady(function(){
alert("invoked!");
});
第二步,实现简单的链式调用:
(function(window, undefined) {
//$为返回给外界常用的对象,一般用'_'作为私有的对象,这里看做对象的构造函数
function _$(arguments) {
alert("constructor");
}
//在_$的原型对象上加一些公共的方法
_$.prototype = {
constructor: _$,
addEvent: function() {
alert("addEvent");
return this;
},
setStyle: function() {
alert("setStyle");
return this;
}
};
//window上先注册一个全局变量,与外界产生关系
window.$ = _$;
//写一个准备方法,类似jquery调用的准备函数
_$.onReady = function(fn) {
//1.实例化出来_$对象,真正的注册到window上
window.$ = function() {
return new _$(arguments);
};
//2.执行传入进来的代码
fn();
};
})(window); //传入的入口window传入作用域中
$.onReady(function() {
// alert($("#inp")); //constructor [object Object]
$("#inp").addEvent().setStyle();//constructor addEvent setStyle
});
第三补,实现简单完整的jquery链式调用:
<input id="inp" type="button" value="点击我" />
<script type="text/javascript">
(function(window, undefined) {
//$为返回给外界常用的对象,一般用'_'作为私有的对象,这里看做对象的构造函数
function _$(arguments) {
//正则表达式匹配id选择器
var idselector = /#\w+/;
this.dom; // 此属性 接受所得到的元素
// 如果匹配成功 则接受dom元素 arguments[0] = '#inp'
if (idselector.test(arguments[0])) {
this.dom = document.getElementById(arguments[0].substring(1));
} else {
throw new Error(' arguments is error !');
}
}
// 在Function类上扩展一个可以实现链式编程的方法 ①
Function.prototype.method = function(methodName, fn) {
this.prototype[methodName] = fn;
return this; //链式编程的关键
};
//在_$的原型对象上加一些公共的方法
_$.prototype = {
constructor: _$,
addEvent: function(type, fn) {
//给元素注册事件
if (window.addEventListener) { // FF
this.dom.addEventListener(type, fn);
} else if (window.attachEvent) { // IE
this.dom.attachEvent('on' + type, fn);
}
return this;
},
setStyle: function(prop, val) {
this.dom.style[prop] = val;
return this;
}
};
//window上先注册一个全局变量,与外界产生关系
window.$ = _$;
//写一个准备方法,类似jquery调用的准备函数
_$.onReady = function(fn) {
//1.实例化出来_$对象,真正的注册到window上
window.$ = function() {
return new _$(arguments);
};
//2.执行传入进来的代码
fn();
// 3 实现链式编程 内部的一些组合 需要上述①处的支持
_$.method('addEvent', function() {
// nothing to do
}).method('setStyle', function() {
// nothing to do
});
};
})(window); //传入的入口window传入作用域中
$.onReady(function() {
var inp = $("#inp");
inp.addEvent('click', function() {
alert('我被点击了!');
}).setStyle('backgroundColor', 'red');
});