怎樣從前端小白到前端大神?

小云朵


這個問題等你往深的接觸並有自己一定理解後你可能跟我一樣會對整個前端有新的認知。

過硬的基礎

這個問題可能不止一遍又一遍的強調,熟練運用( html, css, js)這並不意味著基礎就紮實了。你是否會遇到這樣的問題: 吐槽自己的代碼為什麼沒有長進?吐槽新的框架出來了,可我連之前的版本還沒掌握?嘗試著翻閱源碼奈何根本讀不下去或者只是一知半解?因為這些問題都是發生在我的身上,我嘗試著去擴展自己的技術棧,然後小程序也會,web app也懂,服務端也略知一二,瀏覽器源碼...... 這些看似有著豐富經驗的回答,但實則暴露了一個問題,哪一個都是隻知皮毛。後來我沉下心來,重拾基礎,慢慢的我代碼可以做性能優化,源碼似乎也看進去了。然後我發現基礎往深的鑽研,我似乎發現新大陸一樣。接下來給大家分享一下我的學習經歷; 依舊是基礎,並逐步展開。

  • html

重新把 html 知識點並且重點是 html5 的新特性再過一遍,對常用的語義化標籤,新增的 canvas,本地存儲,xhr,dom,bom api進行總結歸納。然後嘗試著封裝一些 api,對原始 xhr 進行整理等等,對於這些知識不需要刻意去弄懂底層實現,只要能夠熟練掌握並可以根據業務做到良好的擴展就可以了。

另外,這個權威指南看不下去就算了,找其中的重難點知識進行梳理。

  • css

我不知道以後會不會出現 css4 ,但就目前而掌握 css3 已經相當不錯,在前端領域對樣式掌握到手到擒來絕非易事(並不是熟練應用各種類庫,插件)。我當初學習樣式始於興趣,終於瓶頸,不過目前依舊在學習嘛。學習樣式最快而且最容易上手的是拿現有模板去實現交互效果。舉例,以實現天貓靜態頁為依劇,不管你用什麼前端框架做輔助( jquery),一定要手寫,既鍛鍊了html,也能快速css,css3。如果遇到難點,查閱資料(科學上網),或者控制檯查其網頁實現,然後就往深層挖掘。

然後就是這本書,很有必要讀一讀。

  • JavaScript

前端的核心,從web端,到移動端,到客戶端,再到服務器,都可以看到js的身影。你抱怨自己編程能力沒有長進,抱怨源碼讀不懂都和不理解它有密切關係。js 的類型和語法、作用域和閉包、this 和對象原型鏈、異步和性能、es6 新特性( promise、proxy)。這些是從基礎到進階,每一塊都必須深入掌握,越深越好。

不管你是否造輪子,也或者你正忙於業務開發,真正阻礙你前進的便是這些大山,去掌握它們,鍛鍊自己的內功。

不管你之前讀的是犀牛書,紅寶書還是官方web文檔mdn,我現在只想推薦你認真讀一下這個系列。

前面說了一大堆關於基礎的問題,前端也不止這些但不管怎麼說基礎必須過關。

類庫及框架

有了基礎,相信你應該不懼目前的各類框架,mvc也好,mvp也罷,mvvm( vue, angular, react )也都ok。保持你的深度,然後擴展技術棧,這個時候你不用擔心翻看源碼的問題,相信你能快速掌握。

掌握node

以前端代表服務器開發node為主,你不會陌生,有了基礎什麼事件循環( even loop)、任務隊列、異步回調,掌握它們只是時間問題,當前這些是 js 引擎和瀏覽器機制相關的問題。然後就是至少熟悉一種後端語言,數據庫知識( sql, nosql)。

web api

掌握瀏覽器的渲染機制,緩存機制,安全問題,性能優化,網絡io,同源策略等等

算法和設計模式

最後補充一個就是它,提示自己的邏輯思維和編程能力,算法必不可少。掌握設計模式通樣可以便於我們對代碼的掌握,以及性能優化,重構等工作。

沒事了也刷刷題訓練一下思維能力。

寫在最後,說了這麼多還是想重點提及的是基礎。我也一直在學習,希望能夠同大家一起進步。


KKXIAO


階段一(HTML&CSS基礎)

HTML:html語義化,html常用標籤及其語義,html5新特性和新增常用標籤

CSS:css語法、選擇器,定位、浮動、盒子模型,css3新增選擇器及其屬性,變形、過濾、動畫

Photoshop:基本應用,把psd圖轉為靜態頁面

