<!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--链式调用的更多相关文章

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

    1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; ;i<arguments.length;i++){ v ...

  2. 【Java】子类的链式调用

    记录最近在项目设计中遇到的一个小问题. 前提:有这样两个POJO类,它们都可以通过链式调用的方式来设置其属性值,其中一个类继承了另一个类. 问题:通过链式调用,子类对象访问父类方法后,如何使返回对象仍 ...

  3. hasOwnProperty 递归 简单回调 链式调用

    1.hasOwnProperty 函数的返回值为Boolean类型.如果对象object具有名称为propertyName的属性,则返回true,否则返回false. function Box(){ ...

  4. swift学习笔记之-可选链式调用

    //可选链式调用 import UIKit /*可选链式调用(Optional Chaining) 1.在可选值上请求和调用该可选值的属性.方法及下标的方法,如果可选值有值,那么调用就会成功,返回可选 ...

  5. Swift2.1 语法指南——可空链式调用

    原档:https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/Swift_Programmi ...

  6. JavaScript设计模式——方法的链式调用

    方法的链式调用: (function() { //私有类 function _$ (els) { this.elements = []; for(var i = 0, len = els.length ...

  7. jQuery的XX如何实现?——2.show与链式调用

    往期回顾: jQuery的XX如何实现?——1.框架 -------------------------- 源码链接:内附实例代码 jQuery使用许久了,但是有一些API的实现实在想不通.于是抽空看 ...

  8. Swift-09-可空链式调用(Optional Chaining)

    我对这个的理解就是:我们有可能会用到其他的属性或者方法,当我们在使用其他的时候,可以使用点语法去访问另一个的属性,这样的使用,就形成了链式访问. 可空链式调用是一种可以请求和调用属性.方法及下表的过程 ...

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

    http://www.cnblogs.com/Wenwang/archive/2012/01/06/2314283.html http://www.cnblogs.com/yangjunhua/arc ...

  10. js实现方法的链式调用

    假如这里有三个方法:person.unmerried();person.process();person.married();在jQuery中通常的写法是:person.unmerried().pro ...

随机推荐

  1. Android通过XML来定义Menu

    直接在代码中添加菜单项,给菜单项分组等,这是比较传统的做法,它存在着一些不足.比如说,为了响应每个菜单项,我们需要用常量来保存每个菜单项的ID等.为此,Android提供了一种更好的方式,就是把men ...

  2. 【ICM Technex 2018 and Codeforces Round #463 (Div. 1 + Div. 2, combined) B】Recursive Queries

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 写个记忆化搜索. 接近O(n)的复杂度吧 [代码] #include <bits/stdc++.h> using nam ...

  3. Mysql学习总结(1)——常用sql语句汇总

    一.基础 1.说明:创建数据库 CREATE DATABASE database-name  2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- ...

  4. Ubuntu 16.04/18.04 LTS改变时区和语言

    Ubuntu 16.04/18.04 LTS改变Timezone时区设定原文 https://www.phpini.com/linux/ubuntu-16-04-change-timezone-set ...

  5. vue.2.0-自定义全局组件

    App.vue <template> <div id="app"> <h3>welcome vue-loading</h3> < ...

  6. Material Design控件使用学习 TabLayout+SwipeRefreshlayout

    效果: Tablayout有点类似之前接触过的开源ViewPagerIndicator,将其与viewpager绑定,可实现viewpager的导航功能. SwipeRefreshLayout是官方出 ...

  7. Android自定义组件系列【15】——四个方向滑动的菜单实现

    今天无意中实现了一个四个方向滑动的菜单,感觉挺好玩,滑动起来很顺手,既然已经做出来了就贴出来让大家也玩弄一下. 一.效果演示 (说明:目前没有安装Android模拟器,制作的动态图片太卡了,就贴一下静 ...

  8. 【实用篇】Android之应用程序实现自动更新功能

    我个人用的是友盟提供的自动更新组件,因此在这里只描述如何实用友盟提供的组件来完成程序的自动更新,步骤如下: 1.登录友盟官网,点击注册一个友盟账号. 2.注册成功后将会自动进入到添加新应用界面,选择添 ...

  9. LINQ的基本语法包含如下的8个上下文关键字,这些关键字和具体的说明如下

    出于工作需要,准备把LINQ的相关知识梳理一遍,希望能填补下之前学习漏掉的或是没有注意的地方,也为未来减轻压力~ LINQ查询表达式的基本语法很容易掌握,它使用C#常见的语言构造,从外观上看,和我们常 ...

  10. Felx之菜单导航

    Felx之菜单导航 环境搭建:MyEclipse 6.5+Flex Builder 3 Plug-in <?xml version="1.0" encoding=" ...