一個大四前端實習生的2018年總結
這是2018年的最後一個小時,此刻我正在改著我的畢業設計開題報告,坐在電腦前忽然有點感慨,於是打算做個年終總結,順便把今年所學所想做個梳理和回顧。
年初
回想今年, 似乎走了很多路, 嘗試了很多東西, 在年初二月份左右選擇了考研, 嘗試著想去讀華南師範大學的軟體工程, 但是在很多原因的影響下,在七月初放棄了這個目標, 終是選擇走上了前端的道路。 雖然似乎前半年的努力似乎是化作烏有, 但是那段時間的專注可能是我大學三年以來絕無僅有, 所以似乎也不算是浪費。
年中
在七月底決定放棄考研後找到了一份js軟體工程師的工作, 前端技術棧是基於VUE的nuxt.js, 後端是Egg.js。 兩個月的工作時間內負責的都是前端的內容,包括頁面,debugger和舊專案的維護。 但是因為公司需要經常出差並且離家遠, 每天早上需要六點鐘起床才能保證不遲到, 並且還要擠那條四五趟才能擠得上去的廣州地鐵三號線, 於是乎在九月底的時候面試了現在的公司並順利收到了offer。
年底
目前在現在的公司中寫react, 感覺負責的內容是我感興趣和喜歡的, 環境和大佬都很nice。 說實話今年折騰得挺厲害的, 在決定放棄考研之後,重新拾起程式碼, 去找了幾份VUE的專案去模仿和學習, 買了阿里雲的學生伺服器, 搭建了自己的部落格 寫了一些基礎演算法的JS視覺化的實現, 寫了一個網頁版的個人簡歷,學會了挺多東西。 現在回想起剛開始面試的時候, 沒日沒夜地擼文件, 通常是下午收到了面試通知, 熬夜地去讀文件,看專案,刷面試題, 第二天去面試完回到家大概是下午四五點左右, 整個人一會去直接灘在床上一覺睡到第二天的一兩點, 那段時間感覺自己真的像是快要死了一樣。 這段時間一共面試了大概六七家公司 (如果不包括3家培訓機構和2家外包公司, 培訓機構的電話其實很好識別, 面試的時候如果你能帶著面試官的節奏走, 並且他們聊到和涉及的技術都是大概是十年前的技術的話, 例如還在談SSH、jsp之類的話十有八九都是培訓機構了), 收到了四個offer,也算是不枉努力。
下面是今年學習和複習到的技術內容以及碰到的一些坑的總結
基礎內容
Html部分
1.標籤基礎 2.HTML5的新特性 3.HTML事件 4.Canvas (不太熟悉) 5.MathML 6.Html表單 7.Html的語義化 8.Web SQL 資料庫,使用 SQL 操作客戶端資料庫的 APIs。 9.Web Workers 10.meta 標籤 11.Get和Post的差別 12.HTTP 狀態訊息 13.Html中塊註釋
CSS部分
1.CSS基礎內容 2.CSS 2D 3D 3.CSS 動畫 4.純CSS實現分頁 5.CSS常用動態效果 6.佈局 - Flex佈局 - 柵格佈局 - 使用BFC隱藏屬性 - float + margin - absolute + margin - 聖盃佈局 - 雙飛翼佈局 7.CSS媒體查詢 8.CSS 絕對定位和相對定位的深入瞭解 9.transform 10.字型圖示的使用 11.8種清除浮動的方式(手動滑稽,實際上只有觸發BFC和非觸發BFC兩種,不過有個新的方法) 12.各種垂直居中和水平居中的方式 ,包括 - 文字圖片垂直居中 - 塊級元素水平居中 - 居中, 不確定尺寸, 不相容 IE6 - 居中, 確定尺寸, 相容 IE6 - 居中, CSS3 平移方式, 相容性不行 - 居中, Flex 方式, 相容性不行 - 定寬居中頁面佈局 13.響應式佈局的實現方式 14.偽類和偽元素 15.瀏覽器如何解析CSS 16.瀏覽器渲染html,css,js過程 17.IE相容性問題總結 18.less基礎 19.less的混入問題 20.less如何優雅地封裝 21.styles
JavaScript部分
1. javascript基礎內容 2. js如何去實現封裝和繼承 3. js處理事件機制 4. js事件委託 5. 如何去優雅地操縱dom 6. cookie、sessionStorage、globalStorage、localStorage 7. 表單處理 8. 正則 9. 閉包的深入理解 10. this的深入理解 11. 回撥函式的理解以及如何去處理回撥地獄問題 12. Json 13. Ajax 14. Xml 15. Xpath 16. ES6的新特性,用得比較多的是下面這些(好像基本都用到了= =) - let和const - 變數的解構賦值 - 字串擴充套件 - 數值的擴充套件 - 函式的擴充套件(巨喜歡class和箭頭函式,終於讓我有種在寫java的感覺了) - 陣列的擴充套件 - 物件的擴充套件及其新增方法 - Set和Map - Promise物件 - Generator和async - Class及其繼承 17. 移動端js實現拖拽效果 18. JavaScript程式碼規範 19. 淺拷貝和深拷貝的區別 20. 原型鏈的深入理解 21. Js的柯里化 22. 如何實現無限級選單 23. JavaScript效能優化 24. Js中的document和windows物件 25. 本地快取和瀏覽器快取的區別 26. 常用js方法總結 27. Json陣列物件中鍵值重複判斷的方法 28. SetTimeout和setInterval 29. 跨域獲取json資料 30. 除錯與異常處理 31. Js非同步解決方案
Node.js部分
1.使用Egg實現RESTful API 2.RESTful API 3.Socket 4.Squelize 5.PostgreSQL 6.Docker 7.Swagger 8.Proxy 9.Process物件
前端優化部分
1. webpack 2. CDN 3. GoPng雪碧圖 4. 避免直接操縱dom 5. 不使用IE的Filter 6. 樣式表放頭部,js放底部 7. Js 方面 8. 引入資源的域名不要包含cookie 9. 減少cookie的大小 10. 避免空src的img標籤 11. 合理設計事件監聽器 12. 優化css精靈 13. 不要在html中拉伸圖片 14. 新增Expires或者Cache-Control響應頭 15. 按需載入和延遲載入 16. 避免重定向 17. 減少DNS查詢 18. 減少HTTP請求
框架部分
前端
1.jQuery 2.VUE.js 3.NUXT.js 4.React 5.Dva.js 6.Umi.js
開箱即用的UI框架
1.bootstrap 2.MUI 3.amazeUI 4.tree.js 5.Quasar.js 6.Element 7.Swiper 8.Ant design 9.Ant design Mobile 10.Kendo UI 11.Animate.css 12.WOW.js 13.AUI
後端框架
1.egg.js 2.koa
一些常用或者用過的外掛庫
1. axios (一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。) 2. babel-polyfill (一個將ES6語法轉換為ES5的庫) 3. classnames.js (解決可引入多類名問題的庫) 4. echarts (一個用於資料視覺化的圖表庫) 5. Mock.js (Mock系統是一個簡單、高效、可以快速生成模擬資料的mock服務) 6. redux-connect (非同步路由跳轉) 7. react-virtual-list (長列表渲染) 8. Ramda.js ( JavaScript 函數語言程式設計庫。) 9. immer (以帶副作用的方式修改資料並返回新引用的資料,不會影響原始資料) 10. react-content-loader (內容佔位的loading) 11. PropTypes (用於型別檢測的庫) 12. vue全家桶 13. react全家桶 14. js-cookie.js 15. js-base64.js 16. vue-countup-v2.js 17. XLSX.js 18. Sequelize.js 19. Electron.js 20. Lodash.js 21. Animate.css 22. Anime.js 23. Hover.css 24. wow.js 25. Velocity.js 26. move.js 27. iscroll 28. Swiper 29. layer 30. Bootbox.js 31. ustbhuangyi/picke 32. Bootstrap Colorpicker 2 33. Moment.js 34. timeago.js 35. validator.js 36. Editor.md 37. UEditor 38. Masonry 39. barcode 40. jquery.qrcode.js 41. vue-i18n 42. store.js 43. ustbhuangyi/storage 44. jsonp 45. Zooming 46. FastClick 47. better-scroll 48. history.js 49. Numeral.js 50. react-native-scrolltotop 51. react-router-cache-route
碰過的一些坑
1.margin-top和margin-bottom失效問題 2.display:inline-block;後margin失效問題 3.元素坍塌問題 4.塊級元素與行內元素之間轉換 5.外邊距塌陷問題 6.React的傳值問題 7.跨域獲取資料失敗問題 8.Iframe跨域通訊問題 9.React 和react-router ,實現回退的時候,如何使頁面回退到以前的狀態 10.多行文字框拖動問題解決 11.List-style-type屬性失效 12.Rem和em問題 13.react如何記錄頁面前的狀態,在不用redux的情況下 14.快取導致的問題 15.React如何去渲染HTML程式碼 16.如何解決跨域問題 17.浮點數的問題 18.react實現搜尋結果高亮顯示 19.js的dom獲取曾祖父節點或者玄孫節點的辦法
很多以前碰過的坑都忘了,或者已經不是坑的坑就省略了…
下面從幾個方面總結一下今年個人的情況
學習
雖然放棄了考研是一大遺憾,
但是今年在學習方面起碼不會讓自己覺得羞愧,
也算無愧於自己了。
事業
雖然還是一個實習生,
但是從大二以來就在一直問自己,
我是不是真的十分熱愛技術,真的喜歡擼程式碼,
是否真的把這件事作為我往後的職業規劃,
哪怕是現在我也不太敢肯定,
但是起碼我在擼程式碼的時候並不會反感
也不會抗拒去學習新的技術
在解決一個難題之後也會感到十分開心
會因為自己做了一點好玩和有趣的東西而感到沾沾自喜,
這樣就夠了
哪怕前路未定,
但是這樣走下去就夠了。
身體
自從高中以來,我的身體素質是一直在下降的,
這是可以明顯並且可以直接感受到的事情,
體重也在不斷地上漲,
似乎有一發不可收拾的趨勢,
今年的體重在增減中不斷地重複,
鍛鍊也在斷斷續續地進行,
但是總的來說是肯定不夠的,
希望明年能夠真正地,系統地鍛鍊自己的身體。
畢竟一切東西都建立在身體健康的前提下。
愛好
唱歌仍然是為數不多的愛好之一
美食和烹飪也是不可放棄的東西
很高興今年自己的唱歌水平有所提升(雖然還不是很好聽就是了,哈哈哈)
有時間可以去精心烹飪一樣事物,
然後慢慢地品嚐,
或者去尋遍大街小巷的美食,
也是為數不多的樂趣了吧
今年閱讀的有趣書籍並不多,
很多打算看的書並沒有去看,
這算是今年的遺憾了吧
愛情
終於有一天,性不再是羞恥和禁忌,
而是像吃飯喝水一樣簡單,
愛卻成為了勇敢者的遊戲。
大多數人都相信愛情的存在
但是他們並不相信這種東西會落到自己頭上
這個世界上即使是自己也很難明白自己
又怎麼能奢求有另外一個人互相理解?
至少目前為止這件事情並不在我的規劃範圍之內
我沒有嘗試過那種一顆送的巧克力可以保留好幾年的感覺
除了年少不更事時的小心翼翼的心動,
也少有為誰心動的感覺,
但是我不想因為這種事情變得如此卑微、敏感和小心翼翼的樣子
那樣的我不應該是我
見識過大多數的人,
哪怕是對陌生人也不是這般
卻能理所當然地對身邊人施以此般
很多人似乎連做人都還不會
就已經急著去談戀愛和結婚生子
只希望我不是其中一個。
勢均力敵或許才是感情最好的狀態。
明年計劃和目標
1.鍛鍊身體 2.看各類書籍,至少包括10本計算機領域經典書籍和10本其他領域的書籍 3.每週至少能刷2題LeetCode 4.學會注意形象,學會衣服搭配 5.有時間能去到處走走,或者來一場長途騎行 6.學會一樣樂器 7.研究各種美食做法 8.去找到幾家不錯的小店嘗試它的事物 9.注意作息,避免熬夜 10.填幾首歌的詞