<!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. TIME定时器

    一.定时器分类 STM32F1 系列中,除了互联型的产品,共有 8 个定时器,分为基本定时器,通用定时器和高级定时器.基本定时器 TIM6 和 TIM7 是一个 16 位的只能向上计数的定时器,只能定 ...

  2. 【UVA 437】The Tower of Babylon(记忆化搜索写法)

    [题目链接]:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...

  3. 【Cocos2d-x 3.0】游戏开发之win32配置环境搭建project

    作者:Senlern 转载请注明,原文链接:http://blog.csdn.net/zhang429350061/article/details/37958275 非常久没有写教程了.如今认为还是要 ...

  4. swift具体解释之八---------------下标脚本

    swift具体解释之八-----下标脚本 下标脚本 能够定义在类(Class).结构体(structure)和枚举(enumeration)这些目标中.能够觉得是訪问对象.集合或序列的快捷方式.不须要 ...

  5. void指针 （补充）

    void* 表示空指针.空指针不能直接使用,比如,指针的加减法操作(由于不知道类型,无法确定偏移的大小).某些情况下.不知道指针的类型,先用void*来取代,依据须要再强制转换成须要的指针类型使用. ...

  6. Mysql之索引的基本概念

    一.索引是什么? 比如我们要在字典中找某一字,如何才能快速找到呢?那就是通过字典的目录. 对数据库来说,索引的作用就是给‘数据’加目录. 二.索引算法 设有N条随机记录,不用索引,平均查找N/2次,那 ...

  7. 25.Detours劫持技术

    Detours可以用来实现劫持,他是微软亚洲研究院开发出来的工具,要实现它首先需要安装Detours. 安装地址链接:https://pan.baidu.com/s/1eTolVZs 密码:uy8x ...

  8. BZOJ 1503 treap

    思路: treap (算是基本操作吧-..) 加减的操作数很少 就暴力好啦 每回判断一下最小的数是不是比M小 如果是 就删,继续判断 搞定. //By SiriusRen #include <c ...

  9. 携手互联网企业10巨头设VC基金

    包括小米科技.盛大集团.人人网.掌趣科技.游族网络.龙图游戏.蓝港互动.37游戏.星辉互动娱乐.博雅互动等10家知名互联网企业作为出资人(LP)的优格创投基金近日正式成立. 众所周知,伴随着移动互联网 ...

  10. 实现图片懒加载(lazyload)

    对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB.当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户. 所以,对于图片过多 ...