摘要:什么是前端工程師總而言之就是運用等技術,在工作中配合設計師實現用戶界面,和后端工程師進行數據對接,完成應用開發的職位。
什么是前端工程師?總而言之,就是運用 HTML、CSS、JavaScript 等 Web 技術,在工作中配合UI設計師實現用戶界面,和后端工程師進行數據對接,完成 Web 應用開發的職位。Tips:個人博客排版、UI更佳;地址:https://haonancx.github.io/ 先來個下馬威
學習一樣東西,首先得先去了解它的定義,和大概的框架結構,梳理好思路,然后再一個蘿卜一個坑,循序漸進的去豐富自己的知識體系。有人說,前端東西多而雜,你今天剛弄明白一框架,明天又出一新框架,其實大可不必去理這些花里胡哨的框架,畢竟在真正的工作環境中,你是一名業務驅動型的程序員。
好了,廢話不多說,先上菜
是不是感覺前端東西不就這幾樣嗎??別急,這里面看似簡單,每一門學精了,沒個三年五載的,你都不好意思說你會。
萬事開頭難,一步一步來,如今充斥著各大前端框架理念。"MVVM"、"MVC"、"MV*"、"模塊化"、"高性能"等等,您可別被這些迷住了眼,不都得先打基礎,HTML、CSS、JavaScript這三門語言就夠你喝一壺的(你再牛逼的框架不也是用我們寫的嗎),即使你已經工作三五年了,這里面有零碎的知識都有你不知道的;所以不管你現在已經在哪個階段,學習基礎知識的勁頭可不能減。
這時候你的知識體系就是這樣了
切勿紙上談兵該看的都看了,該學的都學了,不能光說不練,得用起來.
這個方向算是一個 WEB 前端最基本的選擇了,在國外,很多老外都能夠把自己的專業做到極致,能一輩子就在一個專業領域不斷學習和積累。主要在于內因和外因 兩方面,內因是老外通常思想比較簡單直接,容易一直專注于一個領域;外因是國外的環境很好,能夠良好的支撐這樣的職業發展道路。反觀國內,從內因來講,WEB前端技術人員還是蠻浮躁的,通常會因為 WEB 前端知識的更新速度太快而覺得學習起來辛苦,最終轉向后臺或其他道路。
從外因來講,WEB 前端人員 沒有獲得公平的待遇,可能從 HTML 頁面制作就開始并沿襲下來的,從來WEB前端人員都比后端人員低一等,貌似前端就是“淺顯”的代名詞、后端就是“深 奧”的代名詞,這也直接造就了前端人員的收入無法和后端人員媲美,同時直接影響到前端人才市場的活躍程度。另一方面,前端的技術入門較容易,造成另一個極 端情況:人員泛濫、人才稀缺。我想對所有的 WEB 前端工程師說:面包總會有的,要耐得住寂寞!我個人比較推薦這個職業發展方向,因為,在這個方向下,只要 足夠耐心、厚積薄發,成功的概率是非常高的。同時,這是一條最單純的路,我們更多的是花費精力在技術的鉆研上,而不是辦公室政治等其它瑣事。
多寫,多編,要做一名"網紅"1.我覺得博客當然是用來寫總結性的東西,它能幫你梳理下整個過程的要注意的地方,寫寫你在工作中遇到的問題,用來記錄和回顧。
2.至于怎么梳理框架,還是看你博客定位了,如果偏向科普類型的,自己看著爽也要別人看的爽,當然是寫的面面俱到然后加配圖。如果是類似自己筆記類型的,可以稍微簡單的寫,提示性的。
可以考慮(github pages 或者 gitcafe pages)+(靜態博客比如 hexo, octopress)+(markdown 寫作)。符合程序員氣質。
最主要是數據都歸自己管,還可以本地隨時查看,對外是博客,對內跟建立自己一個知識庫一樣。
寫博客貴在堅持,這玩意也是見效很慢的東西,你寫多了你會發現你不僅是在技術方面的進步,寫作,寫文檔,表達也會有提高的。
而且發現評論里面有能幫助到別人,自己也會有莫名的成就感。
HTML5、CSS3 真的沒JS重要?現在大多數的Web開發者,大都是對基礎簡單掃一遍,專門研究JS框架去了,什么 Vue、Angular、React 等等,倒不是反對這種做法,雖然這樣做,看起來在現實應用場景和暫時找個不錯的工作看起來有利一些,但是卻大大的限制了自身長期的職業發展;而在前期,我是更加的去注重基礎,愿意花更多的時間去了解原生的東西,也不是說我過于保守,只不過是"我在沒燒好一塊塊磚頭的情況下,我可不敢去蓋大房子";例如,Saas 效率再高,不也得轉換成 CSS 讓瀏覽器去解析,JSX看起來再邪乎,在瀏覽器大爺面前不也得裝JS;當然,我主要去了解各種框架的設計思想,和它實現功能的方式;具體工作中用到時,我會深入研究。
同樣也有人說了,玩 CSS 有什么難度,不就不布布局,改改風格嗎。是的,但是,想玩好了,可不容易,個人推薦張鑫旭的博客張鑫旭,這是一位長期研究CSS的大牛;相信前端工程師聽到他,應該不會陌生。
谷歌瀏覽器效果圖
神奇吧,這就是 CSS3 吸引人的地方,喜歡各種動畫交互的人,肯定會對CSS3的新特性愛不釋手;也不是說JS做不到,只不過是 JS 相對 CSS3 要說,要進行重繪,這對瀏覽器的性能來說,會大打折扣,所以"CSS能實現的,盡量別用 JS 去實現"。
附上代碼
{% highlight ruby %}
{% endhighlight %}
{% highlight ruby %}
html,body{height:100%}body{background:radial-gradient(ellipse at center,#34679a 0,#214163 47%,#0d1926 100%)}body>div{position:absolute;top:12%;left:50%;margin-left:-103px;width:200px;height:200px;border-radius:50%;border:1px solid #fff;-webkit-transform-style:preserve-3d;-webkit-transform:rotateX(80deg) rotateY(20deg);transform-style:preserve-3d;transform:rotateX(80deg) rotateY(20deg)}body>div:first-of-type:after{content:"";position:absolute;height:40px;width:40px;background:#fff;border-radius:50%;-webkit-transform:rotateX(-80deg) rotateY(0);transform:rotateX(-80deg) rotateY(0);box-shadow:0 0 25px #fff;-webkit-animation:nucleus_ 2s infinite linear;animation:nucleus_ 2s infinite linear;left:50%;top:50%;margin-top:-20px;margin-left:-20px}body>div:nth-of-type(2){-webkit-transform:rotateX(-80deg) rotateY(20deg);transform:rotateX(-80deg) rotateY(20deg)}body>div:nth-of-type(3){-webkit-transform:rotateX(-70deg) rotateY(60deg);transform:rotateX(-70deg) rotateY(60deg)}body>div:nth-of-type(4){-webkit-transform:rotateX(70deg) rotateY(60deg);transform:rotateX(70deg) rotateY(60deg)}body>div>div{width:200px;height:200px;position:relative;-webkit-transform-style:preserve-3d;-webkit-animation:trail_ 2s infinite linear;transform-style:preserve-3d;animation:trail_ 2s infinite linear}body>div>div:after{content:"";position:absolute;top:-5px;box-shadow:0 0 12px #fff;left:50%;margin-left:-5px;width:5px;height:5px;border-radius:50%;background-color:#fff;-webkit-animation:particle_ 2s infinite linear;animation:particle_ 2s infinite linear}body>div:nth-of-type(2)>div,body>div:nth-of-type(2)>div:after{-webkit-animation-delay:-.5s;animation-delay:-.5s}body>div:nth-of-type(3)>div,body>div:nth-of-type(3)>div:after{-webkit-animation-delay:-1s;animation-delay:-1s}body>div:nth-of-type(4)>div,body>div:nth-of-type(4)>div:after{-webkit-animation-delay:-1.5s;animation-delay:-1.5s}@-webkit-keyframes trail_{from{-webkit-transform:rotateZ(0deg)}to{-webkit-transform:rotateZ(360deg)}}@keyframes trail_{from{transform:rotateZ(0deg)}to{transform:rotateZ(360deg)}}@-webkit-keyframes particle_{from{-webkit-transform:rotateX(90deg) rotateY(0deg);transform:rotateX(90deg) rotateY(0deg)}to{-webkit-transform:rotateX(90deg) rotateY(-360deg);transform:rotateX(90deg) rotateY(-360deg)}}@keyframes particle_{from{transform:rotateX(90deg) rotateY(0deg)}to{transform:rotateX(90deg) rotateY(-360deg)}}@keyframes nucleus_{0%{box-shadow:0 0 0 transparent}50%{box-shadow:0 0 25px #fff}100%{box-shadow:0 0 0 transparent}}@-webkit-keyframes nucleus_{0%{box-shadow:0 0 0 transparent}50%{box-shadow:0 0 25px #fff}100%{box-shadow:0 0 0 transparent}}
{% endhighlight %}
框架滿世界飛?哪個才是最好?1.初級階段:首先基本功要打好,JavaScript 基本功包括閉包,原型,繼承,變量的作用域等等。
2.初級到中級階段:這時候可以學習使用 jQuery,可以使用 jQuery 或者原生的 JavaScript 去實現一些常用的插件,比如輪播,比如選項卡,比如模態框等等。如果自己還想深入一下的話,可以去看看 jQuery 的源碼。多找一些靜態的頁面來做一下。
高級階段:學習使用一些框架,比如 Angular,React,Vue,ember,backbone 等等,但是記住,框架這個東西只是幫你解決了一些問題,給你的項目帶來了一些便利;我們要做的是學習這些框架的思想,如果有時間可以深入的研究一下一兩個框架的源碼,你會有不一樣的發現。還有,框架是一群人一個填坑的成果,不要過度依賴框架。
個人推薦JS路線:JS(原生最重要)- Angular - ES2015 - React - ES2016 - Vue。
前端真的夠嗎?學習和研究一個領域一樣, 需要了解這個領域都在解決些什么問題,了解這個領域的發展和歷史,有哪些了不起的任務和貢獻者。 該領域內對特定問題的普遍解決方案。
嘗試關注下面這樣問題,如果可以提出自己的決絕方案
前端性能優化
前端組件化,模塊化
前端測試
前端開發流程
細化的前端問題,樣式,加載,圖片處理
前端兼容
異步
當到了這一步我我覺得學習的方法應該是,嘗試解決一個別人沒有解決的問題或者做得不夠好的問題,通過自己的探索和研究,提出自己的方案。這一過程中會學到很多很多的東西,可能不僅僅是前端,這些內容可能包括UX,設計,服務端設計等等。 可能我現在的狀態也是處在這里,為了解決一個特定的問題,深入學習這個特定領域,找出解決方案。
開發調試
git,svn版本管理
開發工具
前端工具: 性能測試工具,調試工具,代理工具,css工具
grunt, gulp
BDD
總結,還是那句話,再牛再炫的技術和業務扯不上關系都是白搭!文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91205.html
摘要:什么是前端工程師總而言之就是運用等技術,在工作中配合設計師實現用戶界面,和后端工程師進行數據對接,完成應用開發的職位。 什么是前端工程師?總而言之,就是運用 HTML、CSS、JavaScript 等 Web 技術,在工作中配合UI設計師實現用戶界面,和后端工程師進行數據對接,完成 Web 應用開發的職位。Tips:個人博客排版、UI更佳;地址:https://haonancx.git...
摘要:什么是前端工程師總而言之就是運用等技術,在工作中配合設計師實現用戶界面,和后端工程師進行數據對接,完成應用開發的職位。 什么是前端工程師?總而言之,就是運用 HTML、CSS、JavaScript 等 Web 技術,在工作中配合UI設計師實現用戶界面,和后端工程師進行數據對接,完成 Web 應用開發的職位。Tips:個人博客排版、UI更佳;地址:https://haonancx.git...
摘要:問題回答者黃軼,目前就職于公司擔任前端架構師,曾就職于滴滴和百度,畢業于北京科技大學。最后附上鏈接問題我目前是一名后端工程師,工作快五年了。 showImg(https://segmentfault.com/img/bVbuaiP?w=1240&h=620); 問題回答者:黃軼,目前就職于 Zoom 公司擔任前端架構師,曾就職于滴滴和百度,畢業于北京科技大學。 1. 前端開發 問題 大...
某熊的技術之路指北 ? 當我們站在技術之路的原點,未來可能充滿了迷茫,也存在著很多不同的可能;我們可能成為 Web/(大)前端/終端工程師、服務端架構工程師、測試/運維/安全工程師等質量保障、可用性保障相關的工程師、大數據/云計算/虛擬化工程師、算法工程師、產品經理等等某個或者某幾個角色。某熊的技術之路系列文章/書籍/視頻/代碼即是筆者蹣跚行進于這條路上的點滴印記,包含了筆者作為程序員的技術視野、...
閱讀 3717·2021-10-11 10:59
閱讀 1300·2019-08-30 15:44
閱讀 3478·2019-08-29 16:39
閱讀 2887·2019-08-29 16:29
閱讀 1800·2019-08-29 15:24
閱讀 807·2019-08-29 15:05
閱讀 1264·2019-08-29 12:34
閱讀 2302·2019-08-29 12:19