oop面向?qū)ο蟮木幊趟枷?--分三步走
第一步--創(chuàng)建一個對象
創(chuàng)建一個對象--1初始化（啟動功能） 2.綁定事件操作 3.把數(shù)據(jù)渲染到也面中
前端開發(fā)向后臺發(fā)送ajax異步的請求.(請求方式get/post)--后臺返回json格式的字符串我們得遍歷
ajax異步----做飯的同時做菜
axaj同步----做好飯才能做菜
第二步---將功能進行初始化
第三步---將頁面進行初始化--調(diào)用過程

  var Tab = {
            init: function () {
                this.wrap = document.querySelector('.wrap')
                this.tabHeader = document.querySelectorAll('.tabHeader li')
                this.tabPanel = document.querySelectorAll('.tabPanel li')
                // this在Tab對象上分別掛載了wrap tabHeader tabPanel屬性
                // wrap tabPanel tabHeader 三個全局變成了局部變量
                // 在初始化里要調(diào)用一下bind的方法
                this.bind();
            },
            //2.綁定事件
            bind: function(){
                this.wrap.addEventListener('click', function (e) {
                    var target = e.target;
                    console.log(target);//是所點擊的事件源
                    if (target.nodeName === 'LI') {
                        for (var i = 0; i < Tab.tabHeader.length; i++) {
                            Tab.tabHeader[i].classList.remove('active')
                        }
                        target.classList.add('active')
                        var index = [].indexOf.call(Tab.tabHeader, target)
                        for (var i = 0; i < Tab.tabHeader.length; i++) {
                            Tab.tabPanel[i].classList.remove('active')
                        }
                        Tab.tabPanel[index].classList.add('active')
                    }
                })
            },
            //3.把真實數(shù)據(jù)渲染到頁面中
            render: function () {
                //渲染頁面
            }
        }
        // 第三步---將頁面進行初始化--調(diào)用過程
        Tab.init()