者:sunshine小小倩
轉發鏈接:https://juejin.im/post/599970f4518825243a78b9d5
近開學,有同學問小編能不能出一期關于宋江的人物形象思維導圖呀?原來是暑假作業有一項是要做《水滸傳》中的某一個人物思維導圖。小編今天就給大家簡單分享一下思維導圖,帶大家簡單梳理一下。
宋江,字公明,綽號呼保義、及時雨、孝義黑三郎,是施耐庵所作古典小說《水滸傳》中的角色,梁山一百零八將之一,排第一位。
宋江的性格可以概括為孝、義、忠、智四個方面。
傳送門:
https://shutu.cn/template/235e56343e892b100e7fcc01440c5a83.html
那么這樣簡單的人物思維導圖就分享到這了,想知道讀書筆記類的思維導圖怎么畫,可以去【幫助中心】查看文章資訊,更多有用的思維導圖盡在【樹圖思維導圖】
自己常常在寫代碼的時候,會突然搞不清變量用來干嘛的,也會被理不清的邏輯搞得自己異常煩躁,我甚至常常暗示自己我不適合寫代碼,思維總是那么不清晰。直到我發現了思維導圖的妙用。
最開始使用思維導圖的時候,我其實是用來記知識點的。然而某一刻就靈光一閃了,嘗試使用了思維導圖來記錄代碼變量和邏輯,最后居然就輕松的把以為要理很久的問題搞定了。為了驗證自己的想法,我又嘗試自己寫了一些小東西,對于我們這些初學者,肯定是選項卡和分頁什么的最常用了,因為里面有一些變量總是那么令人難以捉摸,這里我以分頁為例,向大家分享我是如何用腦圖完成分頁的。
這里省去使用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<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); }(); } }
當我沒有使用腦圖寫出來的代碼是這樣的 - -!,完全沒邏輯可言有木有
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); } }
在來一輪邏輯整理,當函數都寫好,變量都整明白了,就可以添加事件了,先來一輪思維整理。
于是按照這個思路,輕松完成事件添加,代碼如下
$('.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屬性來標識當前頁
總的來說,與我而言,通過思維導圖,是寫出思維嚴密,易于維護的代碼的有效途徑,看上去浪費了時間,其實增加了非常多的效率。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。