面向对象高级之--利用纯面向对象和沙箱模式组织代码

// 此文 是利用纯面向对象基于jQuery 封装了一个tab栏切换和自动轮播的功能; 主要在于理解如何利用面向对象的方式组织代码,如何减少全局污染,以及利用单一职责来提高代码的 可阅读性 和 可维护性;

// tabs.js文件整体代码如下:

(function($) { 'user strict'; var Tab=function(config) { this.init(config); }; Tab.prototype={ constructor:Tab, //初始化属性和事件 init:function(config) { this.menuId=config.menuId||'tab-menu'; this.mainId=config.mainId||'tab-main'; this.$menu=$('#'+this.menuId).children(); this.$main=$('#'+this.mainId).children(); //维护一个index this.index=0; this.isAuto=config.isAuto||false; this.isAuto && this.autoPlay(); this.initEvent(); }, //单一职责:每个方法尽可能的单一 //抽离方法:绑定事件 , 实现tab切换 initEvent:function() { var that=this; this.$menu.on('click',function(){ //此处函数的this指向当前dom对象 that.index= $(this).index(); that.change(); }); }, //切换功能 change:function() { //此处的this是当前的实例对象 //var index= $(this).index(); this.$menu.eq(this.index).addClass('active').siblings().removeClass('active'); this.$main.eq(this.index).addClass('selected').siblings().removeClass('selected') }, //自动轮播功能 autoPlay:function() { var that=this; var set=function() { that.index++; if(that.index>3){ that.index=0; } that.change(); }; //清理计时器 var setId=setInterval(set,1000); this.$menu.mouseenter(function() { clearInterval(setId) }).mouseleave(function() { setId=setInterval(set,1000); }); }, //下一张功能 playNext:function() { this.index++; if(this.index>3){ this.index=0; } this.change(); }, //上一张功能 playPrve:function() { this.index--; if(this.index<0){ this.index=3; } this.change(); } }; //暴露在全局中 $.fn.tab=function(config) { //原型this是jQuery对象 new Tab(config); } })(jQuery)利用沙箱模式传入jQuery / $, 将 fn 作为jQuery中全局变量$的属性即可; //保证全局环境中只声明了一个变量  jQuery / $ , 将全局污染最小化; 最终最终,我们只需要引入文件,像jQuery一样调用时传入父元素id即可;

<script src="js/jquery.js"></script> <script src="js/tabs.js"></script> <script type="text/javascript"> $('#wrapper').tab({ isAuto:true }); </script> html结构就省略了,根据代码结构自行脑补吧 

个人日记 , 纯手打 ,欢迎指正 !