JS面向对象应用，常见组件的封装(轮播，tab，曝光加载)

tab切换

用面向对象的写法如下，创建的对象实例个个独立，不需要考虑相互影响，只需要考虑自己怎么实现即可，下面代码还可以进行优化

    
    
    
    
    





    

        
选项1
        
选项2
        
选项3
    
    

        
内容1
            

                

            
        
        
内容2
        
内容3
    



    

        
选项1
        
选项2
        
选项3
        
选项4
    
    

        
内容1
            

                

            
        
        
内容2
        
内容3
        
内容4
    



    

        
内容1
        
内容2
        
内容3
        
内容4
    
    

        
内容1
            

                

            
        
        
内容2
        
内容3
        
内容4
    

把初始化的东西封装到一起，绑定事件的代码封装到一起，都作为方法绑定到原型上，优化之后的代码如下：

轮播

源代码地址
进行面向对象的组件化写法：
整体思路就是把所有的属性方法都用this关联起来，这样就可以只考虑自己了，但是要注意绑定事件还有匿名函数内部的this要注意保存

轮播二次封装

对于上面封装的组件，如果想达到使用Carousel2.init($('.carousel'));就使得所有的carousel都运转起来的话，就要使用另外一种模块化的方式

首先来看一个区别:

    Carousel2 = {  //方法1 写成一个对象
        init: function () {//写成这样的话 Carousel就是一个对象，只能添加一些属性方法
            console.log(123);
        }
    }
    Carousel2 = (function () { //方法2 写成一个立即执行函数
        var a = 1; //写成这样的好处在于可以赋值一些局部变量，并且这个值外部永远访问不到，并且也能在return中添加新的属性方法
        return {
            init: function () {
                console.log(a);
            }
        }
    })();

上例中，方法2才是真正的封装。所以我们可以把上面的Calousel构造函数直接放到里面Carousel2的立即执行函数的局部作用域里，然后再return中，遍历选取到的所有$('.carousel')，给每一个选取到的$('.carousel')new一个Carousel()的实例。
整体思路如下：

    Carousel2 = (function () { //方法2 写成一个立即执行函数
        // 将写好的Carousel构造函数直接放到这个局部作用域里 就不会暴露出去
        
        return {
            init: function ($ct) {
//                然后只在这里遍历选取到的所有目标元素，每一个元素都相应的创建实例
                   $ct.each(function (index,node) {
                       new Carousel($(node));
                   })
            }
        }
    })();
    Carousel2.init($('.carousel'));

最后可以将Carousel构造函数放到局部作用域中，这样就不会将写好的构造函数暴露出去了。

懒加载（曝光加载）封装

懒加载源代码