js链式编程

1.先举一个小例子，什么是链式编程

<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();
            d1.eat();
            d1.sleep();
            
            d1.run().eat().sleep();
            
        </script>

2.模拟jquery底层代码实现

<input id = "input" type = "button" value="click me"/>
        
        <script type="text/javascript" charset="utf-8">
            
            // 模拟jquery底层链式编程
            
            // 块级作用域
            /**
            (function(){
                // 特点一，程序启动即执行
                alert('i am running');
                // 特点二，内部的成员变量，外部无法访问。除了不加var修饰的变量
                
            })();
            */
            
            (function(window, undifined){
                // $ 最常用的符号 返回给外界
                // 大型程序开发，一般使用'_'作为私有的对象，这是一个编程规范
                function _$(arguments){
                    // 实现代码..。
                    // 正则表达式匹配ID 选择器
                    var idSelector = /#\w+/;
                    // 定义一个内置属性来接收得到元素
                    this.dom;
                    // 如果匹配成功接收DOM元素
                    if(idSelector.test(arguments[0])) {
                        this.dom = document.getElementById(arguments[0].substring(1));
                        
                    } else {
                        throw new Error('arguments is error');
                    }
                }
                
                // 在Function上扩展一个可以实现链式编程的方法。
                Function.prototype.method = function(methodName, fn){
                    this.prototype[methodName] = fn;
                    // 链式编程的关键
                    return this;
                };
                
                // 在_$的原型对象上加一些公共的方法。
                _$.prototype = {
                    constructor : _$,
                    addEvent : function(type, fn){
                        // 给得到的元素注册时间
                        // FireFox
                        if(window.addEventListener) {
                            this.dom.addEventListener(type, fn);
                        }
                        // IE 
                        else if (window.attachEvent) {
                            this.dom.attachEvent('on' + type, fn);
                        }
                        
                        return this;
                    },
                    setStyle : function(prop, val){
                        this.dom.style[prop] = val;
                        return this;
                    }
                };
                
                // window上 先注册一个全局变量  与外界产生关系
                window.$ = _$;
                
                // 写一个准备的方法
                _$.onReady = function(fn) {
                    // 1.实例化出来_$对象 真正的注册到window上
                    window.$ = function() {
                        return new _$(arguments);
                    };
                    // 2.执行传入进来的代码
                    fn();
                    // 3.实现链式编程
                    _$.method('addEvent', function(){}).method('setStyle', function(){});
                };
                
                
            })(window);// 程序的入口，window传入作用域中
            
            // test
            $onReady(function() {
                var input = $('#inp');
                input.addEvent('click', function(){
                    alert('我被点击了！');
                }).setStyle('backgroundColor', 'red');
            });
        </script>