<!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. 雅礼集训1-9day爆零记

    雅礼集训1-9day爆零记 先膜一下虐爆我的JEFF巨佬 Day0 我也不知道我要去干嘛,就不想搞文化科 (文化太辣鸡了.jpg) 听李总说可以去看(羡慕)各路大佬谈笑风声,我就报一个名吧,没想到还真 ...

  2. iOS日期转换之UTC/GMT时间格式

    GMT只需要将代码中的UTC替换为GMT即可 //将本地日期字符串转为UTC日期字符串 //本地日期格式:2013-08-03 12:53:51 //可自行指定输入输出格式 -(NSString *) ...

  3. 打包maven项目

    使用插件maven-jar-plugin打包自己的项目,为了打包后点击jar文件可以直接运行,需要指定入口类和classpath.使用maven-dependency-plugin插件打包项目的依赖& ...

  4. 金融项目java开发_BigDecimal(解决计算精度问题)

    当使用double进行商业运算时,double计算会丢失精度.可以使用BigDecimal进行计算. import java.math.BigDecimal; import org.junit.Tes ...

  5. 转载-- Qt Creator编译时make： arm-linux-g++: command not found 错误！

    前提是已经配置好交叉编译器,但是qt creator找不到. 解决方法: 修改 /usr/local/Trolltech/QtEmbedded-4.7.0-arm/mkspecs/qws/linux- ...

  6. 用typename和template消除歧义

  7. [Poi] Build and Analyze Your JavaScript Bundles with Poi

    Ever wonder where those extra KB in your bundle are coming from? This lesson walks you through runni ...

  8. 理解ThreadLocal类

    1 ThreadLocal是什么 早在JDK 1.2的版本号中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路. 使用这个工具类能够 ...

  9. rman数据库恢复；关键/非重要文件、影像副本、控制文件、还原点、非归档、增量、新数据库、灾难性回复

    运行全然恢复:在 ARCHIVELOG 模式下 丢失了系统重要数据文件: 假设某个数据文件丢失或损坏.且该文件属于 SYSTEM 或 UNDO 表空间,请运行下面步骤: 1. 实例可能会也可能不会自己 ...

  10. 在spring-mybatis.xml 中配置pagehelper

    maven导包:<dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</ ...