摘要:于是按照這個思路,輕松完成事件添加,代碼如下主要是通過類名來區(qū)分目標,通過自定義屬性來標識當前頁總的來說,與我而言,通過思維導(dǎo)圖,是寫出思維嚴密,易于維護的代碼的有效途徑,看上去浪費了時間,其實增加了非常多的效率。
我自己常常在寫代碼的時候,會突然搞不清變量用來干嘛的,也會被理不清的邏輯搞得自己異常煩躁,我甚至常常暗示自己我不適合寫代碼,思維總是那么不清晰。直到我發(fā)現(xiàn)了思維導(dǎo)圖的妙用。
最開始使用思維導(dǎo)圖的時候,我其實是用來記知識點的。然而某一刻就靈光一閃了,嘗試使用了思維導(dǎo)圖來記錄代碼變量和邏輯,最后居然就輕松的把以為要理很久的問題搞定了。為了驗證自己的想法,我又嘗試自己寫了一些小東西,對于我們這些初學(xué)者,肯定是選項卡和分頁什么的最常用了,因為里面有一些變量總是那么令人難以捉摸,這里我以分頁為例,向大家分享我是如何用腦圖完成分頁的。
這里省去使用ajax獲取后臺數(shù)據(jù)的部分,我自己創(chuàng)建一個js文件,里面用JSON存了一點數(shù)據(jù)。一般來說使用ajax都是一頁一頁的獲取數(shù)據(jù),我這里直接將所有數(shù)據(jù)都顯示出來。
首先,根據(jù)多方了解,翻閱資料,找到了一種實現(xiàn)分頁的方式,大概就是用一些變量來控制,比如當前頁,總頁數(shù),還有第幾頁的按鈕等等,然后再寫一個比如showPage()來顯示當前頁的內(nèi)容,通過變量的改變來控制showPage()的顯示。
首先用css畫一個大概樣式圖
然后自行腦補一下想要實現(xiàn)的功能
理清變量和功能方法
然后我們以showBtn()為例,思考如何完成這個函數(shù)。
我們默認每一個button頁有5個按鈕,為了防止最后一頁不夠5個,因此先隱藏所有的按鈕,然后通過循環(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當我沒有使用腦圖寫出來的代碼是這樣的 - -!,完全沒邏輯可言有木有
function showButton() { var $numb = $(".numb"); if (btn_acount == 1) { $numb.hide(); $(".more").hide(); $(".last").hide(); for(var i=0; i在來一輪邏輯整理,當函數(shù)都寫好,變量都整明白了,就可以添加事件了,先來一輪思維整理。
于是按照這個思路,輕松完成事件添加,代碼如下$(".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ū)分目標DOM,通過自定義data-list屬性來標識當前頁總的來說,與我而言,通過思維導(dǎo)圖,是寫出思維嚴密,易于維護的代碼的有效途徑,看上去浪費了時間,其實增加了非常多的效率。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/92158.html
摘要:思維導(dǎo)圖的好處它們能投讓你一直對全部知識圖景了然于胸,因而可以讓你對那一學(xué)科的全部知識有一個更加平衡和更加全面的理解。竭盡所能地利用一切讓思維導(dǎo)圖的制作過程充滿樂趣音樂繪畫色彩。 從小老師就教育小肆,要多記筆記,說好記性不如爛筆頭,但記過的筆記卻很快就忘了,甚至回頭再看都不知道當時記得什么,一直期望能有個比記筆記更好的方法來學(xué)習(xí),直到我遇見了它--思維導(dǎo)圖。 什么是思維導(dǎo)圖? 人腦不是...
摘要:下面就是我的另一篇文章你真的了解和嗎中的思維導(dǎo)圖。但是托尼布贊并沒有沉淪,而是尋找解決方法,最終發(fā)明了思維導(dǎo)圖。本節(jié)的思維導(dǎo)圖就是典型的折中型思維導(dǎo)圖。安排合適的間隔合適的間隔能夠很大程度提高思維導(dǎo)圖的審美性。 天下事有難易乎?為之,則難者亦易矣;不為,則易者亦難矣。——《為學(xué)》 引言 我猜發(fā)布文章的同學(xué)肯定都有一個目標,那就是獲得更多的推薦。推薦越多,表示得到別人的認同越多,自我滿...
摘要:下面就是我的另一篇文章你真的了解和嗎中的思維導(dǎo)圖。但是托尼布贊并沒有沉淪,而是尋找解決方法,最終發(fā)明了思維導(dǎo)圖。本節(jié)的思維導(dǎo)圖就是典型的折中型思維導(dǎo)圖。安排合適的間隔合適的間隔能夠很大程度提高思維導(dǎo)圖的審美性。 天下事有難易乎?為之,則難者亦易矣;不為,則易者亦難矣。——《為學(xué)》 引言 我猜發(fā)布文章的同學(xué)肯定都有一個目標,那就是獲得更多的推薦。推薦越多,表示得到別人的認同越多,自我滿...
閱讀 2491·2021-11-24 09:39
閱讀 3415·2021-11-15 11:37
閱讀 2268·2021-10-08 10:04
閱讀 3977·2021-09-09 11:54
閱讀 1890·2021-08-18 10:24
閱讀 1060·2019-08-30 11:02
閱讀 1805·2019-08-29 18:45
閱讀 1661·2019-08-29 16:33