如何學(xué)習(xí)web開發(fā)
如何學(xué)習(xí)web開發(fā)
Web前端開發(fā)工程師是一個(gè)很新的職業(yè)，在國(guó)內(nèi)乃至國(guó)際上真正開始受到重視的時(shí)間不超過(guò)7年。下面學(xué)習(xí)啦小編為你整理了學(xué)習(xí)web開發(fā)方法，希望對(duì)你有幫助。
學(xué)習(xí)web開發(fā)方法
第一階段——HTML的學(xué)習(xí)
超文本標(biāo)記語(yǔ)言(HyperText Mark-up Language 簡(jiǎn)稱HTML)是一個(gè)網(wǎng)頁(yè)的骨架，無(wú)論是靜態(tài)網(wǎng)頁(yè)還是動(dòng)態(tài)網(wǎng)頁(yè)，最終返回到瀏覽器端的都是HTML代碼，瀏覽器將HTML代碼解釋渲染后呈現(xiàn)給用戶。因 此，我們必須掌握HTML的基本結(jié)構(gòu)和常用標(biāo)記及屬性。
第二個(gè)階段——CSS的學(xué)習(xí)
CSS是英文Cascading Style Sheets的縮寫，叫做層疊樣式表，是能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言其樣式是可以復(fù)用的，這樣就極大地提高了我們開發(fā)的速度，降低了維護(hù)的成本。
第三個(gè)階段——JavaScript的學(xué)習(xí)
JavaScript是一種在客戶端廣泛使用的腳步語(yǔ)言，在JavaScript當(dāng)中為我們提供了一些內(nèi)置函數(shù)、對(duì)象和DOM操作，借助這些內(nèi)容我們可以來(lái)實(shí)現(xiàn)一些客戶端的特效、驗(yàn)證、交互等
第四個(gè)階段——jQUery的學(xué)習(xí)
jQuery 是一個(gè)免費(fèi)、開源的輕量級(jí)的JavaScript庫(kù)，并且兼容各種瀏覽器(jQuery2.0及后續(xù)版本放棄了對(duì)IE6/7/8瀏覽器的支持)，同時(shí)現(xiàn)在有很多基于jQuery的插件可供選擇，這樣在我們實(shí)現(xiàn)一些豐富的動(dòng)態(tài)效果時(shí)更方便快捷，大大節(jié)省了我們開發(fā)的時(shí)間，提高了開發(fā)速度，這也充分體現(xiàn)了其 write less,do more的核心宗旨
Web開發(fā)需學(xué)習(xí)的15個(gè)技術(shù)
JavaScript
這是唯一一種所有瀏覽器都理解的編程語(yǔ)言，并且它是前端開發(fā)的支柱。JavaScript也被稱為ECMAScript，ES 5。在深入其他語(yǔ)言之前好好理解這門編程語(yǔ)言非常重要。
ES6
這是Javascript語(yǔ)言的擴(kuò)展，而且許多瀏覽器正在實(shí)現(xiàn)ES6。好處是哪怕是現(xiàn)在，你也可以開始編寫ES6代碼，因?yàn)槟憧梢允褂胻ranspiler(轉(zhuǎn)譯器)如Babel來(lái)轉(zhuǎn)換ES6代碼為ES5代碼。經(jīng)歷這些并了解新功能是一件好事。不過(guò)，沒(méi)有不要鉆研得太深因?yàn)樗鼈兒苋菀装l(fā)生變化。
Babel
這是最流行的ES6到ES5轉(zhuǎn)譯器之一。此外，它還被許多框架，如React所推薦。要想實(shí)時(shí)地將ES6轉(zhuǎn)換為ES5代碼，在https://babeljs.io/repl/有一個(gè)可用的REPL。
需要注意的是Babel不僅僅是ES6到ES5的轉(zhuǎn)譯器。它也是JSX到JavaScript的轉(zhuǎn)譯器。不知道什么是JSX?那么請(qǐng)看下面。
NodeJS
NodeJS是一個(gè)服務(wù)器端平臺(tái)，它允許你用JavaScript語(yǔ)言構(gòu)建后端。為什么我要提NodeJS呢?這是因?yàn)?，即使你?duì)后端開發(fā)不感興趣，但是許多前端工具依賴于NodeJS。至少要熟悉node和它的命令行工具。
NPM
NPM是node的軟件包管理器。就像pip之于Python，ruby gems之于Ruby，以及Maven之于Java。了解如何安裝/刪除/升級(jí)軟件包，尤其是package.json文件結(jié)構(gòu)。
Grunt或Gulp
這兩個(gè)是運(yùn)行在Node平臺(tái)上最為流行的任務(wù)運(yùn)行器。從技術(shù)上講，它們是針對(duì)npm的軟件包。它們?cè)试S你自動(dòng)化許多前端任務(wù)，如Lint源文件，串聯(lián)，縮減，部署以及更多。
Bower
這是用于前端庫(kù)本身的一個(gè)軟件包管理工具。想添加Jquery到你的應(yīng)用程序?和使用bower install jquery一樣容易。
上述工具用于基本的前端開發(fā)已經(jīng)足夠。不過(guò)下面我還要說(shuō)一說(shuō)兩個(gè)最流行的框架，即React和Angular。
ReactJs
ReactJs是構(gòu)建視圖最流行的前端庫(kù)。請(qǐng)注意，它不僅僅是MVC中的V，因此和框架如Angular沒(méi)有比較性。ReactJs是用ES6寫的，并且可以用Babel轉(zhuǎn)譯為ES5。它還使用也可以用Babel轉(zhuǎn)譯為JavaScript的JSX。
WebPack或Browserify
這兩個(gè)都是最流行的模塊打包機(jī)。它們可以獲取js源代碼，找出正確的依賴關(guān)系，并發(fā)出可以驅(qū)動(dòng)整個(gè)應(yīng)用程序的JavaScript文件。我更喜歡WebPack。點(diǎn)此查看關(guān)于WebPack。
Flux或Redux
React組件被布置在一個(gè)層次結(jié)構(gòu)中。大部分時(shí)間，數(shù)據(jù)模型遵循層次結(jié)構(gòu)。在這種情況下，F(xiàn)lux并不怎么有用。然而，有時(shí)候你的數(shù)據(jù)模型是不分層的。當(dāng)你的React組件開始接收外部道具，或你有少量的組件開始變得非常復(fù)雜的時(shí)候，那么你可能會(huì)想要試試Flux。
Immutable.js
Immutable.js提供了一套數(shù)據(jù)結(jié)構(gòu)，可以幫助解決在構(gòu)建React app時(shí)的某些性能問(wèn)題。這是一個(gè)偉大的庫(kù)，你可能會(huì)在你的app中大量使用它，但是當(dāng)你關(guān)注于性能影響時(shí)，它就完全沒(méi)用了。
Angular 2
Angular 2是JavaScript中最流行的MVC框架之一的下一個(gè)版本。它被完全重新設(shè)計(jì)過(guò)了，并且有一條陡峭的學(xué)習(xí)曲線。全面支持雙向數(shù)據(jù)綁定。在選擇Angular 2開發(fā)時(shí)要小心評(píng)估。
TypeScript
Angular 2推薦TypeScript作為編程語(yǔ)言的首選。我不是很熟悉TypeScript，但我認(rèn)為它增加了靜態(tài)類型到Javascript的動(dòng)態(tài)特性中。最后，我相信它只是一個(gè)轉(zhuǎn)譯器。
Service workers
實(shí)驗(yàn)性的API。它就像是在瀏覽器用于做各種工作的一個(gè)后臺(tái)線程。我想它也增加對(duì)離線瀏覽的支持。
Fetch API和Push API
請(qǐng)自行閱讀鏈接。因?yàn)榈侥壳盀橹刮易约簩?duì)此也是知之甚少。
新手學(xué)習(xí)web前端開發(fā)注意事項(xiàng)
1.勇于表現(xiàn)自己
不是說(shuō)要像銷售物品一樣夸自己，王婆賣瓜自賣自夸，而是要勇于推薦自己做的東西給別人看，讓別人給你提建議，吸收別人的技巧和方法，不斷的完善自己。
2.HTML規(guī)范
1.運(yùn)用軟Tab(2個(gè)空格)進(jìn)行縮進(jìn)
2.嵌套元素有必要縮進(jìn)一次
3.特色的值運(yùn)用雙引號(hào)(而不是單引號(hào))
4.在空元素中不用運(yùn)用反斜杠
5.運(yùn)用HTML5文檔聲明
3.css規(guī)范
2.在組選擇符中，每個(gè)選擇符占有單獨(dú)一行
3.在選擇符和大括號(hào)之間留出一個(gè)空格
4.選擇符大括號(hào)的完畢括號(hào)在單獨(dú)一行
4.做好自己的筆記
要做好自己的筆記，做筆記有很多方法，寫博客就挺好的，做筆記是為了非常好回想和了解自己學(xué)習(xí)到的東西。由于開發(fā)或?qū)W習(xí)進(jìn)程中會(huì)遇到很多的疑問(wèn)，有些是當(dāng)時(shí)不了解或者是找不出原因的，有些是很容易被忽視的，那么你記載下來(lái)，等到你下次遇到一樣或或類似的，那么你可以迅速得處理或者是搞懂一些以前不完全了解的知識(shí)。
猜你感興趣：