在前端學(xué)那些東西
和你的朋友談?wù)摻裉斓膶W(xué)習(xí)。對于編碼的學(xué)習(xí)，我覺得基礎(chǔ)知識和編程實(shí)踐最重要。開始學(xué)前端，是把基礎(chǔ)知識再學(xué)一遍，用的教材可以看學(xué)校發(fā)的教材。學(xué)完基礎(chǔ)，最重要的是練習(xí)。可以不斷的做一些模仿的網(wǎng)站，最后設(shè)計(jì)出自己的網(wǎng)站。
收集平時交流的信息:
技術(shù)學(xué)得再好，沒有開發(fā)經(jīng)驗(yàn)，和產(chǎn)品經(jīng)驗(yàn)，是很難寫出好的代碼。因?yàn)閷懘a本身是帶有目的性的，解決問題。如果在校，學(xué)習(xí)程序很迷茫，是因?yàn)椴恢缹W(xué)這個用來干嘛，自身沒有想做的東西，所以就很迷茫，不知道學(xué)什么，為什么要學(xué)。工作，要對一個產(chǎn)品了解到什么深度，代碼就越健壯。學(xué)習(xí)方式是有捷徑的避開所有看不懂學(xué)習(xí)資料，找看得懂的，拿起一本資料或者網(wǎng)上找的資料，細(xì)度幾分鐘，看不懂直接找找別的資料有可能能力未達(dá)到 所有看不懂 也有可能 資料本身描述 很難懂 更有可能 資料描述不適合自己閱讀習(xí)慣優(yōu)先 實(shí)現(xiàn)功能 再考慮優(yōu)化那是你自己堅(jiān)持的嗎？當(dāng)你想學(xué)習(xí)，拿起手機(jī)的時候，會不會發(fā)現(xiàn)自己已經(jīng)不自覺地偏離了正確的軌道？從娛樂新聞到頭版頭條，99條未讀新聞，你想的都是看一會兒，就一會兒。結(jié)果十分鐘，半小時，一小時不知不覺就溜走了。然后你開始煩躁，后悔，自責(zé)，但是第二天，你又掉進(jìn)了同一個坑。
你會不會也在想為什么我的自制力這么差，為什么有些事情會讓我欲罷不能？因?yàn)槟闵习a了，本來有一只實(shí)驗(yàn)老鼠會逃電，但是奇怪的現(xiàn)象發(fā)生了。老鼠沒有逃跑，而是一次次電擊自己。發(fā)現(xiàn)后發(fā)現(xiàn)，原來是實(shí)驗(yàn)中某個位置不小心弄錯了，正好刺激了快感中心的位置。所以，也許你像這只小白鼠一樣上癮了。
一個事實(shí)是，科技巨頭們在社交軟件視頻平臺和網(wǎng)絡(luò)游戲中精心布置了一個又一個上癮的鉤子，目的是為了攔截更多的用戶，從中獲取更多的時間和金錢。我們正在受到一種算法和娛樂的刺激，但很多人并不知道。那么我們?nèi)绾螖[脫上癮行為呢？
就是了解讓人沉迷網(wǎng)絡(luò)的鉤子:
可望而不可即的誘人目標(biāo)無法抵擋無法預(yù)知的積極反饋漸進(jìn)式的進(jìn)步和改善的感覺越來越困難的任務(wù)需要解決，但暫未解決的緊張感如，你發(fā)布了某消息，你會去暗中觀察，有沒有人給我點(diǎn)贊，寫文章，有沒有人給我點(diǎn)贊，有沒有人給我評論等等。（我很期待?。。。?p>其實(shí)你可以把這些鉤子放到學(xué)習(xí)上，把學(xué)習(xí)當(dāng)成興趣，升級打怪，不斷提升自己。你的選擇
你可以選擇自己的人生，你可以選擇一條簡單的路，沉迷手機(jī)，刷視頻，玩游戲，演話劇，毫不費(fèi)力的收獲很多快樂。你也可以選擇一條更艱難的路，選擇自律，延遲行走，成長。
你用右手做什么取決于你自己。
學(xué)習(xí)方法
只要掌握了正確的方法，學(xué)好前端，學(xué)好前端只是時間問題。大家都會這么說，但是正確的方法是什么呢？邊肖在此總結(jié)3點(diǎn)，僅供參考。
1.梳理知識體系框架。
學(xué)習(xí)前端，無論是入門級還是高級，都要有知識體系構(gòu)建的思路。即使是剛開始學(xué)，也要有這樣的意識。前面說過，由于前端知識點(diǎn)眾多且分散，如果不能建立自己對前端知識體系框架的理解，就很容易無所適從，迷失方向。
現(xiàn)在網(wǎng)上有很多關(guān)于前端知識體系的腦圖，但是對于初學(xué)者來說往往過于復(fù)雜。作為初學(xué)者，每個人都要做好自己的前端知識體系腦圖，先有一個基本框架，然后在學(xué)習(xí)的過程中逐步完善。
這樣，通過和別人的腦圖對比，你就很容易知道還有哪些知識需要補(bǔ)充和完善。
這里有一個簡單的模板。其實(shí)作為一個剛?cè)腴T的前端新人，有這么大的框架是完全夠用的。不用追求大而全，對學(xué)習(xí)的恐懼也會少很多。隨著學(xué)習(xí)的深入，這個腦圖會逐漸豐滿起來，最終形成自己的知識框架。
這看起來是不是清爽多了？
2.準(zhǔn)備和基礎(chǔ)研究
剛開始的時候，需要做一些基礎(chǔ)的工作，比如選擇一個自己喜歡的編輯器，比如如何高效的使用搜索引擎，比如git，比markdon的語法要好。這些東西可以大大提高你的學(xué)習(xí)效率或者編程幸福感。俗話說，磨刀不誤砍柴工，你也可以把這些東西記錄在你的腦圖里。
然后就可以開始學(xué)習(xí)基礎(chǔ)了。HTML，CSS和Javascript真的很重要，真的很重要，真的很重要。一開始，你根本不用擔(dān)心那些花哨的框架。你必須打好基礎(chǔ)。不管框架怎么更新迭代，最基礎(chǔ)的還是這三樣?xùn)|西。只要能掌握基礎(chǔ)，就等于拿到了打開前端世界的鑰匙。
無論你的前端學(xué)習(xí)到了什么階段，你對基礎(chǔ)知識的好奇心一定不能斷。里面的微小知識點(diǎn)太多了，每個spec都又臭又長。即使你已經(jīng)工作了兩三年，這里面也一定有你不知道的東西。好了，這時候你的知識系統(tǒng)腦圖應(yīng)該差不多是這樣的:
我們到這里的時候，其實(shí)還有一個坑。到了這里，很多人一頭扎進(jìn)去看具體內(nèi)容，比如各種標(biāo)簽的屬性用法，選擇器。這是典型的不重視知識體系框架建設(shè)而導(dǎo)致的盲目實(shí)踐。
有什么推薦做法？其實(shí)很簡單，就是把這些知識點(diǎn)的層次細(xì)化，把每個知識點(diǎn)的脈絡(luò)梳理清楚，先從宏觀上對這些知識的體系和框架有一個清晰的認(rèn)識。以HTML為例:
這樣就可以把知識點(diǎn)的層次關(guān)系抽象清楚，把每個小知識點(diǎn)進(jìn)行合理的分類，讓前端知識中那些復(fù)雜的知識點(diǎn)形成一個體系。
現(xiàn)在你可以進(jìn)去添加一些細(xì)節(jié)。你可以在你的腦圖上用不同的顏色標(biāo)出不同的優(yōu)先順序，這樣你就可以把你的學(xué)習(xí)按優(yōu)先順序排好，以后再復(fù)習(xí)。
3.運(yùn)用你所學(xué)的知識。
每次學(xué)了一些小知識點(diǎn)，都要想辦法去運(yùn)用，搞清楚這些知識點(diǎn)用在哪些場景。當(dāng)你把基礎(chǔ)知識學(xué)到一定程度，也可以反其道而行之。先提前想好要實(shí)現(xiàn)的場景和功能，再想好這些場景下用什么知識。如果你遇到了你永遠(yuǎn)也不能理解的問題和你沒學(xué)過的知識，去你的腦圖搞清楚它的位置，寫出來。包括在隨訪研究計(jì)劃中。
不要一直看著學(xué)，但不要用在特定的場合。你要養(yǎng)成用所學(xué)做點(diǎn)什么的習(xí)慣，解決一些問題。不斷的做事情，解決問題，不斷的給自己正向激勵，不斷的完善自己的知識體系，一定要給自己成就感。
學(xué)習(xí)筆記
一. HTML
H5新特性瀏覽器渲染原理解析iframe有那些缺點(diǎn)？Label的作用是什么？是怎么用的？HTML5的form如何關(guān)閉自動完成功能？如何實(shí)現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信? (阿里)頁面可見性（Page Visibility API） 可以有哪些用途？實(shí)現(xiàn)不使用 border 畫出1px高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果。title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？你做的頁面在哪些瀏覽器測試過？這些瀏覽器的內(nèi)核分別是什么?每個HTML文件里開頭都有個很重要的東西，Doctype，知道這是干什么的嗎？div css的布局較table布局有什么優(yōu)點(diǎn)？img的alt與title有何異同？ strong與em的異同？簡述一下src與href的區(qū)別知道的網(wǎng)頁制作會用到的圖片格式有哪些？第二，CSS
box-sizing水平垂直居中的方法實(shí)現(xiàn)左邊定寬右邊自適應(yīng)效果三列布局（中間固定兩邊自適應(yīng)寬度）BFC（Block Formatting Contexts）塊級格式化上下文清除浮動元素的方法和各自的優(yōu)缺點(diǎn)css實(shí)現(xiàn)自適應(yīng)正方形position的值如何在頁面上實(shí)現(xiàn)一個圓形的可點(diǎn)擊區(qū)域？介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本IE的盒子模型有什么不同的？CSS選擇符有哪些？哪些屬性可以繼承？CSS優(yōu)先級算法如何計(jì)算？CSS3新增偽類有那些？display有哪些值？說明他們的作用。CSS3有哪些新特性？三。Java Script語言
js基礎(chǔ)DOM相關(guān)BOM相關(guān)JS高級閉包原型與原型鏈作用域與作用域鏈apply, call和bind有什么區(qū)別?談?wù)剬his的理解那些操作會造成內(nèi)存泄漏？深入貫徹閉包思想，全面理解JS閉包形成過程下面這個ul，如何點(diǎn)擊每一列的時候alert其index?（閉包）js繼承方式及其優(yōu)缺點(diǎn)上下文環(huán)境對象四。前端框架
1.jQuery
jQuery.fn的init方法返回的this指的是什么對象？為什么要返回this？jquery中如何將數(shù)組轉(zhuǎn)化為json字符串，然后再轉(zhuǎn)化回來？jQuery 的屬性拷貝(extend)的實(shí)現(xiàn)原理是什么，如何實(shí)現(xiàn)深拷貝？jquery.extend 與 jquery.fn.extend的區(qū)別？針對 jQuery 的優(yōu)化方法？JQuery一個對象可以同時綁定多個事件，這是如何實(shí)現(xiàn)的？bind(), live(), delegate()的區(qū)別jQuery框架中$.ajax()的常用參數(shù)有哪些？寫一個post請求并帶有發(fā)送數(shù)據(jù)和返回?cái)?shù)據(jù)的樣例jQuery一個對象可以同時綁定多個事件，這是如何實(shí)現(xiàn)的？jquery 中如何將數(shù)組轉(zhuǎn)化為json字符串，然后再轉(zhuǎn)化回來？Jquery與jQuery UI有啥區(qū)別？jQuery和Zepto的區(qū)別？各自的使用場景？Zepto的點(diǎn)透問題如何解決？2.angular3.react4.vue