規範:樣式和結構分離,製作符合w3c標準的頁面,添加註釋,規範縮進

階段二(前端基本功)

javaScript基礎:基本語法,算法基礎,常用數據結構,編程規範,內置對象常用方法,對象的創建方式和this用法

javaScript API:BOM操作,DOM操作,特效實現、頁面佈局,事件處理、瀏覽器兼容處理

JavaScript高級:面向對象思想,對象,json、閉包、原型、作用域鏈,函數的調用方式及this指向,正則表達式、面向對象理論及實踐

jqurey:優勢,選擇器,動畫,鏈式編程及隱式迭代,插件使用和製作

模塊化:概念,演變過程,設計規範,RequireJS

階段三(移動WEB開發初級)

HTML5&CSS3:多媒體、音頻視頻播放,DOM擴展、自定義屬性、HTML5data,地理定位、文件讀取、元素拖拽、多媒體加強,應用緩存、歷史管理、web存儲,CSS3選擇器、新屬性、2d轉換、3d轉換、動畫

canvas:繪圖命令、非零環繞原則,繪製形狀、文字、圖片,平移、縮放、旋轉變換,ECharts數據報表

Git:命令行、基本使用、對比文件差異、還原、合併,回滾操作、遠程倉庫操作、GitHub創建遠程倉庫,github創建遠程私有倉庫、github和gitlab的區別,生成ssh key並添加到github和gitlab上

階段四(移動WEB開發高級)

bootstrap:概述,柵格系統,排版、表格、表單、按鈕,圖片、響應式工具,組件使用

移動web:移動端屏幕介紹、瀏覽器介紹、操作系統介紹,chrome模擬調試、真機調試、viewport、rem、主流適配方案,手勢封裝、mvc、常用指令、雙向綁定和單項綁定

angularjs:模塊、控制器、$watch、自定義指令、jqLite、過濾器,格式化過濾、數據過濾、服務$http、前端路由、http攔截器

css框架:通過bootstrap完成響應式開發,瞭解常見的移動端UI框架


程序猿來如此


入門

在我理解下的基礎知識,就是我們可以寫一些基本的樣式,並能對頁面的元素進行操作。舉例來說,就是我們用Spring和JSP寫了一個博客,然後我們可以用jQuery來對頁面進行一些簡單的操作,並可以調用一些API。因此,我們需要基本的HTML / CSS知識。只是要寫好CSS並不是一件簡單的事,這需要很多實戰經驗。隨後,我們還需要有JavaScript的經驗,要不怎麼做前端呢?

同時,我們還需要對DOM有一些基礎的瞭解,才能做一些基本的操作,如修改顏色等等。在這種情況下,最簡單的方案就是使用jQuery這樣的工具。不過,如果可以自己操作DOM是再好不過的了。

中級篇

中級篇就更有意思了,現在我們就需要對頁面進行更復雜的操作。Ajax和JSON這兩個技能是必須的,當我們要動態的改變頁面的元素時,我們就需要從遠程獲取最新的數據結果。並且我們也需要提交表單到服務器,RESTful就是必須要學會的技能。未來我們還需要Fetch API,ReactiveX這些技能。

除此我們還需要掌握好HTML的語義化,像DIV / CSS這也會必須會的技能,我們應該還會使用模板引擎和SCSS / SASS。而這個層面來說,我們開始使用Node.js來完成前端的構建等等的一系列動作,這時候必須學會使用命令行這類工具。並且,在這時候我們已經開始構建單頁面應用了。

高級篇

JavaScript是一門易上手的語言,也充滿了相當多的糟粕的用法。幾年前人們使用CoffeeScript編成成JavaScript來編寫更好的前端代碼,現在人們有了ES6、TypeScript和WebPack來做這些事。儘管現在瀏覽器支持不完善,但是他們是未來。同樣的還有某些CSS3的特性,其對於某些瀏覽器來說也是不支持的。而這些都是基於語言本來說的,要寫好代碼,我們還需要掌握面向對象編程、函數式編程、MVC / MVVM / MV*這些概念。作為一合格的工程師,我們還需要把握好安全性(如跨域),做好 授權(如HTTP Basic、JWT等等)。

工程化

這個標題好像是放錯了,這部分的內容主要都是自動構建的內容。首先,我們需要有基本的構建工具,無論你是使用gulp、grunt,還是隻使用npm,這都不重要。重要的是,你可以自動化的完成構建的工具,編譯、靜態代碼分析(JSLint、CSS Lint、TSLint)、對


分享到:


相關文章: