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