前端開發(fā)學(xué)習(xí)需要掌握什么技術(shù)

很多人并不了解前端開發(fā)到底是什么，即使是那些從事相關(guān)工作的業(yè)內(nèi)人員也不是很清楚，這點(diǎn)在我工作的幾年中深有體會(huì)，甚至有些時(shí)候整個(gè)項(xiàng)目下來本來應(yīng)該幾個(gè)人員合作完成的內(nèi)容完全由一個(gè)人來實(shí)現(xiàn)，當(dāng)然這樣的結(jié)果常常并不理想，所以如果你打算學(xué)習(xí)前端開發(fā)工作事先了解下前端開發(fā)的相關(guān)內(nèi)容，比如工作范圍、存在問題、工作標(biāo)準(zhǔn)、工作要求等等。

1.被誤解的前端開發(fā)

什么是前端開發(fā)呢？大多數(shù)人的回答可能是不就是設(shè)計(jì)網(wǎng)頁的美工嘛，也有些人認(rèn)為那些會(huì)使用 Dreamware這些編輯器完成一些網(wǎng)頁功能就是前端開發(fā)了……因?yàn)榇蠹覍η岸碎_發(fā)的認(rèn)識不同所以對于前端開發(fā)工作內(nèi)容也有很大不同，比如很多人覺的美工就是前端，他們認(rèn)為美工應(yīng)該完成所有的前端工作，但是真實(shí)的美工大多可能是從一些平面設(shè)計(jì)專業(yè)轉(zhuǎn)行過來的，他們一點(diǎn)也不了解軟件到底是什么，指望這些人去完成符合后端期待的前端實(shí)現(xiàn)，根本不可能。那么到底是什么原因造成大家對前端開發(fā)工作的誤解呢？

造成前端開發(fā)工作誤解很大原因和Web的發(fā)展有密切的關(guān)系。在最初的Web發(fā)展階段，網(wǎng)頁主要以展示為主，內(nèi)容基本上都是靜態(tài)的，從事相關(guān)工作的人員要求很低，只要可以**頁面的整齊美觀就好。但是自2005年Web進(jìn)入2.0時(shí)代后，網(wǎng)頁的功能 越來越豐富，內(nèi)容不再只是靜態(tài)頁面，而且和用戶交互也逐步增加，對于這種變化使得前端的開發(fā)也變得越來越復(fù)雜，對于開發(fā)人員的要求也越來越高。

另外最初從事網(wǎng)站開發(fā)的人員只要掌握那些制作網(wǎng)頁的工具就好，更多的時(shí)間更側(cè)重于后端的開發(fā)工作。他們隨著網(wǎng)頁功能的變化走到現(xiàn)在，依然在負(fù)責(zé)網(wǎng)頁功能的實(shí)現(xiàn)，這也就不難讓人對前端工作產(chǎn)生誤解了。

2.前端開發(fā)的職責(zé)

在工作中前端的工作范圍很難界定，因?yàn)樗鼤?huì)涉及到網(wǎng)站開發(fā)的方方面面。他需要確定UI設(shè)計(jì)師設(shè)計(jì)的界面是否可以通過技術(shù)實(shí)現(xiàn)，同時(shí)需要按照界面內(nèi)容和后端開發(fā)人員確定是否可以提供相關(guān)的數(shù)據(jù)，所以作為前端工程師既需要有一定的審美眼光，**頁面的美觀，同時(shí)有需要關(guān)注前端代碼的質(zhì)量。

在傳統(tǒng)意義上的軟件開發(fā)一般都是首先考慮后端可以提供哪些服務(wù)來確定前端的界面內(nèi)容和風(fēng)格，在這樣的情況下，大多數(shù)情況下負(fù)責(zé)項(xiàng)目整體結(jié)構(gòu)的都是多年從事后端開發(fā)工作的人員。但是隨著web 的不斷發(fā)展，出現(xiàn)一種模式是前端先設(shè)計(jì)相關(guān)的界面和內(nèi)容，然后后端再設(shè)計(jì)方案實(shí)現(xiàn)相關(guān)的功能，這時(shí)候負(fù)責(zé)項(xiàng)目的就是前端開發(fā)人員，當(dāng)然這種模式下前端開發(fā)人員不僅需要掌握前端實(shí)現(xiàn)的相關(guān)技術(shù)同時(shí)還需要了解后端的實(shí)現(xiàn)技術(shù)。不過這種模式只是在一些博客中見到過，大多數(shù)情況下我們還是和種情況類似都是后端確定數(shù)據(jù)后再確定前端界面和內(nèi)容，不過這兩種不同的方式對于前端人員的要求和工作內(nèi)容還是有很大區(qū)別的。

3.前端開發(fā)的技能要求

