编程练习--简单实用的选项卡切换效果
有網(wǎng)友私信我，說我前幾篇寫編程練習(xí)的例子讓他們感覺我寫代碼的方式和他們不一樣，讓他們很受啟發(fā)，希望我多寫一些這樣的例子。他們幫我總結(jié)了一下，主要表現(xiàn)在以下三個(gè)方面：
1. 代碼外觀整潔清爽。
2.喜歡用對(duì)象方式編寫。
3.喜歡用原生javascript。
我非常認(rèn)同上面三點(diǎn)，事實(shí)上我也是堅(jiān)持這么做的。第1點(diǎn)自不必說，愛美之心，人皆有之。我想沒有一個(gè)人愿意看排的凌亂不甚的代碼的。第2點(diǎn)呢，我個(gè)人認(rèn)為好處就很多了，最直接的好處就是可以更好的組織代碼，使各功能模塊之間即獨(dú)立又相互協(xié)調(diào)，也方便擴(kuò)展和維護(hù)。第3條呢是因?yàn)槲夷壳暗墓ぷ鳝h(huán)境是移動(dòng)客戶端的前端開發(fā)，一般只要兼容webkite內(nèi)核的瀏覽器就可以了，用原生的方法寫可以使代碼寫的短小精悍，同時(shí)也可以把更多的觀注點(diǎn)放在業(yè)務(wù)邏輯上。
常言道，拳不離手，曲不離口，技術(shù)都是熟能生巧，不能懈怠。有時(shí)候在網(wǎng)上看到一些好的例子，覺得或許以后會(huì)用的上，于是拿來自己改寫下。選項(xiàng)卡在web應(yīng)用中很常見，實(shí)現(xiàn)的方式也是多種多樣。下面這一款，就是利用javascript和css實(shí)現(xiàn)的，效果圖如下：
在線演示：http://runjs.cn/code/r8kqphjl
經(jīng)過我的改寫之后。調(diào)用非常簡單：
//實(shí)例化選項(xiàng)卡 var op = new Tabs('menu');只要傳入選項(xiàng)卡節(jié)點(diǎn)的id就可以了。下面是js代碼：
/*** 選項(xiàng)卡類* @param {string} id 選項(xiàng)卡的ID*/ function Tabs(id){var node = document.querySelector('#'+id);var selected = node.querySelector('.selected');this.selected = selected;this.node = node;this.bindEvent(); }/*** 切換選項(xiàng)卡* @param {object} event 事件* @return {[type]} [description]*/ Tabs.prototype.change = function(event){var element = event.target;if(element.tagName.toLowerCase()=='li'){if(element.className=='selected'){return;}}else{while(element != this.node){element = element.parentNode;if(element.tagName.toLowerCase()=='li'){break;}}}this.selected.removeAttribute('class');element.className = 'selected';this.selected = element; }/*** 綁定事件* @return {[type]} [description]*/ Tabs.prototype.bindEvent = function(){this.node.addEventListener('click',this.change.bind(this),false) }大家看到，我沒有用jquery,因?yàn)槲覍Ｗ⒌闹攸c(diǎn)在于實(shí)現(xiàn)的邏輯，一共三個(gè)部分：先是初始化，然后是切換功能，最后是事件綁定。我們?cè)賮砜纯丛瓉淼拇a：
$(function(){ $("li").on("click", function(){$("LI").removeClass("selected");$(this).toggleClass("selected", true); }) });?
我看到原來的代碼里邊，是用$('li').on這樣的表達(dá)式配合循環(huán)遍歷去做的。雖然看起來代碼少，但實(shí)際上隱藏在$下面的代碼量一點(diǎn)都不少。這還不是重點(diǎn)，重要的是這樣相當(dāng)于是每一個(gè)li上都綁定一個(gè)同樣的操作，而且每一次切換都相當(dāng)于更新了每一個(gè)li的樣式。讀過jquery源碼的人都知道，$("li")實(shí)際上是得到一個(gè)集合，內(nèi)部是循環(huán)去檢查每一個(gè)li，判斷它是不是有選中的樣式，如果有就拿掉，然后把當(dāng)前點(diǎn)中項(xiàng)加上選中樣式。用的時(shí)候感覺爽，實(shí)際上非常的低效。
如果我們把整個(gè)選項(xiàng)卡看成是一個(gè)對(duì)象，那么每一個(gè)選項(xiàng)就像是這個(gè)對(duì)象上的一部分，初始化的時(shí)候，就讓對(duì)象保存好每一個(gè)選項(xiàng)的狀態(tài)，哪一個(gè)選項(xiàng)是選中的，它內(nèi)部自然是應(yīng)當(dāng)知道的。當(dāng)我們切換的時(shí)候，只要更新對(duì)象具體的狀態(tài)值就行，根本不需要去一個(gè)一個(gè)的遍歷。 就像老師在黑板上板書一樣，他知道哪一塊要保留，哪一塊要擦掉。不需每寫一次就把黑板全部擦一次。
好了，我知道又會(huì)有朋友要吐槽我的比喻了。我做好準(zhǔn)備了，愛吐糟的你在哪里？
轉(zhuǎn)載于:https://www.cnblogs.com/afrog/p/4098118.html
總結(jié)
以上是生活随笔為你收集整理的编程练习--简单实用的选项卡切换效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
