<!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. CodeForces 337A Puzzles

    Puzzles Time Limit: 1000ms Memory Limit: 262144KB This problem will be judged on CodeForces. Origina ...

  2. C# 字符串 分割 反转 Base64

    "; //字符串 ToBase64 byte[] bytes = Encoding.Default.GetBytes(pwd); pwd = Convert.ToBase64String(b ...

  3. UML 绘图关系

    1 继承         子类继承父类   2 实现         实现类实现接口 3 依赖 (偶然.临时.比较弱关联)     类 A 使用了类 B,如果类 B 产生变化将会影响类A       ...

  4. C# Winform利用POST传值方式模拟表单提交数据(Winform与网页交互)

    其原理是,利用winfrom模拟表单提交数据.将要提交的參数提交给网页,网页运行代码.得到数据.然后Winform程序将网页的全部源码读取下来.这样就达到windows应用程序和web应用程序之间传參 ...

  5. Use Uncertainty As a Driver

     Use Uncertainty As a Driver Kevlin Henney ConFRonTEd WiTH TWo opTionS, most people think that the ...

  6. MyEclipse连接不上genymotion的解决方式

    奇怪的是我的MyEclipse有时候连接得上genymotion,有时候又连接不上.之前连接不上的时候,就直接用真机调试,因此出现这个问题非常久了一直都没有去找解决方式.今天认真的反省了自己,再也不能 ...

  7. Objective-C学习笔记（十）——循环语句for和do-while的使用

    在OC中.除了while这样的循环方式外,还有另外for循环和do-while循环.它们在不同的业务逻辑下会有不同的作用.能够和C语言和Java对照着学习. (一)代码一: int main(int ...

  8. ubuntu下安装RemixOS双系统(Android x86)

    这篇文章主要讲在怎样在ubuntu下安装RemixOS pc版(Android x86版本号),下面两种做法的思路都适合安装不论什么版本号的Android x86版本号到ubuntu系统上,仅仅须要改 ...

  9. @Not - Empty-Null-Blank

    1 @NotEmpty :不能为null,且Size>0 2  @NotNull:不能为null,但可以为empty,没有Size的约束 3  @NotBlank:只用于String,不能为nu ...

  10. 手动新建hive编程环境（以hive-1.0.0和hive-1.2.1为例）

    如下,是用maven构建项目,本篇博文重点不是这个.初学者(小白)变成小鸟后,建议开始用maven啦! Eclipse下Maven新建项目.自动打依赖jar包(包含普通项目和Web项目) HBase ...