oop面向编程对象

oop面向对象的编程思想---分三步走
第一步--创建一个对象
创建一个对象--1初始化（启动功能） 2.绑定事件操作 3.把数据渲染到也面中
前端开发向后台发送ajax异步的请求.(请求方式get/post)--后台返回json格式的字符串我们得遍历
ajax异步----做饭的同时做菜
axaj同步----做好饭才能做菜
第二步---将功能进行初始化
第三步---将页面进行初始化--调用过程

  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 三个全局变成了局部变量
                // 在初始化里要调用一下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.把真实数据渲染到页面中
            render: function () {
                //渲染页面
            }
        }
        // 第三步---将页面进行初始化--调用过程
        Tab.init()