JavaScript设计模式-8.链式调用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript高级语法8-链式调用</title>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
function demo1(){
(function(){
//创建一个cat类
function Cat(name){
this.name = name;
this.run = function(){
document.write(this.name+" start run"+"<br/>")
}
this.stopRun = function(){
document.write(this.name+" stop run"+"<br/>")
}
this.sing = function(){
document.write(this.name+" start singing"+"<br/>")
}
this.stopSing = function(){
document.write(this.name+" stop sing"+"<br/>")
}
}
//测试
var c = new Cat("maomi");
c.run();
c.sing();
c.stopRun();
c.stopSing();
})()} function demo2(){
(function(){
//创建一个cat类
function Cat(name){
this.name = name;
this.run = function(){
document.write(this.name+" start run"+"<br/>")
return this;
}
this.stopRun = function(){
document.write(this.name+" stop run"+"<br/>")
return this;
}
this.sing = function(){
document.write(this.name+" start singing"+"<br/>")
return this;
}
this.stopSing = function(){
document.write(this.name+" stop sing"+"<br/>")
return this;
}
}
//测试
var c = new Cat("lili");
c.run().sing().stopRun().stopSing(); })()
} //为了给类（Function类）扩展函数，定义一个它的静态函数
Function.prototype.method = function(name,fn){
this.prototype[name] = fn;
return this;
};
(function(){
//模仿jquery链式调用
function _$(els){};
//准备方法
_$.onready = function(fn){
//按需求把对象（_$）注册到window上
window.$ = function(){
return new _$(arguments);
}
fn();
}
//链式的对象增加jquery库提供的操作函数。
_$.method("addEvent",function(type,fn){
fn();
}).method("getEvent",function(fn,e){
fn();
}).method("addClass",function(className,fn){
fn();
}).method("removeClass",function(className,fn){
fn();
}).method("replaceClass",function(oldClass,newClass){
fn();
}).method("getStyle",function(el,fn){
fn();
}).method("setStyle",function(el,fn){
fn();
}).method("load",function(url,fn){
fn();
}) //开始使用
_$.onready(function(){
$("#box").addEvent("click",function(){
alert("click event")
})
})
})()
</script>
</body>
</html>
JavaScript设计模式-8.链式调用的更多相关文章
- JavaScript中的链式调用
链模式 链模式是一种链式调用的方式,准确来说不属于通常定义的设计模式范畴,但链式调用是一种非常有用的代码构建技巧. 描述 链式调用在JavaScript语言中很常见,如jQuery.Promise等, ...
- 《javascript设计模式》笔记之第六章：方法的链式调用
这一章要实现的就是jQuery的那种链式调用,例子: $(this).setStyle('color', 'green').show(); 一:调用链的结构: 首先我们来看一下最简单的$()函数的实现 ...
- JavaScript设计模式——方法的链式调用
方法的链式调用: (function() { //私有类 function _$ (els) { this.elements = []; for(var i = 0, len = els.length ...
- 关于JavaScript中的setTimeout()链式调用和setInterval()探索
http://www.cnblogs.com/Wenwang/archive/2012/01/06/2314283.html http://www.cnblogs.com/yangjunhua/arc ...
- javascript学习(10)——[知识储备]链式调用
上次我们简单的说了下单例的用法,这个也是在我们java中比较常见的设计模式. 今天简单说下链式调用,可能有很多人并没有听过链式调用,但是其实只要我简单的说下的话,你肯定基本上都在用,大家熟知的jQue ...
- js原生设计模式——2面向对象编程之js原生的链式调用
技巧点:对象方法中返回当前对象就可以链式调用了,即方法中写return this; <!DOCTYPE html><html lang="en"><h ...
- JavaScript实现链式调用
学习Jquery的时候,我们通常会看到链式调用的写法 $(window).addEvent('load', function(){ $('test').show().setStyle('color', ...
- 如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用
1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; ;i<arguments.length;i++){ v ...
- JavaScript链式调用
1.什么是链式调用? 这个很容易理解,例如 $('text').setStyle('color', 'red').show(); 一般的函数调用和链式调用的区别:链式调用完方法后,return thi ...
随机推荐
- Java对象和XML转换
有时候,我们需要把Java对象转换成XML文件.这时可以用JAXB来实现.(JDK1.6及以后的版本无需导入依赖包,因为已经包含在JDK里了) 假如某个公司有许多部门,每个部门有许多职员,我们可以这样 ...
- 通过一个例子感受C# 6.0新特性
微软在Visual Studio 2015中更新C#语言到6.0,添加了很多很好的特性,以使C#语言继续跻身于最优秀语言之行列.下面通过一个例子快速感受一下C# 6.0的新特性,以下程序在VS2015 ...
- vs2015上使用github进行版本控制
我是用的是vs2015企业版 一.首先创建项目,右下角选择新建git存储库 二.在工具栏选择团队-管理连接,打开团队资源管理器,点击同步 . 三.选择下面的发布选项 四.在gitgub上新建仓库,得到 ...
- [Oracle]Oracle数据库数据被修改或者删除恢复数据
1.SELECT * FROM CT_FIN_RiskItem--先查询表,确定数据的确不对(cfstatus第一行缺少)2.select * from CT_FIN_RiskItem as of t ...
- Ubuntu 安装java 1.8
1.下载java 1.8 地址: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.ht ...
- HTML5 Communication API
本文探讨用于构建实时(real-time)跨域(cross-origin)通信的两个重要模块:跨文档消息通讯和XMLHttpRequest Level 2.通过它们,我们可以构建引人注目的Web应用, ...
- epoll好文章
https://www.cnblogs.com/apprentice89/p/3234677.html https://www.jianshu.com/p/aa486512e989 https://c ...
- Delphi开发安卓程序的感受
Delphi XE7开发安卓程序,界面开发速度非常快,这是eclipse无法比的,还有就是界面自适应能力很棒,我在不同版本和尺寸的设备中测试,运行良好,这些设备包括:三星I9100(安卓2.3:不到5 ...
- 【OCP-12c】CUUG 071题库考试原题及答案解析（18）
18.(8-7) choose twoWhich two statements are true regarding views? (Choose two.) A) A simple view in ...
- 【OCP-12c】CUUG 071题库考试原题及答案解析（14）
14.(6-13) choose the best answer:View the Exhibit and examine the structure of the ORDERS table.Whic ...