OOP感想

    OOP是面向对象编程（Object Oriented Programming）。集于一身，最终目的是各司其职，让每一个职责的只关注本身那块，其余的无论丢给下一我的。好比说，一个页面，对于客户，只要能看到漂亮的页面便可；对页面设计师，只要关注页面图片的设计便可；对于前端工程师，只须要关注页面实现便可；对于后台工程师，只要关注交互的数据便可。

    我是前端开发，我就针对于前端的OOP再细分分析下。对于html页面，若是仅仅只是展现，只要知道页面url便可；对于样式设计，只要添加css文件url便可；对于动态效果，只要添加js文件url便可。到这里为止，是否是发现咱们都只要知道下一个的入口就能够了。那我把这个再带入到js文件中，我想要实现一个功能，这里用jquery框架。

         1. 给一个按钮添加一个点击事件，而且输出一句话。

        首先，我就应该想实现它须要作哪些准备？对于DOM的处理，是否是须要在标签都存在了才能获得对象？也就是咱们所说的加载完成后处理。加载完成后，我就想是否是能够直接添加事件了？若是在有n多的事件监听状况下，难道要在文件中平铺n个事件监听？那样会不会到最后本身也不知道是谁是谁了？若是这样不方便，那我仍是按照功能模块区分，以下所示：

html中

　　　　<div class="container">
            <div>
                <button class="btn">点我</button>
            </div>
            <div class="content1"></div>
            <div class="content2"></div>
        </div>

js中

　　　　　　　　var testObject = {
                init: function(){
                    this._btnEvent();
                },
                _btnEvent: function(){
                    $(".btn").click(function(){
                        console.log("我是click！");
                    })
                    $(".btn").mouseover(function(){
                        console.log("我是mouseover！");
                    })
                    $(".btn").mouseout(function(){
                        console.log("我是mouseout！");
                    })
                }
            }

            $(function(){
                testObject.init();
            })

　　这样有没有感受稍显清晰？同一个模块的事件放在同一个方法体下，易于管理，看起来也舒服些。

　　2.接下来我想实现点击按钮后，给一个模块填充内容。

          var testObject = {
                init: function(){
                    this._btnEvent();
                },
                _btnEvent: function(){
                    $(".btn").click(function(){
                        var arr = [
                            "我是item1",
                            "我是item2",
                            "我是item3"
                            ];
                        var p = "";
                        for(var i = 0, len = arr.length; i < len; i++){
                            p += "<p>"+arr[i]+"</p>";
                        }
                        $(".content").append(p);
                    })
                }
            }

            $(function(){
                testObject.init();
            })

感受看着还成，由于代码少，不会有多少影响。若是我还给另外一个模块增长内容。

var testObject = {
                init: function(){
                    this._btnEvent();
                },
                _btnEvent: function(){
                    $(".btn").click(function(){
                        var arr1 = [
                            "我是item1",
                            "我是item2",
                            "我是item3"
                            ];
                        var p = "";
                        for(var i = 0, len = arr1.length; i < len; i++){
                            p += "<p>"+arr1[i]+"</p>";
                        }
                        $(".content1").append(p);

                        var arr2 = [
                            "我是模块1",
                            "我是模块2"
                            ];
                        var div = "";
                        for(var i = 0, len = arr2.length; i < len; i++){
                            div += "<div>"+arr2[i]+"</div>";
                        }
                        $(".content2").append(div);
                    })
                }
            }

            $(function(){
                testObject.init();
            })

这个看起来是否是有点多了？若是我想再添加一个功能。。。连续性功能的平铺，会让人看着累，找一个内容要找半天，更不易于管理。为了不不要这么累，我作如下操做。

var testObject = {
                init: function(){
                    this._btnEvent();
                },
                _btnEvent: function(){
                    $(".btn").click(function(){
                        // 功能1入口
                        addTest1();
                        // 功能2入口
                        addTest2();
                    })
                    $(".btn").mouseover(function(){
                        // console.log("我是mouseover！");
                    })
                    $(".btn").mouseout(function(){
                        // console.log("我是mouseout！");
                    })
                }
            }

            function addTest1(){
                var arr1 = [
                    "我是item1",
                    "我是item2",
                    "我是item3"
                    ];
                var p = "";
                for(var i = 0, len = arr1.length; i < len; i++){
                    p += "<p>"+arr1[i]+"</p>";
                }
                // 若是还要添加其余功能的操作，还能够添加其余方法
                // becomeMan();
                // ...
                $(".content1").append(p);
            }

            function addTest2(){
                var arr2 = [
                    "我是模块1",
                    "我是模块2"
                    ];
                var div = "";
                for(var i = 0, len = arr2.length; i < len; i++){
                    div += "<div>"+arr2[i]+"</div>";
                }
                $(".content2").append(div);
            }

            $(function(){
                testObject.init();
            })

　　这样看起来是否是舒服多了？我还能够在方法体中，再开辟新的方法，互不影响，看着代码也整洁美观些。

　　综上所述，在一个方法体最好只处理一个功能，不要把多个功能蹂在一块儿。牢记，要各司其职。

　　若是有讲的很差或者不对的方法，欢迎拍砖。