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();
            })

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

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

　　如果有讲的不好或者不对的方法，欢迎拍砖。