雖然前端技術(shù)興起的時(shí)間不是很長，沒有明確的界限，不同的web 項(xiàng)目中要求的前端技術(shù)有所不同，但是還是有些技能是這些從業(yè)人員必須具備的，下面就是工作中前端開發(fā)人員必備技能的總結(jié)。

（1）HTML

HTML，簡單的說HTML就像一個(gè)骨架，整個(gè)網(wǎng)頁的結(jié)構(gòu)都是在HTML中定義的，而且HTML本身內(nèi)容并不復(fù)雜，只要掌握幾類常用的標(biāo)簽就好，如用于鏈接、顯示圖片、列表、表格、表單等。在實(shí)現(xiàn)前端的技術(shù)中HTML很容易，十分容易上手和學(xué)習(xí)，但是編寫語義良好、整齊簡潔的HTML代碼需要大量的練習(xí)才可以，因?yàn)閺?fù)雜的HTML結(jié)構(gòu)不僅不利于搜索引擎的檢索，而且對于使用CSS樣式和JavaScript實(shí)現(xiàn)一些效果也會(huì)很困難。

（2）CSS

CSS，樣式就是為定義好的HTML結(jié)構(gòu)添加一層外衣，使得頁面變得美觀，這種美好的樣式也是吸引用戶的方式。和HTML一樣CSS也不復(fù)雜，只要掌握一些常見的樣式就好。真正CSS部分要做到的就是使得CSS樣式簡潔、易讀、可維護(hù)、性能良好，要實(shí)現(xiàn)這些需要我們重點(diǎn)理解CSS選擇器以及繼承相關(guān)的內(nèi)容。

（3）JavaScript

JavaScript，通過HTML定義骨架、CSS添加外衣之后，要讓網(wǎng)頁變得富有活力就需要使用JavaScript，這一部分也是真正編程的部分。對于JavaScript要掌握的內(nèi)容就不像HTML、CSS那樣簡單，因?yàn)槭紫菾avaScript是一種腳本語言，所以它具有很大的靈活性，有時(shí)候可能造成錯(cuò)誤，另外不同瀏覽器之間的兼容性問題也可能造成JavaScript語言出現(xiàn)錯(cuò)誤。鑒于如上這些原因在學(xué)習(xí)JavaScript語言時(shí)要特別注意，本套課程涵蓋基礎(chǔ)語法、面向?qū)ο?、函?shù)、事件、BOM和DOM操作、表單處理、錯(cuò)誤處理機(jī)制等內(nèi)容，希望可以幫助大家更好的掌握J(rèn)avaScript。

（4）前端框架

框架技術(shù)，隨著前端框架的出現(xiàn)很大程度上降低了工作難度，使得即使是從事后端工作的人員也可以編寫一個(gè)漂亮美觀的頁面。這些前端框架不僅統(tǒng)一了編碼方式同時(shí)還解決了瀏覽器兼容問題。雖然前端框架的應(yīng)用為開發(fā)帶來福音，但是也造成了誤解，很多人認(rèn)為只要掌握這些框架就好了，對于那些基礎(chǔ)內(nèi)容就沒必要再去掌握了，這點(diǎn)是非常錯(cuò)誤的。我把接觸的前端框架分為兩類，針對CSS的框架、針對JavaScript的類庫。雖然前端框架這部分內(nèi)容并不在本套課程計(jì)劃之內(nèi)，但是我計(jì)劃隨后針對jQuery、Bootstrap、AngularJS這三種框架做一系列的課程來完善我們在本套課程中的博客系統(tǒng)，同時(shí)利用Bootstrap、AngularJS結(jié)合后端服務(wù)語言開發(fā)一個(gè)博客系統(tǒng)的管理系統(tǒng)，希望可以幫助大家掌握三個(gè)經(jīng)典的前端框架，當(dāng)然除了這三個(gè)之外還有很多類似的內(nèi)容，如果大家覺的有需要可以在QQ交流群或者公眾號中發(fā)消息給我，我會(huì)盡可能為大家提供幫助。

（5） 調(diào)試

調(diào)試，不管是前端人員還是后端人員調(diào)試都是一項(xiàng)必不可少的技能，在調(diào)試的過程中發(fā)現(xiàn)頁面結(jié)構(gòu)的變化、樣式渲染效果、JavaScript代碼執(zhí)行情況以及后端返回?cái)?shù)據(jù)，甚至可以直接修改網(wǎng)頁的結(jié)構(gòu)和樣式?，F(xiàn)在大部分瀏覽器都提供了供調(diào)試的控制臺，而且值得一提的是之前的火狐瀏覽器需要按照Firebug才可以，現(xiàn)在已經(jīng)不需要了，在火狐瀏覽器中已經(jīng)查找不到相關(guān)的插件了。