<!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 400A Inna and Choose Options

    Inna and Choose Options Time Limit: 1000ms Memory Limit: 262144KB This problem will be judged on Cod ...

  2. Android开发之Volley网络通信框架

    今天用了一下Volley网络通信框架,感觉挺好用的,写个博客记录一下用法.方便以后VC. Volley(Google提供的网络通信库,能使网络通信更快,更简单,更健壮.) 功能模块: 1. JSON, ...

  3. LSTM模型

    摘自:http://www.voidcn.com/article/p-ntafyhkn-zc.html (二)LSTM模型 1.长短期记忆模型(long-short term memory)是一种特殊 ...

  4. vue --- cli build 后的项目，图片路径出错

    今天在插入背景图片过程中,遇到了路径错误的问题,通过网上查询,找到了解决的办法,但是大部分都没有讲造成这种问题的原因,故我简单地总结了一下,并加入了一些自己的理解,欢迎共同探讨~ 当用vue-cli自 ...

  5. 118.类包装器与lambda函数包装器(伪函数实现)

    #include <iostream> #include <list> using namespace std; //函数包装器,左边参数右边函数 template<cl ...

  6. Android Retrofit网络请求Service，@Path、@Query、@QueryMap、@Map...

    http://blog.csdn.net/jdsjlzx/article/details/51607867

  7. Flex之登录界面

    制作登录框界面 环境搭建:MyEclipse 6.5+Flex Builder 3 Plug-in <?xml version="1.0" encoding="ut ...

  8. ES6学习笔记（八）第七种类型Symbol

    1.概述 ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突.如果有一种 ...

  9. 无闻go编程基础笔记

    Go语言做Web编程非常方便,并且在开发效率和程序运行效率方面都非常优秀.相比于Java,其最大的优势就是简便易用,而相比于PHP,它最大的优势就是性能好. (go做web)推荐Gorilla的库,里 ...

  10. 紫书 例题 9-14 UVa 1218 （树形dp）

    这道题有个初始值设成1e9, 然后这个值是要加很多次的,然后就会溢出变成负数, 然后就一直WA, 找这个bug找了一个小时--以后不能随便这样设那么大, 要考虑会不会加很多次然后溢出. 讲一下思路. ...