whztm2016-10-04

網站開發開發

來自

大致分為前端和後端，前端主要負責實現視覺和互動效果，以

360問答

及與伺服器通訊，完成業務邏輯。前端的核心

價值在於對使用者體驗的追求，

Web前端開發是從網頁製作

演變而來的。初學者可以參考以

下的教程進行初步的系統學習！

基

礎知識

1、HTML + CSS 這部分建議在W3school線上教程上學習，邊學邊練，每章後還有小測試。 之後可

趙待由措降境長

以模仿一些網站做些頁面。在實

紹要尼約

踐中積累了一些經驗後，可以系統的讀一兩本書，推薦《He

ad First HTML 與 CS

S 中文版》，這本書講的太

區英約向降處

細了，我沒能拿出耐心細讀。你可以根據情況

斟酌。

2、Javascript 要學的內容實在很多，如果沒有

整膠

其他程式語言的基礎的話，學起來可能要費些力，還是建議先在 W3

school上學習。

之後建議馬上看《Javascript語言精粹》

材湖士評投厚

，JS是一門很混亂的語言，這本

書能夠幫助你區分哪些

是語言的精華，哪些是糟粕，對於語言精華，應該深入學

影山術

習。糟粕部分能看懂別人寫的程式碼就行，自己就不用嘗試了。

進階

有了以上基礎，就可以進行一般的

靜態網頁設計，不過對於複雜的

頁面還需要進一步學習。

1、CSS。必看《精通CSS

原散

》，看完這本書你應該對：盒子模型，流動，Bloc

k，inline，層

疊，樣式優先順序，等

概念非常瞭解了。作

為練習可以看下《CSS藝門之匠》這本書，它對標題，背景，圓角，導航條，table，表單等主題都

有詳細的介紹。

2、Javascript。上面

財第見振找綠型族每然

提到內容還不足以讓你勝任JS程式設計。在有了基礎之後，進一步學習內容包括：

a） 框架。

推

薦jQuery，簡單易用，在

W3school簡單學習js

後，直接上手jQu

ery即可完成一些簡

胡晚屋哥耐點列護

單的專案。學習方法也很

誤升蘭

簡單，照著產品文

吃

檔做幾個頁面就行了，不用

面面俱到，以後遇到問題查

文件就行了。框架可以幫你遮蔽瀏

雲升說執點座從副徵半

覽器的差異性，讓你能更專

苗此通載失

注與Web開發學

習的精髓部分。補充： 可

以使用Codecademy學習 Javas

買棉

cript，jQ

uery，使用者體

驗真的很好（感謝 TonyOuyang ）。

b） Javasc

星是亮尼景

ript 語言正規化 。這個名字可能並不恰當，只是我找不到可以描述“面向物件”，“函式式”這個兩個概念的概念。Javascript不完全是一個面向物件的語言，它的很多設計理念都有函式程式語言的影子，甚至說如果你不用面向物件，完全可以把它理解成一門函數語言程式設計語言。

Javascript的很多語言特性，都是因為他具有函式式語言的特點才存在的。這部分推薦先學習面向物件的基本理論，對封裝，繼承，多型等概念要理解，維基百科，百度百科會是你的幫手，另外推薦《Object Oriented Javascript》，應該有中文版。對與函數語言程式設計我瞭解的也不繫統，不好多說，可以自己百度一下。

c） Javascript 語言內部機制。必須弄清如下概念：JS 中變數的作用域，變數傳遞方式，函式的定義環境與執行環境，閉包，函式的四種呼叫方式（一般函式，物件的方法，apply，call），以及四種呼叫方式下，‘this’指向的是誰。這部分內容你會在《Javascript語言精粹》中詳細瞭解。另外，你必須理解 json。

d） dom程式設計，這個Web前端工程師的核心技能之一。必讀《Dom程式設計藝術》，另外《高效能 Javascript》這本書中關於dom程式設計的部分講的也很好。

e） Ajax程式設計，這是另一核心技術。Ajax建議在網上查些資料，瞭解這個概念的來龍去脈，百度百科，維基百科上的內容就足夠了。真正程式設計是很容易的，如今幾乎所有框架都對Ajax有良好的封裝，程式設計並不複雜。

f） 瞭解瀏覽器差異性。這部分包括CSS和js兩部分，瀏覽器差異內容很多，建議在實踐中多多積累。另外對於瀏覽器的渲染模式，DOCTYPE等內容應該系統學習。

3、HTML5和CSS3 。HTML5規範已經於2014年10月28日釋出了，移動端HTML5和CSS3已經得到了非常廣泛的使用，必知必會呀。

程式碼層面

有了以上知識，對於大多數小型網站，你應該已經可以寫出能夠工作的程式碼了。但要想成為更專業的前端，你還需繼續努力。更高的要求大概還有四方面：1）易維護，2）可測試，3）高效能，4）低流量（移動端）。

1）易維護。對於頁面你該理解‘樣式’，‘資料’，‘行為’三者分離，對應的當然就是CSS，HTML，js。對於js程式碼，你最好了解設計模式，重構，MVC等內容。

2）可測性。

3）高效能。必讀《高效能Javascript》

4）低流量。移動端關注比較多。

工程層面

前端專案同樣面臨軟體生命週期的各個環節，首先是程式碼管理，你必須學會使用Svn和Git。其次是程式碼的構建，如今前端程式碼構建已經不是簡單的壓縮一下了，需要進行依賴管理、模組合併、各種編譯，比需要學會使用Grunt、Gulp等前端構建工具。

然後呢？

以上內容只是簡單說了前端學習的順序。

對於前段開發，基本內容就這些了，可以根據自己的興趣愛好選擇性學習以下內容。

1、互動設計。大公司依然有專業人士搞這些，不過不懂互動的前端一定不是好前端。推薦《簡約至上》。

2、後端。

應該說前段工程師必須至少了解一門後端語言，不過如果愛好也可深入學習，入手難度比較低的應該是PHP了。這部分由可分為基於頁面，基於框架兩種。大型專案都是基於框架開發的，建議至少了解一個MVC框架，比如PHP的Ci、Yii、Yaf 等，好還框架的設計思想都大同小異。如今NodeJs在大公司已經得到普遍的使用，推薦大家使用在Node上使用Express框架做一些後端服務的開發。

3、Android和IOS開發。

時至今日，前端的工作領域已經非常廣泛，native的介面開發本質上也是前端開發，個大公司都面臨著Native環境和web環境頁面同時維護的問題，如果能夠在技術上得到統一，將會有巨大的價值。對於學有餘力的同學，應該瞭解Native開發的基本流程，至少了解到介面構建的技術。

哈哈，上面的教程其實小編也看不大懂，如果你對前端開發有興趣，如果你想成為前端開發大神，不妨可以借鑑下！