JS 链式调用

<!-- ————————JS函数链式调用——————— -->
function Dog(){
this.run=function(){
alert("跑");
return this;
};
this.eat=function(){
alert("吃");
return this;
};
this.sleep=function(){
alert("睡觉");
return this;
};
}
var dog=new Dog();
dog.run().eat().sleep();

<!-- ————————JS函数链式调用(模拟jquery链式调用)——————— -->
//jquery底层使用块级作用域
//块级作用域特点: 程序启动代码执行 内部成员变量 外部无法访问
(function(window,undefined){
//$符号返回给外部 大型程序一般使用‘_‘作为私有对象
function _$(arguments){

}
//在Function上扩展一个可以实现链式编程的方法
Function.prototype.method=function(methodName,fun){
this.prototype[methodName]=fn;
return this;
}
//在_$的原型对象上加方法
_$.prototype={
constructor:_$,
addEvent:function(){
alert("addEvent");
return this;
},
setStyle:function(){
alert("setStyle");
return this;
}
}
//在window上注册一个全局变量 与外界产生联系
window.$=_$;
//实现一个准备方法
_$.onReady=function(fn){
//1.实例化_$对象 真正的注册到window上
window.$=function(){
return new _$(arguments);
}
//2.执行传入的代码
fn();
//3.实现链式编程
_$.method(‘addEvent‘,function(){}).method(‘setStyle‘,function(){});
}
})(window);//程序入口 传入window到块级作用域中

$.onReady(function(){
$("#").addEvent().setStyle();
});

时间: 2024-07-31 14:27:12

JS 链式调用的相关文章

js链式调用

我们都很熟悉jQuery了,只能jQuery中一种非常牛逼的写法叫链式操作 * $('#div').css('background','#ccc').removeClass('box').stop().animate({width:300}) 那这是如何实现的呢,我自己写了个例子:并非jQuery源码 Ferrinte.prototype.show=function () { for(var i=0;i<this.elements.length;i++) { this.elements[i].s

js简单实现链式调用

链式调用实现原理:对象中的方法执行后返回对象自身即可以实现链式操作.说白了就是每一次调用方法返回的是同一个对象才可以链式调用. js简单实现链式调用demo Object.prototype.show = function() {   console.log('show');   return this;  }  Object.prototype.hide = function() {   console.log('hide');   return this;  }  var div = doc

如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用

1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; for(var i=0;i<arguments.length;i++){ var element = argument[i]; if(typeOf element == "String") { element = document.getElementById(element); } if ( arguments.length === 1)

js实现方法的链式调用

假如这里有三个方法:person.unmerried();person.process();person.married();在jQuery中通常的写法是:person.unmerried().process().married();而在js中要实现链式调用,只需在类中的每个方法中通过this关键字返回对象实例的引用. function Person(){}; Person.prototype.status =false; Person.prototype.married =function()

玩一把JS的链式调用

链式调用我们平常用到很多,比如jQuery中的$(ele).show().find(child).hide(),再比如angularjs中的$http.get(url).success(fn_s).error(fn_e).但这都是已经包装好的链式调用,我们只能体会链式调用带来的方便,却不知道形成这样一条函数链的原理是什么. 随着链式调用的普及,实现的方案也越来越多.最常见的,是jQuery直接返回this的方式,underscore的可选式的方式,和lodash惰性求值的方式.我们分别来了解,并

关于JavaScript中的setTimeout()链式调用和setInterval()探索

http://www.cnblogs.com/Wenwang/archive/2012/01/06/2314283.html http://www.cnblogs.com/yangjunhua/archive/2012/04/12/2444106.html 下面的参考:http://evantre.iteye.com/blog/1718777 1.选题缘起 在知乎上瞎逛的时候看到一个自问自答的问题: 知乎上,前端开发领域有哪些值得推荐的问答?,然后在有哪些经典的 Web 前端或者 JavaScr

JavaScript 链式调用

我们使用jquery的时候,jquery的简单的语法及可实现链式调用方法,现在我们自己也封装一个链式调用的方法,来理解下 jquery中如何封装链式调用 无非就是每次调用一个方法的时候 给这个方法返回this即可,this指向该对象自身,我们看看代码: 1 // 定义一个简单的对象,每次调用对象的方法的时候,该方法都返回该对象自身 2 var obj = { 3 a: function(){ 4 console.log("输出a"); 5 return this; 6 }, 7 b:f

jQuery的链式调用原理,Promise的链式调用,this的问题

最近被问到这个问题,jq的链式调用原理,当时比较懵=.=,毕竟现在jq接触的机会变很少了. jq的链式调用 jq的链式调用其实就是比如我们在选择dom的时候, $('input[type="button"]') .eq(0).click(function() { alert('点击我!'); }).end().eq(1) .click(function() { $('input[type="button"]:eq(0)').trigger('click'); }).

面向对象的链式调用

1. 对象的链式调用 function Chain(){ this.n=0;//属性不一定一开始的时候全部都要初始化 this.fn1=function(_obj){//this指向  new Chain()实例化的对象 alert(this.n++);//注意:alert(this.n++)与this.fn1中的this 不一定指向的对象是一样的 return this; } this.fn2=function(){//同上 alert(this.n++);//注意:alert(this.n+