js22--链式调用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type=text/javascript charset=utf-8> // 1 简单的函数链式调用
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(); </script>
</head>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type=text/javascript charset=utf-8 src="../commons/jquery.js" ></script>
</head>
<body>
<input id="inp" type="button" value="点击我" />
<script type=text/javascript charset=utf-8>
// 程序启动的时候 里面的代码直接执行了,var的外部都不能访问,什么都不加的通过window访问,this通过相应对象访问。
(function(window , undefined){//函数形参
// $ 最常用的对象 返回给外界, 大型程序开发 一般使用'_'作为私用的对象(规范)
function _$(arguments){
//id选择器
var idselector = /#\w+/ ;
this.dom ;//实例属性,arguments[0] = '#inp'
if(idselector.test(arguments[0])){//正则表达式.test(string)
this.dom = document.getElementById(arguments[0].substring(1));
} else {
throw new Error(' arguments is error !');
}
}; // 在Function类上扩展一个可以实现链式编程的方法,函数_$也可以用method这个方法
Function.prototype.method = function(methodName , fn){
this.prototype[methodName] = fn ;
return this ; //_$.method,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.$ = _$ ;//函数名表示函数地址 _$.onReady = function(fn){ // 给函数(类)加静态方法,只能通过函数名(类名)访问。onReady是这个匿名函数的名字,fn是函数的参数。
window.$ = function(){//$("#div")返回jquery对象
return new _$(arguments);//有参构造函数,
};
fn();
// 3 实现链式编程
_$.method('addEvent',function(){
//
}).method('setStyle',function(){
//
}); }; })(window); // 函数立即执行,传入实参window, $.onReady( function(){
var inp = $('#inp');
alert(inp.dom.nodeName);
alert($('#inp'));
inp.addEvent('click',function(){
alert('我被点击了!');
}).setStyle('backgroundColor' , 'red');
}); </script> </body> </html>
js22--链式调用的更多相关文章
- 如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用
1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; ;i<arguments.length;i++){ v ...
- 【Java】子类的链式调用
记录最近在项目设计中遇到的一个小问题. 前提:有这样两个POJO类,它们都可以通过链式调用的方式来设置其属性值,其中一个类继承了另一个类. 问题:通过链式调用,子类对象访问父类方法后,如何使返回对象仍 ...
- hasOwnProperty 递归 简单回调 链式调用
1.hasOwnProperty 函数的返回值为Boolean类型.如果对象object具有名称为propertyName的属性,则返回true,否则返回false. function Box(){ ...
- swift学习笔记之-可选链式调用
//可选链式调用 import UIKit /*可选链式调用(Optional Chaining) 1.在可选值上请求和调用该可选值的属性.方法及下标的方法,如果可选值有值,那么调用就会成功,返回可选 ...
- Swift2.1 语法指南——可空链式调用
原档:https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/Swift_Programmi ...
- JavaScript设计模式——方法的链式调用
方法的链式调用: (function() { //私有类 function _$ (els) { this.elements = []; for(var i = 0, len = els.length ...
- jQuery的XX如何实现?——2.show与链式调用
往期回顾: jQuery的XX如何实现?——1.框架 -------------------------- 源码链接:内附实例代码 jQuery使用许久了,但是有一些API的实现实在想不通.于是抽空看 ...
- Swift-09-可空链式调用(Optional Chaining)
我对这个的理解就是:我们有可能会用到其他的属性或者方法,当我们在使用其他的时候,可以使用点语法去访问另一个的属性,这样的使用,就形成了链式访问. 可空链式调用是一种可以请求和调用属性.方法及下表的过程 ...
- 关于JavaScript中的setTimeout()链式调用和setInterval()探索
http://www.cnblogs.com/Wenwang/archive/2012/01/06/2314283.html http://www.cnblogs.com/yangjunhua/arc ...
- js实现方法的链式调用
假如这里有三个方法:person.unmerried();person.process();person.married();在jQuery中通常的写法是:person.unmerried().pro ...
随机推荐
- 洛谷 P1769 淘汰赛制_NOI导刊2010提高(01)
P1769 淘汰赛制_NOI导刊2010提高(01) 题目描述 淘汰赛制是一种极其残酷的比赛制度.2n名选手分别标号1,2,3,…,2^n-1,2^n,他们将要参加n轮的激烈角逐.每一轮中,将所有参加 ...
- Thinking in UML 学习笔记(三)——UML核心视图之类图
类图的作用:用于展示系统中的类及其相互之间的关系. UML在解决面向对象的方法中对类理解为三个层次,各自是:概念层.说明层.实现层.在UML中,从開始的需求到终于设计类,类图也是环绕这三个层次的观点进 ...
- 为OLED屏添加GUI支持2:2D图形库
为OLED屏添加GUI支持2:2D图形库 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN10 开发环境:MDK5.13 MCU:S ...
- IDEA中的maven web 项目中如何设置自己的本地仓库
我们在创建maven项目的时候如何不使用系统指定的本地仓库,而使用自己设置的仓库呢,这里小女子就来进行讲解一下吧! 讲解一:你要想找到settings.xml你就要自己我去官网上去下载apache-m ...
- vue22 路由
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于checkbox的一些jquery操作
表单在前端开发中是经常会遇到的,其中自然也少不了checkbox复选框,对于复选框的操作无外乎有以下三种:全选,全不选,反选.下面零度逍遥就给大家分析分析. 一.checkbox全选 大家都知道选择c ...
- 解决Esxi5下安装Windows 8的问题
在VM8工作站版下安装windows 8没有问题,可是到了Esxi5下,非得安装补丁不可.补丁下载地址: http://kb.vmware.com/selfservice/microsites/sea ...
- Cisco路由器交换机配置命令详解
1. 交换机支持的命令: 交换机基本状态:switch: :ROM状态, 路由器是rommon>hostname> :用户模式hostname# :特权模式hostname(config) ...
- 安卓https
http://www.tuicool.com/articles/NrmE3e http://blog.csdn.net/guestcode/article/details/50194357 http: ...
- OR1200处理器中Wishbone总线接口模块WB_BIU介绍
下面内容摘自<步步惊芯--软核处理器内部设计分析>一书 WB_BIU模块是OR1200处理器与外部Wishbone总线连接的接口模块.15.1节给出了WB_BIU模块的对外连接关系,并指出 ...