<!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. 中国象棋程序的设计与实现(十一)--第2次回答CSDN读者的一些问题

    最近一段时间,有不少CSDN读者朋友看了我写的中国象棋文章.其中,不少爱好者下载了中国象棋程序的初级版和高级版源码. 由于水平有限,不少同学遇到了若干问题,向我咨询,寻找解决办法. 我的处境1.如果我 ...

  2. POJ——T 1182 食物链

    http://poj.org/problem?id=1182 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 77012   ...

  3. zookeeper 性能测试

    zookeeper压力测试:性能对比(3个节点,5个节点,7个节点 创建节点.删除节点.设置节点数据.读取节点数据性能及并发性能) 测试结果如下: 五次测试三节点结果: 创建100W节点用时:15.0 ...

  4. Android ImageView设置图片原理（下）

    本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 写完上一篇后,总认为介绍的知识点不多,仅仅是一种在UI线程解析载入图片.两种在子线程解析,在UI线程 ...

  5. C#做的CPU内存使用率

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. 封装html代码块到js函数中

    有时候想把公共的html封装起来,怎么处理呢? 好多页面都用到,不可能每个页面都写,这样就会有冗余,并且不好统一处理. 那就用js来重构html吧. 代码案例如下: <footer class= ...

  7. 6.C语言迷宫程序界面版

    写迷宫程序首先需要安装图形库easyX 安装地址链接:https://pan.baidu.com/s/1qZwFn3m 密码:ozge 项目截图: //左上角是七点,右下角是终点,蓝色表示的是走过的路 ...

  8. Coderfroces 862 B . Mahmoud and Ehab and the bipartiteness

     Mahmoud and Ehab and the bipartiteness Mahmoud and Ehab continue their adventures! As everybody in ...

  9. ubuntu server 网络配置，主机名配置

    一.通过命令ifconfig -a 查看可用网络设备 通过上面的命令,本机可用的网络设备为enp4s0f0 和enp4s0f1 ,不同的系统版本和硬件配置网络设备名可能不一样,所以一定要先确认本机可用 ...

  10. linux sed命令详解 --大量举例

    1. Sed简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后 ...