前端快速入門

爲何快速入門

　　實際工做中，不少的後端同窗可能會寫一些前端的東西，常常發生的是，後端會吐槽不會寫CSS，JS的代碼寫的太難受。做爲一名專業的前端，固然但願後端同窗們能快速瞭解前端的一些概念，並順利的完成開發任務，因而寫下這篇文章來幫助後端同窗們快速入門前端開發。

在瀏覽器端發生了什麼

　　有一道經典的面試題是說：從瀏覽器輸入url到頁面渲染完成這一過程都發生了什麼？這個問題能夠說是一個很是常見的場景，足以涵蓋大量的計算機知識，可深可淺。咱們來簡單的瞭解一下在瀏覽器端發生的過程，以此來學習前端的一些概念。通常狀況下，一個url會對應了服務器上的一個HTML文件（這個叫網頁文件，格式相似於XML），瀏覽器得到HTML文件後，開始解析並渲染HTML文件，遇到帶有src的link標籤，或帶有src的script標籤時，就會再去下載對應的CSS文件或JS文件。style和script標籤，也能夠直接包含相應的語言內容，這樣瀏覽器就直接解析或執行了。什麼是CSS文件呢？CSS(層疊樣式表)的內容是一些樣式的規定，規定了什麼？HTML文件的主體內容實際上是網頁的結構化的表示，其中的標籤都有必定特殊的含義，至關於網頁內容的骨架，而CSS文件則是骨架上的裝飾語，告訴了瀏覽器這些 結構內容的外貌。什麼是JS文件呢？即Javascript腳本文件，JavaScript是一門運行在瀏覽器端的腳本語言，生動的網頁靠的就是JavaScript。因此瀏覽器發生的過程大體應該是，渲染HTML所聲明的網頁結構內容，根據CSS的規定來修飾這些結構，執行JavaScript來修改結構或賦予其中一些結構一些動做功能（白話，非真實過程）

三劍客

　　HTML、CSS、JavaScript，被稱爲前端的三劍客。各有其功能，具體爲何是分開的三者就不糾結了。HTML主要是標籤內容，瀏覽器根據其內容來渲染網頁，在瀏覽器內部的表示是DOM樹（節點是DOM對象的樹這種數據結構）CSS有本身的語法，主要是選擇器加上樣式屬性，瀏覽器解析後對應到DOM樹來進行具體圖形的繪製javascript, 是一門動態語言，瀏覽器自己提供了大量的api來操做DOM樹，而且也有其餘方面的api支持如canvas等三者的基礎知識能夠經過w3schol或菜鳥教程這兩個網站來學習

網頁編程的演變

　　有時候能夠看到之前的網頁，會發現那時的大多都是緊湊的文字，如今的網頁就變得十分複雜並且視覺效果更炫。 能夠把網頁編程大體分爲3個階段：
一階段: 大部分網站就是由許多的帶有大量文字的HTML組成，還有少許的CSS控制樣式。

二階段：得益於AJAX技術，網頁開始變得生動靈活，在AJAX以前提交信息到服務器就是表單提交，會刷新網頁，有了AJAX才能在不刷新網頁的狀況下與服務器進行通訊，互相傳遞數據，並且CSS也有所進步，開始注重網頁的用戶體驗，被稱爲Web2.0時代。

三階段：即當前階段，而且還在繼續發展，持續演變。在以前的階段，網頁都是由服務器渲染好，傳給瀏覽器來展現，後臺的服務器技術也出現了不少網頁模板框架，如jsp，asp，還有php這種混合寫法。目前網頁開發的一個典型表明就是SPA（單頁面應用），SPA的思想是一個網站只有一個HTML文件，用戶在網頁上的交互，網頁結構的變化都交給Javascript來控制，網頁對JS的要求就開始變高。

前端框架

