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

　　這樣看起來是否是舒服多了？我還能夠在方法體中，再開闢新的方法，互不影響，看着代碼也整潔美觀些。

　　綜上所述，在一個方法體最好只處理一個功能，不要把多個功能蹂在一塊兒。牢記，要各司其職。

　　若是有講的很差或者不對的方法，歡迎拍磚。