一、前端開發
前端工程師“Front-End-Developer”源自於美國。大約從2005年開始正式的前端工程師角色被行業所認可，到了2010年，網際網路開始全面進入移動時代，前端開發的工作越來越重要。
最初所有的開發工作都是由後端工程師完成的，隨著業務越來越繁雜，工作量變大，於是我們將專案中的視覺化部分和一部分互動功能的開發工作剝離出來，形成了前端開發。
由於網際網路行業的急速發展，導致了在不同的國家，有著截然不同的分工體制。
在日本和一些人口比較稀疏的國家，例如加拿大、澳洲等，流行“Full-Stack Engineer”，也就是我們通常所說的全棧工程師。通俗點說就是一個人除了完成前端開發和後端開發工作以外，有的公司從產品設計到專案開發再到後期運維可能都是同一個人，甚至可能還要負責UI、配動畫，也可以是掃地、擦窗、寫文件、維修桌椅等等。
而在美國等網際網路環境比較發達的國家專案開發的分工協作更為明確，整個專案開發分為前端、中間層和後端三個開發階段，這三個階段分別由三個或者更多的人來協同完成。
國內的大部分網際網路公司只有前端工程師和後端工程師，中間層的工作有的由前端來完成，有的由後端來完成。
PRD（產品原型-產品經理） - PSD（視覺設計-UI工程師） - HTML/CSS/JavaScript（PC/移動端網頁，實現網頁端的視覺展示和互動-前端工程師）
二、下載和安裝VS Code
下載地址
https：//code。visualstudio。com/
三、初始設定
1、中文介面配置
首先安裝中文外掛：Chinese （Simplified） Language Pack for Visual Studio Code
右下角彈出是否重啟vs，點選“yes”
重啟後如果介面沒有變化，則 點選 左邊欄Manage -> Command Paletet。。。【Ctrl+Shift+p】
在搜尋框中輸入“configure display language”，回車
開啟locale。json檔案，修改檔案下的屬性 “locale”：“zh-cn”
重啟vs
2、外掛安裝
為方便後續開發，建議安裝如下外掛
3、建立專案
vscode本身沒有新建專案的選項，所以要先建立一個空的資料夾，如project_xxxx。
然後開啟vscode，再在vscode裡面選擇 File -> Open Folder 開啟資料夾，這樣才可以建立專案。
4、儲存工作區
開啟資料夾後，選擇“檔案 -> 將工作區另存為。。。”，為工作區檔案起一個名字，儲存在剛才的資料夾下即可
5、新建資料夾和網頁
6、預覽網頁
以檔案路徑方式開啟網頁預覽
需要安裝“open in browser”外掛：
檔案右鍵 -> Open In Default Browser
以伺服器方式開啟網頁預覽
需要安裝“Live Server”外掛：
檔案右鍵 -> Open with Live Server
7、設定字型大小
左邊欄Manage -> settings -> 搜尋 “font” -> Font size
8、開啟完整的Emmet語法支援
設定中搜索 Emmet：啟用如下選項，必要時重啟vs
自學參考：http：//es6。ruanyifeng。com/
一、ECMAScript 6 簡介
ECMAScript 6。0（以下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在 2015 年 6 月正式釋出了。它的目標，是使得 JavaScript 語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。
1、ECMAScript 和 JavaScript 的關係
一個常見的問題是，ECMAScript 和 JavaScript 到底是什麼關係？
要講清楚這個問題，需要回顧歷史。1996 年 11 月，JavaScript 的創造者 Netscape 公司，決定將 JavaScript 提交給標準化組織 ECMA，希望這種語言能夠成為國際標準。次年，ECMA 釋出 262 號標準檔案（ECMA-262）的第一版，規定了瀏覽器指令碼語言的標準，並將這種語言稱為 ECMAScript，這個版本就是 1。0 版。
因此，ECMAScript 和 JavaScript 的關係是，前者是後者的規格，後者是前者的一種實現（另外的 ECMAScript 方言還有 Jscript 和 ActionScript）
2、ES6 與 ECMAScript 2015 的關係
ECMAScript 2015（簡稱 ES2015）這個詞，也是經常可以看到的。它與 ES6 是什麼關係呢？
2011 年，ECMAScript 5。1 版釋出後，就開始制定 6。0 版了。因此，ES6 這個詞的原意，就是指 JavaScript 語言的下一個版本。
ES6 的第一個版本，在 2015 年 6 月釋出，正式名稱是《ECMAScript 2015 標準》（簡稱 ES2015）。
2016 年 6 月，小幅修訂的《ECMAScript 2016 標準》（簡稱 ES2016）如期釋出，這個版本可以看作是 ES6。1 版，因為兩者的差異非常小，基本上是同一個標準。根據計劃，2017 年 6 月釋出 ES2017 標準。
因此，ES6 既是一個歷史名詞，也是一個泛指，含義是 5。1 版以後的 JavaScript 的下一代標準，涵蓋了 ES2015、ES2016、ES2017 等等，而 ES2015 則是正式名稱，特指該年釋出的正式版本的語言標準。本書中提到 ES6 的地方，一般是指 ES2015 標準，但有時也是泛指“下一代 JavaScript 語言”。
二、基本語法
ES標準中不包含 DOM 和 BOM的定義，只涵蓋基本資料型別、關鍵字、語句、運算子、內建物件、內建函式等通用語法。
本部分只學習前端開發中ES6的最少必要知識，方便後面專案開發中對程式碼的理解。
1、let宣告變數
1// var 宣告的變數沒有區域性作用域2// let 宣告的變數 有區域性作用域3{4var a = 05let b = 16}7console。log（a） // 08console。log（b） // ReferenceError： b is not defined
1// var 可以宣告多次2// let 只能宣告一次3var m = 14var m = 25let n = 36let n = 47console。log（m） // 28console。log（n） // Identifier ‘n’ has already been declared
1// var 會變數提升2// let 不存在變數提升3console。log（x） //undefined4var x = “apple”56console。log（y） //ReferenceError： y is not defined7let y = “banana”
2、const宣告常量（只讀變數）
1// 1、宣告之後不允許改變 2const PI = “3。1415926”3PI = 3 // TypeError： Assignment to constant variable。
1// 2、一但宣告必須初始化，否則會報錯2const MY_AGE // SyntaxError： Missing initializer in const declaration
3、
解構賦值
解構賦值是對賦值運算子的擴充套件。
他是一種針對陣列或者物件進行模式匹配，然後對其中的變數進行賦值。
在程式碼書寫上簡潔且易讀，語義更加清晰明瞭；也方便了複雜物件中資料欄位獲取。
1//1、陣列解構2// 傳統3let a = 1， b = 2， c = 34console。log（a， b， c）5// ES66let ［x， y， z］ = ［1， 2， 3］7console。log（x， y， z）
1//2、物件解構2let user = {name： ‘Helen’， age： 18}3// 傳統4let name1 = user。name5let age1 = user。age6console。log（name1， age1）7// ES68let { name， age } = user//注意：結構的變數必須是user中的屬性9console。log（name， age）
4、模板字串
模板字串相當於加強版的字串，用反引號 `，除了作為普通字串，還可以用來定義多行字串，還可以在字串中加入變數和表示式。
1// 1、多行字串2let string1 = `Hey，3can you stop angry now？`4console。log（string1）5// Hey，6// can you stop angry now？
1// 2、字串插入變數和表示式。變數名寫在 ${} 中，${} 中可以放入 JavaScript 表示式。2let name = “Mike”3let age = 274let info = `My Name is ${name}，I am ${age+1} years old next year。`5console。log（info）6// My Name is Mike，I am 28 years old next year。
1// 3、字串中呼叫函式2function f（）{3 return “have fun！”4}5let string2 = `Game start，${f（）}`6console。log（string2）； // Game start，have fun！
5、宣告物件簡寫
1const age = 122const name = “Amy”34// 傳統5const person1 = {age： age， name： name}6console。log（person1）78// ES69const person2 = {age， name}10console。log（person2） //{age： 12， name： “Amy”}
6、定義方法簡寫
1// 傳統2const person1 = {3 sayHi：function（）{4 console。log（“Hi”）5 }6}7person1。sayHi（）；//“Hi”8910// ES611const person2 = {12 sayHi（）{13 console。log（“Hi”）14 }15}16person2。sayHi（） //“Hi”
7、物件拓展運算子
拓展運算子（。。。）用於取出引數物件所有可遍歷屬性然後複製到當前物件。
1// 1、複製物件2let person1 = {name： “Amy”， age： 15}3let someone = { 。。。person1 }4console。log（someone） //{name： “Amy”， age： 15}
1// 2、合併物件2let age = {age： 15}3let name = {name： “Amy”}4let person2 = {。。。age， 。。。name}5console。log（person2） //{age： 15， name： “Amy”}
8、函式的預設引數
1function showInfo（name， age = 17） {2 console。log（name + “，” + age）3}45// 只有在未傳遞引數，或者引數為 undefined 時，才會使用預設引數6// null 值被認為是有效的值傳遞。7showInfo（“Amy”， 18） // Amy，188showInfo（“Amy”， “”） // Amy，9showInfo（“Amy”， null） // Amy， null10showInfo（“Amy”） // Amy，1711showInfo（“Amy”， undefined） // Amy，17
9、不定引數
不定引數用來表示不確定引數個數，形如，。。。變數名，由。。。加上一個具名引數識別符號組成。具名引數只能放在引數列表的最後，並且有且只有一個不定引數。
1function f（。。。values） {2 console。log（values。length）3}4f（1， 2） //25f（1， 2， 3， 4） //4
10、箭頭函式
箭頭函式提供了一種更加簡潔的函式書寫方式。基本語法是：
引數 => 函式體
1// 傳統2var f1 = function（a）{3 return a4}5console。log（f1（1））678// ES69var f2 = a => a10console。log（f2（1））
1// 當箭頭函式沒有引數或者有多個引數，要用 （） 括起來。2// 當箭頭函式函式體有多行語句，用 {} 包裹起來，表示程式碼塊，3// 當只有一行語句，並且需要返回結果時，可以省略 {} ， 結果會自動返回。4var f3 = （a，b） => {5 let result = a+b6 return result7}8console。log（f3（6，2）） // 8910// 前面程式碼相當於：11var f4 = （a，b） => a+b
11、Promise
在JavaScript的世界中，所有程式碼都是單執行緒執行的。由於這個“缺陷”，導致JavaScript的所有網路操作，瀏覽器事件，都必須是非同步執行。
非同步執行可以用回撥函式實現：
例1、定時器
1// 1、timeout的定時器功能使用了回撥函式2console。log（‘before setTimeout（）’）3setTimeout（（）=>{4 console。log（‘Done’）5}， 1000） // 1秒鐘後呼叫callback函式6console。log（‘after setTimeout（）’）
例2、ajax
mock/user。json
1{2 “id”： “1”，3 “username”：“helen”，4 “age”：185}
html頁面引入jquery。js
1
1 // 2、ajax功能使用了回撥函式2$。get（‘mock/user。json’， （data）=>{34 console。log（data）5}）
例3、1秒後執行ajax操作
1 // 1、timeout的定時器功能使用了回撥函式2console。log（‘before setTimeout（）’）3setTimeout（（） => {4 console。log（‘Done’）56 // 2、ajax功能使用了回撥函式7 $。get（‘mock/user。json’， （data） => {89 console。log（data）10 }）1112}， 1000）； // 1秒鐘後呼叫callback函式13console。log（‘after setTimeout（）’）
例4、1秒後獲取使用者資料，然後根據使用者id獲取使用者登入日誌
mock/login-log-1。json
1{2 “items”：3 ［4 {5 “date”：“2018-12-01”，6 “ip”：“10。10。10。10”7 }，8 {9 “date”：“2018-12-01”，10 “ip”：“10。10。10。10”11 }12 ］13}
回撥函式巢狀的噩夢
1// 1、1秒後獲取使用者資料2console。log（‘before setTimeout（）’）3setTimeout（（） => {4 console。log（‘Done’）56 // 2、獲取使用者資料7 $。get（‘mock/user。json’， （data） => {89 console。log（data）1011 // 3、獲取當前使用者的登入日誌12 $。get（`mock/login-log-${data。id}。json`， （data） => {1314 console。log（data）15 }）16 }）1718}， 1000） // 1秒鐘後呼叫callback函式19console。log（‘after setTimeout（）’）
Promise是非同步程式設計的一種解決方案。從語法上說，Promise 是一個物件，從它可以獲取非同步操作的響應訊息。
古人云：“君子一諾千金”，這種“承諾將來會執行”的物件在JavaScript中稱為Promise物件。
12
有錯誤處理的promise案例
12
也可以使用catch處理失敗
1。then（（data）=>{//成功23}）4。catch（（）=>{//處理失敗：then方法的第二個引數是失敗的回撥5 console。log（‘出錯啦！’）6}）
12、模組化
隨著網站逐漸變成“網際網路應用程式”，嵌入網頁的Javascript程式碼越來越龐大，越來越複雜。
Javascript模組化程式設計，已經成為一個迫切的需求。理想情況下，開發者只需要實現核心的業務邏輯，其他都可以載入別人已經寫好的模組。
但是，Javascript不是一種模組化程式語言，它不支援“類”（class），更遑論“模組”（module）了。
在 ES6 前， 實現模組化使用的是 RequireJS 或者 seaJS（分別是基於 AMD 規範的模組化庫， 和基於 CMD 規範的模組化庫）。
ES6 引入了模組化，其設計思想是在編譯時就能確定模組的依賴關係，以及輸入和輸出的變數。
ES6 的模組化分為匯出（export） @與匯入（import）兩個模組。
建立api/user。js
1let getList = （） => {2 console。log（‘獲取資料列表’）3}45let save = （） => {6 console。log（‘儲存資料’）7}8export { getList， save }
建立component/user。js（注意：瀏覽器不支援很多ES6的高階功能，我們需要使用babel將其轉換成ES5，後面的課程將會介紹）
1import { getList， save } from “。。/api/user。js”2console。log（getList（））3console。log（save（））