　　目前流行的三大前端框架：React、Vue、Angular，三大框架各有特色，Vue易上手，Angular大而全，React生態好，總的來講都能勝任開發工做，具體對比能夠自行搜索框架雖然有好幾個，但他們解決的問題實際上是一個問題，即經過Javascript控制網頁。現代的JS框架都是MVVM框架了，在這些MVVM框架之前還有MVC框架如backbone.js，更簡單的就是直接一把梭，jquery來操做DOM，拼接HTML字符串這種來控制網頁。現代的MVVM（Model-ViewModel-View-Controller）主要改善了如何更新視圖（即操做網頁的DOM），經過操做數據，數據的變化映射到DOM的改變。避免了直接修改DOM。咱們知道瀏覽器內部是有一個DOM樹來表示網頁的結構，前端框架通常會有一個虛擬DOM，來與之對應，當JS修改數據時，可能會影響虛擬DOM的變化，虛擬DOM變化後，會將其變化經過JS的DOM的API應用到瀏覽器的DOM樹上，進而觸發網頁的變化。前端框架還有一個特色就是組件化，經過將能重複利用的DOM結構封裝成可複用的組件來提升開發效率，但這種組件的封裝都跟框架有關，只適用於同一種框架。框架無關的WebComponent還在發展中。

前端構建

　　有不少語言在執行前都有一個編譯連接的過程如C，JS是運行在瀏覽器端的腳本語言，是不須要這種過程的，但如今前端項目也是有一個先構建再發布的過程的。當前的網頁開發主要就是JS的編寫了，傳統的網頁組織是手動的在HTML文件包含所須要的script連接和樣式的link連接，這種手段在大量的JS面前難覺得繼，前端構建也是一個發展的過程，目前主要是依賴Webpack來構建。Webpack會由入口的JS文件出發，將其全部的依賴組成依賴圖，分割代碼成一塊一塊的。通常會在HTML裏面生成幾個script標籤，再經過JS的異步獲取模塊能力來加載後續須要的JS模塊，具體的構建過程能夠搜索瞭解。

nodejs

　　nodejs是JS在服務端運行的環境，基礎是chrome中的JS引擎V8。現代的網頁開發藉助了nodejs的不少能力來提升開發效率和工程化開發，webpack就是典型例子。
因此開發的先決條件是安裝node.js，安裝完成後會帶有一個npm。npm是nodejs的包依賴管理工具，相似於其餘語言，如maven，gem等。開發過程當中會須要安裝大量的第三方JS包，因此要學習npm的用法（或者是另外一個工具，yarn）。一些JS包會被webpack打包到項目中，一些則僅僅在開發過程當中須要，能夠研究學習一些項目的package.json文件，來明確這兩種的區別。

Vue快速入門

　　以Vue爲例來快速入門前端項目，能夠先根據Vue官網來學習框架的基礎知識，並跟着相應的指南來寫一下代碼例子。
典型的Vue項目，不只有Vue框架，還有其全家桶（Vue-Router、Vuex）。試想，網站只有一個HTML文件時，那網頁跳轉怎麼辦，在單頁面應用中的跳轉並不會引發網頁刷新，而是在其內部的router定義下變化，具體能夠看Vue官網相應解釋，因此Vue-Router主要是解決的問題是應用的頁面與url路徑的關係。因此要先看項目的router文件的定義，來知道應用的每一個頁面對應的Vue文件在哪？一個頁面通常是一個Vue實例，裏面有許多的子組件也都是Vue的實例。
項目通常有一個main.js來初始化第一個Vue實例即根實例，而後掛載到具體的DIV上，通常是#app這個div， 其他的實例均是其子組件，渲染通常也都在#app內部。實際上Vue的SPA就是一個Vue組件樹。組件的相互交互有必定的規範來避免不少bug的產生，並提高代碼的可維護性，因此實際開發要參考Vue官網的代碼指南來避免一些很差的代碼操做。

概念補充

　　 AJAX：Asynchronous JavaScript and XML，異步的JavaScript和xml。但目前都是傳遞json格式數據而非xml格式的數據了，是一種JavaScript利用瀏覽器發送請求與服務器通訊而不須要刷新網頁的技術，利用的仍然是HTTP協議，因此重點仍是在HTTP協議上，瀏覽器由於安全問題而對ajax有一些限制，如跨域的問題，解決方案如今都是cors了，之前是jsonp比較多。