javascript简单链式调用案例分析
本文实例讲述了javascript简单链式调用方法。分享给大家供大家参考,具体如下:
jQuery用的就是链式调用。像一条连接一样调用方法。
链式调用的核心就是return this;
,每个方法都返回对象本身。
下面是简单的模拟jQuery的代码:
<script> window.$ = function (id) { return new _$(id); } function _$(id) { this.elements = document.getElementById(id); } _$.prototype = { constructor: _$, hide: function () { console.log('hide'); return this; }, show: function () { console.log('show'); return this; }, getName: function (callback) { if (callback) { callback.call(this, this.name); } return this; }, setName: function (name) { this.name = name; return this; } } $('test').setName('helloworld').getName(function (name) { console.log(name); }).show().hide().show().hide().show(); </script>
运行效果图如下:
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
学习JavaScript设计模式(链式调用)
1.什么是链式调用 这个很容易理解,例如: $(this).setStyle('color', 'red').show(); 一般的函数调用和链式调用的区别:调用完方法后,return this返回当前调用方法的对象. function Dog(){ this.run= function(){ alert("The dog is running...."); return this;//返回当前对象 Dog }; this.eat= function(){ alert("Af
-
JavaScript对象链式操作代码(jquery)
虽然现在慢慢减少了对jQuery的使用(项目上还是用,效率高点.平时基本不用了),希望从而减少对jQuery的依赖度. 但是这链式操作的方式实在吸引人(貌似现在不少新库都采用了链式操作). 新手无畏嘛,所以写了以下代码.主要是避免以后又忘了,呵呵. 复制代码 代码如下: window.k = function() { return new k.fn.init(arguments); } k.fn = k.prototype = { init:function() { this.length =
-
javascript 支持链式调用的异步调用框架Async.Operation
复制代码 代码如下: Async = {}; Async.Operation = function(options) { options = options || {}; var callbackQueue = []; var chain = (options.chain && options.chain === true) ? true : false; var started = false; var innerChain = null; this.result = undefined
-
javascript中的链式调用
jQuery中形如$("#txtName").addClass("err").css("font-size","12px").select().focus();的方式让人不得不为之着迷.其实现机制就是链式调用.链式调用就是调用对象的方法后返回到该对象,严格来讲它并不属于语法,而只是一种语法技巧,js令人着迷的一点就是这里. 没有返回值的方法属于赋值器方法,显然它很容易实现链式调用,前提是正确理解this指针的用法. 复制代码
-
JavaScript DSL 流畅接口(使用链式调用)实例
认真研究了一会DSL,发现了这么几件有趣的事,JavaScript用得最多的一个东西怕是链式调用 (方法链,即Method Chaining). 有意思的是Martin Flower指出: 复制代码 代码如下: I've also noticed a common misconception - many people seem to equate fluent interfaces with Method Chaining. Certainly chaining is a common tec
-
JavaScript中链式调用之研习
一.对象链:方法体内返回对象实例自身(this) 复制代码 代码如下: function ClassA(){ this.prop1 = null; this.prop2 = null; this.prop3 = null; } ClassA.prototype = { method1 : function(p1){ this.prop1 = p1; return this; }, method2 : function(p2){ this.prop2 = p2; return this; }, m
-
JavaScript 异步调用框架 (Part 4 - 链式调用)
现实开发中,要按顺序执行一系列的同步异步操作又是很常见的.还是用百度Hi网页版中的例子,我们先要异步获取联系人列表,然后再异步获取每一个联系人的具体信息,而且后者是分页获取的,每次请求发送10个联系人的名称然后取回对应的具体信息.这就是多个需要顺序执行的异步请求. 为此,我们需要设计一种新的操作方式来优化代码可读性,让顺序异步操作代码看起来和传统的顺序同步操作代码一样优雅. 传统做法 大多数程序员都能够很好的理解顺序执行的代码,例如这样子的: 复制代码 代码如下: var firstResult
-
让JavaScript中setTimeout支持链式操作的方法
修改很简单,通过参数判断,然后返回下promise对象 复制代码 代码如下: (function() { var timeout = setTimeout; window.setTimeout = function(fn, time) { if (!time) { time = fn; return $.Deferred(function(dfd) { timeout(function() { dfd.resolvel(
-
JavaScript 对象链式操作测试代码
虽然现在慢慢减少了对jQuery的使用(项目上还是用,效率高点.平时基本不用了),希望从而减少对jQuery的依赖度. 但是这链式操作的方式实在吸引人(貌似现在不少新库都采用了链式操作). 新手无畏嘛,所以写了以下代码.主要是避免以后又忘了,呵呵. 复制代码 代码如下: window.k = function() { return new k.fn.init(arguments); } k.fn = k.prototype = { init:function() { this.length =
-
JS链式调用的实现方法
链式调用 链式调用其实只不过是一种语法招数.它能让你通过重用一个初始操作来达到用少量代码表达复杂操作的目的.该技术包括两个部分: 一个创建代表HTML元素的对象的工厂. 一批对这个HTML元素执行某些操作的方法. 调用链的结构$函数负责创建支持链式调用的对象 复制代码 代码如下: (function() { /* * 创建一个私有class * @param {Object} els arguments 所有参数组成的类数组 */ function _
-
Javascript 链式调用实现代码(参考jquery)
Javascript链式调用 function ele(){ this.elements=[]; var element; if(typeof arguments[0]=="string"){ element=arguments[0]; if (element.slice(0, 1) == '#') { element = document.getElementById(element.slice(1)); this.elements.push(element); }else if(e
-
JavaScript中两种链式调用实现代码
一.方法体内返回对象实例自身(this) 复制代码 代码如下: function ClassA(){ this.prop1 = null; this.prop2 = null; this.prop3 = null; } ClassA.prototype = { method1 : function(p1){ this.prop1 = p1; return this; }, method2 : function(p2){ this.prop2 = p2; return this; }, metho
随机推荐
- 使用angular写一个hello world
- iOS 懒加载的使用实例代码
- javascript实现字符串反转的方法
- vs.net控件updatePanel实现无刷新的方法
- .NET中基于事件的异步模式-EAP
- Android之Intent附加数据的两种实现方法
- 一个模仿oso的php论坛程序源码(之二)第1/3页
- 使用Python的PIL模块来进行图片对比
- Python中实现从目录中过滤出指定文件类型的文件
- 如何将产生的密码记录并发送给用户并通过点击链接激活?
- css元素定位
- Session.TimeOut的最大取值是1440,超出会报错
- 分析Android内存泄漏的几种可能
- winform导出dataviewgrid数据为excel的方法
- JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
- maven 隐式依赖引起的包冲突解决办法
- 自动交换光网络分级路由技术的研究
- C#递归算法之打靶算法分析
- jQuery实现checkbox的简单操作
- Python编程把二叉树打印成多行代码