前端入门之路
正式接觸前端應該是在2017年7月份，到現在差不多已經有兩年的時間。我很慶幸，在入門的過程中我是處在一個技術資源還算有保障的環(huán)境中，遇到什么問題，都可以從身邊的前輩身上找到答案。但是回想起來，仍覺得入門之路頗為坎坷。很多人剛接觸前端時普遍存在的問題主要包含不理解前端的基本概念，不知道有多少技術棧，不明白各種技術棧出現的原因，以及他們之間的相互關系，在什么情況下該使用哪個。更具體地來說，是不知道問題出在哪里，也不知道該怎么描述自己遇到的問題。
我認為產生以上問題的原因主要來自于三個方面。第一，前端包含太多讓人眼花繚亂、不知該從哪里下手的技術方案，對于同一種效果或功能的實現，可以有多種不同的技術搭配方案，這個現象導致學習的過程非常不穩(wěn)定。第二，大多數學校都沒有開設前端相關的課程，給前端入門也帶了一定的困難。第三，很多學習前端的人缺少真正的實戰(zhàn)經驗，只能通過文檔和視頻自學，因此一直在邊緣徘徊。
在這篇文章中，我試著回想并梳理一下從入門到現在自己會遇到或者思考過的一些問題，以及我現在對于這些問題的答案。簡單來講，就是一個關于前端知識的問答。
前端和后端的區(qū)別是什么？
我直到大學畢業(yè)的時候對這個問題都沒有概念。16年8月份去老師的公司實習，接手了一個項目，主要工作是按照產品的需求修改前端的部分內容和功能。所以我面臨的第一個問題就是搞清楚前端和后端的區(qū)別是什么，百度一下，再看幾篇博客，感覺已經理解了前后端的差別。但是理解是一回事，前后端代碼放在一起，讓你找出來哪一部分是前端，哪一部分是后端又是另一回事。所以我花了幾天的時間才搞清楚前端和后端代碼的區(qū)別。
現在，我想用一個案例來描述前后端的區(qū)別。就以我們每天都會去的食堂作為模板。在食堂這個體系下，打菜的窗口和阿姨就是前端，廚房里做菜的廚師就是后端。如果把食堂里一半窗口的打菜工作人員換成年輕漂亮的小姑娘，男生們肯定都喜歡去這些窗口打菜。但是，需要明白的一點是，這些窗口的菜并不一定好吃，菜好不好吃是由每個窗口后面的廚房（假定每個窗口都有一個單獨的廚房供應飯菜）決定的。所以，前端是用戶能夠直接看到和感知到的東西，但是用戶體驗好不好卻要分為兩個方面，一是打菜的小姑娘好不好看（前端展示的內容和效果好不好），二是廚師做的菜好不好吃（后端服務器的綜合能力，可能包括數據處理、并發(fā)能力、數據真實性等若干）。
哪里可以學前端？
?不管是已經下定決心要從事前端行業(yè)的人還是在猶豫期不知道該學什么想要嘗試一下前端的人，都需要找到合適的學習方法和學習平臺。學習平臺有很多，網上一搜，一大把，W3C School（盡管我平時不太習慣看這個）、菜鳥教程、慕課視頻、各種博客等。平臺有很多，但是需要注意的一點是，所有平臺的教程都只能教會給我們最基本的語法和用法，并不能幫我們指明學習方向或解決具體的問題，所以我覺得這些平臺的內容只適合用于入門初期快速瀏覽一遍。更好的方式可能是在有了一定的基礎之后為自己設定一個個目標，并不斷達成這些目標。比如實現一個或一組簡單的網頁展示、動態(tài)效果及跳轉邏輯，或者參加到項目實戰(zhàn)中去。
Html 中那些標簽都是怎么寫出來的？
網頁中的標簽都是一個一個手打出來的嗎？這是我對前端的第一印象。但是網頁頭部往往有很多有長又難記的內容，這些內容需要把他們記住嗎？還是說每次只需要從已經寫好的網頁上復制粘貼過來就可以了？后來，慢慢寫的多了，就知道除了頭部那一堆東西之外，其他的東西確實都是一行一行打出來的，但是也存在一些很方便的工具可以讓我們碼html 的時候更快一些，比如說利用Emmet，我們可以通過一個感嘆號 + tab 就打出以下的代碼，其他更多的的使用方式可以參考：
https://docs.emmet.io/abbreviations/syntax/
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" /><title>Document</title> </head> <body></body> </html>開發(fā)工具用什么？
最初用的是webstorm，后來使用了sublime text，現在用的vscode。多種工具各有利弊，但是都有很多便利的插件和漂亮的主題，比如說上面提到的Emmet 還有Snippets 等，善用插件可以幫我們提升很大的編碼效率。最后用哪個可能全憑個人喜好，更多內容可以參考下面的連接。
sublime text 插件：https://www.cnblogs.com/junwu/p/5660934.html
前端開發(fā)ide：https://blog.csdn.net/qq_36538012/article/details/80748167
為什么網頁可以有很多后綴？
在不同技術棧的項目中可能會看到各種各樣的網頁后綴，.html，.jade，.vue 巴拉巴拉。不管是什么后綴，有一點是非常明確的，即瀏覽器最終只能識別并正確翻譯html 后綴的網頁。所以各種后綴的網頁實際上是不同的框架或技術棧，為了提升html 的編碼效率或擴展性所做的在html 之上的一步封裝，最終發(fā)布的時候還是要被轉換成html 文件。看到不同后綴的網頁名字的時候只需要去網上查這個框架的語法等基本信息，就可以很快地理解并使用。但是新手還是建議從原生html 寫起。
那些網頁的css 都是自己寫的嗎？Bootstrap 是什么？
在看到css 中大段大段的代碼的時候，腦海中的第一個想法就是這些內容都是開發(fā)者自己寫出來的嗎，還是從不知道什么地方復制過來的？是的，就是自己寫的。在正常的開發(fā)流程過程中，設計人員會為前端提供網頁的設計稿，設計稿上會標注出每一個元素的寬高、顏色、邊緣弧度等，根據這些信息就可以利用代碼一比一還原網頁，只是這個還原過程需要花一定的時間去培養(yǎng)，需要嘗試著寫，去看人家的代碼和反復地練習才行。
但是，隨之而來的一個問題就是：很多情況下，我們可能會用到相似的css 樣式，尤其是在管理系統(tǒng)中，比如說一個按鈕、一個選擇框或者一個表格，我們不想直接用很丑的原生展現，又想要一套比較好看、容易被大多數人接受的固定模板，該怎么辦呢？以bootstrap 為例的框架正是以上問題的解決方案，其他的還有weui、ant design、element-ui、vutify 等，我習慣稱之為UI 框架。管理系統(tǒng)的快速離不開這些UI 框架，但是如果像是公司官網之類定制化程度比較高的內容可能主要還是靠手寫。
JQuery 是什么，該怎么用？
網頁的最初目的是用于圖文排版，展示內容。到后來會慢慢加入一些交互，比如用戶點擊一個按鈕，可能會發(fā)生圖片的旋轉或者信息的變化等。這些功能都要通過利用js 操作dom（其實就是網頁中的標簽）來實現，先獲取dom，然后改變dom 的內容或者css 樣式等。一個很經典的用法如下：
var para = document.getElementsByTagName("p");//返回的是數組para[0].setAttribute("title", "a list of goods");因此，早期的js 代碼里充斥著像這種獲取dom 和操作dom 的代碼。但是由于早期的瀏覽器廠商之間的競爭和dom 技術的發(fā)展，不同瀏覽器對于不同代碼的兼容性不是特別好，一個很典型的例子就是為dom 添加監(jiān)聽事件：
function addEvent(elm, evType, fn, useCapture) {if (elm.addEventListener) {elm.addEventListener(evType, fn, useCapture);//DOM2.0return true;}else if (elm.attachEvent) {var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+return r;}else {elm['on' + evType] = fn;//DOM 0} }因此，通過js 來操作dom 的方式需要寫很多條件判斷的代碼且容易出錯。為了解決這個問題，jquery 應運而生。它在js 的基礎之上做了一層封裝，屏蔽了底層不同瀏覽器的差異，讓我們操作dom 的過程更加簡單，正確性更高。因此在很多年里，jquery 都大受歡迎，這是在那個時代大家針對前端的復雜性所研究出的最好的解決方案。
前端框架是什么？
這個問題我花了很長的時間才搞明白。如今，在我印象中的前端框架主要包含js 框架和css 框架，css 框架就是上面所說的ui 框架，它們給我們提供的是一套標準的ui 解決方案。Js 框架就非常多了，像上面提到的jquery 就是統(tǒng)領了前端江湖好多年的一大霸主，盡管它現在已經有些跟不上時代了。如今的前端三杰Angular、Vue、React 是最受歡迎的三大js 框架（實際上也包含了html），他讓我們的編碼過程更加簡單，寫出來的東西可擴展性更好，降低了團隊合作的成本。三大框架的流行使得很多人一開始就直接跳過原生的js 開發(fā)，直接面對這些優(yōu)化過的東西。我認為這對于新手來說并不是最好的選擇，還是推薦從原生的html、js、css 寫起。
那么，jquery 跟vue 有什么不同呢？jquery 統(tǒng)治了前端那么多年，又是如何衰落下去的？這跟大家對前端的認知階段有關。以前（jquery時代），工程師想的是如何讓操作dom 的過程更便利、更有保證，但是項目中仍然充斥著獲取和改變dom 的操作，代碼的書寫和排錯要花費很大的成本。現在的模式則是如何把操作dom 這一復雜的機制徹底隱藏，比如通過雙向綁定直接將js 變量的變化關聯到html 上，除此之外，組件化和模塊化也使得整個項目的可維護性更高，更利于大型項目的開發(fā)。
Ajax 是什么？
很早以前，頁面內容的變化只能通過整個頁面的刷新來完成。后來，Google 一系列產品的應用使得只需部分刷新頁面即可進行信息更新的ajax 被大家廣泛接受。簡單來講，ajax 就是前端與后端進行最小代價溝通的一種技術。
Npm 是什么，為什么會出現這個東西？
前端，或者說js 對于大部分人來說都不是他們接觸的第一門語言，而第一門語言通常是C 或者java。想想C 或者java 的模塊化管理機制，其基本理念為將負責不同功能或者不同模塊的代碼放在不同的文件中，通過引入的方式來進行方法的調用。在js 中，安裝node（node 是一個js 的運行環(huán)境，相當于沒有界面的瀏覽器）時所附帶的npm 就是前端的模塊化解決方案。通過npm 我們可以發(fā)布和安裝各種各樣的依賴包，不同的包會針對不同的領域提供一個普適性地解決方案，node 項目中最知名的兩行代碼就是：
npm install // 然后 npm run dev // 下面就不會了第一行代碼的作用是按照項目根目錄下的package.json 文件中的依賴關系安裝相關的依賴包，安裝的所有依賴包都放在根目錄下的node_modules 文件夾中，這個文件夾的體積通常非常大，因此在多人協作中，這個文件夾通常是要被加入到.gitignore 文件中的。即大家僅僅通過package.json 來同步項目的依賴，這個機制使得項目的管理非常簡單。
除此之外，ES6 的import 和export 也是前端模塊化的解決方案之一，關于兩者（require 和import）的區(qū)別可以參考以下鏈接：
https://www.imooc.com/article/22371?block_id=tuijian_wz
Js 為什么會有那么多叫法？ES6、ES7、TypeScript
同html 模塊的描述一樣，瀏覽器只能識別并正確運行原生的js 代碼，即ES5（全稱是ECMAScript 5，是js 發(fā)展過程中某一階段的規(guī)范）。但是原生js 有很多缺點，在項目開發(fā)過程中使用起來十分不方便，因此慢慢出現了更多的標準，這些新的標準在代碼的維護性、擴展性和團隊合作的便利性方便相對于原生js 有了很大的提升。ES6、ES7、TypeScript 就是其中之若干。現在的前端項目中很少有直接用ES5 開發(fā)的，但是初學階段還是建議使用ES5 進行學習，因為如果使用了ES6 以上的語法，如果不進行相關的配置在瀏覽器中無法正常運行。至于如何分辨出ES5 和E6，這個可能就要具體情況具體分析了。
Scss、Less、Stylus 等跟Css 的關系
原生的css 書寫過程中頗為復雜，維護性較差，如果你已經有一些css 方面的經驗，可能會遇到過下面的代碼：
.outer {... } .outer .inner1 {... } .outer .inner2 {... } .outer .inner2 .inner-inner1 {... }.red-a {...color: red; } .red-b {...color: red; }如果用stylus 來寫，會怎么樣：
$color-red = red// 嵌套 .outer....inner1....inner2....inner-inner1...// 變量 .red-a...color $color-red .red-b...color $color-red因此可以看到，像scss、less、stylus 等被稱為css 預處理器的東西所要描述的內容其實跟css 是一致的，只是表現形式不同而已，預處理器通過引入變量、嵌套、繼承、mixin 等機制使得css 的書寫和維護更加高效。但是到最后，所有用預處理器寫成的代碼最終還是要被轉換成css 在瀏覽器端運行。
Webpack 是什么，我不用他行不行？
說到這里，webpack 就該出場了。上面提到，現在前端項目開發(fā)過程中用到了大量非原生、即瀏覽器不能識別的框架或技術，如果在項目開發(fā)和發(fā)布的過程中一個一個地進行配置將會是一項非常復雜的工程，那么有沒有一個工具來幫助我們解決這個問題，并且可以提供除此之外的其他幫助呢？有，那就是webpack。關于webpack，之前寫過一篇稍微詳細一些的博客，更多內容可以參考：
Webpack：從野戰(zhàn)到入門 =>?https://blog.csdn.net/qq_33594380/article/details/80684442
不用webpack 行不行？我覺得不行。
要不要看書，要看哪些書？
一定要看書，項目和實戰(zhàn)過程中永遠只能給我們線條狀的知識點。塊狀的知識點和前端知識體系的搭建必須通過看書等系統(tǒng)的學習過程來完成。此處也推薦幾本我看過的覺得很有幫助的書。
除了書之外，多關注一些與前端相關的公眾號，每天去看一下公眾號推送的文章，對于探索新的東西和復習舊的知識也有很大的幫助，比如說：前端早讀課、前端大全、前端之巔、奇舞周刊等。
// JS 高級程序設計（或犀牛書） // 可維護的JS // JS DOM 編程藝術 // ES6 標準入門 // CSS 世界 // 圖解Http // 深入淺出Webpack // 深入淺出Node.js?
總結
- 上一篇： 重新构想原子化 CSS
- 下一篇： [知乎回答] 前端是否要学习 Node.