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 ...
随机推荐
- polymer技巧
1.添加一个div元素 我们完全可以自己造一个这样的东西出来,比如下面例子我们给 div 元素添加一个 is="demo-test" <script> var Poly ...
- php萌新|学习|排坑|のmysqli_error()方法的妙用
从开始学习php当现在已经有一个月多.除了每天完成公司布置的日常汇报,也没有耐下性子写一写自己想写的东西.今天就当起个头,坚持一周有个两三片文章或者小总结,也不枉费自己的付出.(我自己都不信,你会信吗 ...
- 一个例子教你理解java回调机制
网上很多例子都写的很难理解,笔者刚开始都已经弄晕菜了. 这个例子,应该是再简单,再简洁不过的了,例子目的是测试某个方法的执行时间.这里就写三个java类,一个接口,一个实现,还有一个用于测试时间的类. ...
- Hadoop map任务数量的计算
Hadoop中决定map个数的的因素有几个,由于版本的不同,决定因素也不一样,掌握这些因素对了解hadoop分片的划分有很大帮助, 并且对优化hadoop性能也很有大的益处. 旧API中getSpli ...
- Jenkins权限管控
需求: 不同的账号角色进入只能看到自己对应的项目,且只能拥有构建等基本权限. 如wechat用户进入系统只能看到以wechat开头的job(具体匹配什么名称的job,可以设置) 目录: 1.安装插件 ...
- [Oracle]Oracle数据库数据被修改或者删除恢复数据
1.SELECT * FROM CT_FIN_RiskItem--先查询表,确定数据的确不对(cfstatus第一行缺少)2.select * from CT_FIN_RiskItem as of t ...
- WPF圆角按钮
<ControlTemplate x:Key="CornerButton" TargetType="{x:Type Button}"> <Bo ...
- java线程池(一)
自JDK5之后,Java推出了一个并发包,java.util.concurrent,在Java开发中,我们接触到了好多池的技术,String类的对象池.Integer的共享池.连接数据库的连接池.St ...
- linux shell中"2>&1"含义
在计划任务中经常可以看到.例如我们公司的计划任务举例: */ * * * * root cd /opt/xxxx/test_S1/html/xxxx/admin; php index.php task ...
- python中多线程，多进程，多协程概念及编程上的应用
1, 多线程 线程是进程的一个实体,是CPU进行调度的最小单位,他是比进程更小能独立运行的基本单位. 线程基本不拥有系统资源,只占用一点运行中的资源(如程序计数器,一组寄存器和栈),但是它可以与同属于 ...