我自己常常在寫代碼的時(shí)候，會(huì)突然搞不清變量用來干嘛的，也會(huì)被理不清的邏輯搞得自己異常煩躁，我甚至常常暗示自己我不適合寫代碼，思維總是那么不清晰。直到我發(fā)現(xiàn)了思維導(dǎo)圖的妙用。

最開始使用思維導(dǎo)圖的時(shí)候，我其實(shí)是用來記知識(shí)點(diǎn)的。然而某一刻就靈光一閃了，嘗試使用了思維導(dǎo)圖來記錄代碼變量和邏輯，最后居然就輕松的把以為要理很久的問題搞定了。為了驗(yàn)證自己的想法，我又嘗試自己寫了一些小東西，對(duì)于我們這些初學(xué)者，肯定是選項(xiàng)卡和分頁什么的最常用了，因?yàn)槔锩嬗幸恍┳兞靠偸悄敲戳钊穗y以捉摸，這里我以分頁為例，向大家分享我是如何用腦圖完成分頁的。

這里省去使用ajax獲取后臺(tái)數(shù)據(jù)的部分，我自己創(chuàng)建一個(gè)js文件，里面用JSON存了一點(diǎn)數(shù)據(jù)。一般來說使用ajax都是一頁一頁的獲取數(shù)據(jù)，我這里直接將所有數(shù)據(jù)都顯示出來。

首先，根據(jù)多方了解，翻閱資料，找到了一種實(shí)現(xiàn)分頁的方式，大概就是用一些變量來控制，比如當(dāng)前頁，總頁數(shù)，還有第幾頁的按鈕等等，然后再寫一個(gè)比如showPage()來顯示當(dāng)前頁的內(nèi)容，通過變量的改變來控制showPage()的顯示。

• 首先用css畫一個(gè)大概樣式圖

• 然后自行腦補(bǔ)一下想要實(shí)現(xiàn)的功能

• 理清變量和功能方法

• 然后我們以showBtn()為例，思考如何完成這個(gè)函數(shù)。

我們默認(rèn)每一個(gè)button頁有5個(gè)按鈕，為了防止最后一頁不夠5個(gè)，因此先隱藏所有的按鈕，然后通過循環(huán)將存在的按鈕顯示出來

于是我就可以完成showButton函數(shù)如下

function showButton() {var$numb = $('.numb'),min = (btn_cur-1)*5 + 1,max = 0;if (btn_cur == btn_acount) {max = page_acount + 1;} else if (btn_cur < btn_acount) {max = (btn_cur*5) + 1;};$numb.hide();for(var i=min; i<max; i++) {!function() {$numb.eq(i%5 - 1).show();$numb.eq(i%5 - 1).attr('data-list', i);$numb.eq(i%5 - 1).html(i);}();} }

當(dāng)我沒有使用腦圖寫出來的代碼是這樣的 - -！，完全沒邏輯可言有木有

function showButton() {var $numb = $('.numb');if (btn_acount == 1) {$numb.hide();$('.more').hide();$('.last').hide();for(var i=0; i<acountPage; i++) {$numb.eq(i).show();$numb.eq(i).attr('data-list', i);}};var min = (btn_cur-1)*5 + 1;var max = 0;if (btn_cur == btn_acount) {max = page_acount+1;} else if (btn_cur < btn_acount) {max = btn_cur*5+1;};$numb.hide();for( var i=min; i<max; i++ ) {$numb.eq(i%5 - 1).show();$numb.eq(i%5 - 1).attr('data-list', i);$numb.eq(i%5 - 1).html(i);} }

• 在來一輪邏輯整理，當(dāng)函數(shù)都寫好，變量都整明白了，就可以添加事件了，先來一輪思維整理。

于是按照這個(gè)思路，輕松完成事件添加，代碼如下

$('.pos_page').on('click', function(e) {// e.preventDefault();var $target = $(e.target);var className = $target.attr('class').split(' ')[0];$target.on('selectstart', function() {return false;});switch(className) {case 'prev_page':if (index!=0) {index -= 1;page_cur -= 1;} else if (index == 0) {if (btn_cur > 1 ) {index = 4;btn_cur -= 1;page_cur -= 1;} else if (btn_cur == 1) {return;}};showPage(page_cur, page_every);showButton();setFocus();break;case 'next_page':if (btn_cur == btn_acount) {if (index == page_acount%5 - 1) {return;} else if( index < page_acount%5 - 1) {index ++;page_cur ++;}} else if (btn_cur < btn_acount) {if (index == 4) {index = 0;btn_cur += 1;page_cur += 1;} else if (index < 4) {index ++;page_cur++;};};showPage(page_cur, page_every);showButton();setFocus();break;case 'numb':page_cur = $target.attr('data-list');index = page_cur%5-1;console.log(page_cur);showPage(page_cur, page_every);showButton();setFocus();break;case 'more':if (btn_cur < btn_acount) {btn_cur += 1;index = 0;showButton();setFocus();page_cur = $('.numb').eq(0).html();showPage(page_cur, page_every);};break;case 'last':if (btn_cur != btn_acount) {btn_cur = btn_acount;index = 0;page_cur = (btn_cur - 1)*5 +1;showPage(page_cur, page_every);showButton();setFocus();};default:break;} }); 主要是通過類名來區(qū)分目標(biāo)DOM，通過自定義data-list屬性來標(biāo)識(shí)當(dāng)前頁

總的來說，與我而言，通過思維導(dǎo)圖，是寫出思維嚴(yán)密，易于維護(hù)的代碼的有效途徑，看上去浪費(fèi)了時(shí)間，其實(shí)增加了非常多的效率。

總結(jié)

以上是生活随笔為你收集整理的使用思维导图，优雅的完成自己的代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。