0.學習目标
了解電商行業
了解樂優商城項目結構
能獨立搭建項目基本架構
能參考使用ES6的新文法
1.了解電商行業
學習電商項目，自然要先了解這個行業，是以我們首先來聊聊電商行業
1.1.項目分類
主要從需求方、盈利模式、技術側重點這三個方面來看它們的不同
1.1.1.傳統項目
各種企業裡面用的管理系統（ERP、HR、OA、CRM、物流管理系統。。。。。。。）
需求方：公司、企業内部
盈利模式：項目本身賣錢
技術側重點：業務功能
1.1.2.網際網路項目
門戶網站、電商網站：baidu.com、qq.com、taobao.com、jd.com …
需求方：廣大使用者群體
盈利模式：虛拟币、增值服務、廣告收益…
技術側重點：網站性能、業務功能
而我們今天要聊的就是網際網路項目中的重要角色：電商
1.2.電商行業的發展
1.2.1.錢景
近年來，中國的電子商務快速發展，交易額連創新高，電子商務在各領域的應用不斷拓展和深化、相關服務業蓬勃發展、支撐體系不斷健全完善、創新的動力和能力不斷增強。電子商務正在與實體經濟深度融合，進入規模性發展階段，對經濟社會生活的影響不斷增大，正成為我國經濟發展的新引擎。
中國電子商務研究中心資料顯示，截止到 2012 年底，中國電子商務市場交易規模達 7.85萬億人民币，同比增長 30.83%。其中，B2B 電子商務交易額達 6.25 萬億，同比增長 27%。而 2011 年全年，中國電子商務市場交易額達 6 萬億人民币，同比增長 33%，占 GDP 比重上升到 13%；2012 年，電子商務占 GDP 的比重已經高達 15%。
1.2.2.資料
來看看雙十一的成交資料：
2016雙11開場30分鐘，創造每秒交易峰值17.5萬筆，每秒支付峰值12萬筆的新紀錄。菜鳥單日物流訂單量超過4.67億，創曆史新高。
1.2.3.技術特點
從上面的資料我們不僅要看到錢，更要看到背後的技術實力。正是得益于電商行業的高強度并發壓力，促使了BAT等巨頭們的技術進步。電商行業有些什麼特點呢？
技術範圍廣
技術新
高并發（分布式、靜态化技術、緩存技術、異步并發、池化、隊列）
高可用（叢集、負載均衡、限流、降級、熔斷）
資料量大
業務複雜
資料安全
1.3.常見電商模式
電商行業的一些常見模式：
B2C：商家對個人，如：亞馬遜、當當等
C2C平台：個人對個人，如：鹹魚、拍拍網、ebay
B2B平台：商家對商家，如：阿裡巴巴、八方資源網等
O2O：線上和線下結合，如：餓了麼、電影票、團購等
P2P：線上金融，貸款，如：網貸之家、人人聚财等。
B2C平台：天貓、京東、一号店等 1.4.一些專業術語
SaaS：軟體即服務
SOA：面向服務
RPC：遠端過程調用
RMI：遠端方法調用
PV：(page view)，即頁面浏覽量；
使用者每1次對網站中的每個網頁通路均被記錄1次。使用者對同一頁面的多次通路，通路量累計
UV：(unique visitor)，獨立訪客
指通路某個站點或點選某條新聞的不同IP位址的人數。在同一天内，uv隻記錄第一次進入網站的具有獨立IP的通路者，在同一天内再次通路該網站則不計數。 PV與帶寬：
計算帶寬大小需要關注兩個名額：峰值流量和頁面的平均大小。
計算公式是：網站帶寬= ( PV * 平均頁面大小（機關MB）* 8 )/統計時間（換算到秒） 為什麼要乘以8？
網站大小為機關是位元組(Byte)，而計算帶寬的機關是bit，1Byte=8bit
這個計算的是平均帶寬，高峰期還需要擴大一定倍數 PV、QPS、并發
QPS：每秒處理的請求數量。8000/s
比如你的程式處理一個請求平均需要0.1S，那麼1秒就可以處理10個請求。QPS自然就是10，多線程情況下，這個數字可能就會有所增加。
由PV和QPS如何需要部署的伺服器數量？
根據二八原則，80%的請求集中在20%的時間來計算峰值壓力：
（每日PV * 80%） / （3600s * 24 * 20%） * 每個頁面的請求數 = 每個頁面每秒的請求數量
然後除以伺服器的QPS值，即可計算得出需要部署的伺服器數量 1.5.項目開發流程
項目經理：管人
産品經理：設計需求原型
測試：
前端：大前端。node
後端：
移動端：
項目開發流程圖： 
公司現狀：
2.樂優商城介紹
2.1.項目介紹
樂優商城是一個全品類的電商購物網站（B2C）。
使用者可以線上購買商品、加入購物車、下單、秒殺商品
可以品論已購買商品
管理者可以在背景管理商品的上下架、促銷活動
管理者可以監控商品銷售狀況
客服可以在背景處理退款操作
希望未來3到5年可以支援千萬使用者的使用 2.2.系統架構
2.2.1.架構圖
樂優商城架構縮略圖：
2.2.2.系統架構解讀
整個樂優商城可以分為兩部分：背景管理系統、前台門戶系統。
背景管理：
背景系統主要包含以下功能：
商品管理，包括商品分類、品牌、商品規格等資訊的管理
銷售管理，包括訂單統計、訂單退款處理、促銷活動生成等
使用者管理，包括使用者控制、當機、解鎖等
權限管理，整個網站的權限控制，采用JWT鑒權方案，對使用者及API進行權限控制
統計，各種資料的統計分析展示
背景系統會采用前後端分離開發，而且整個背景管理系統會使用Vue.js架構搭建出單頁應用（SPA）。 預覽圖：
前台門戶
前台門戶面向的是客戶，包含與客戶互動的一切功能。例如：
搜尋商品
加入購物車
下單
評價商品等等
前台系統我們會使用Thymeleaf模闆引擎技術來完成頁面開發。出于SEO優化的考慮，我們将不采用單頁應用。 無論是前台還是背景系統，都共享相同的微服務叢集，包括：
商品微服務：商品及商品分類、品牌、庫存等的服務
搜尋微服務：實作搜尋功能
訂單微服務：實作訂單相關
購物車微服務：實作購物車相關功能
使用者中心：使用者的登入注冊等功能
Eureka注冊中心
Zuul網關服務
Spring Cloud Config配置中心
... 3.項目搭建
3.1.技術選型
前端技術：
基礎的HTML、CSS、JavaScript（基于ES6标準）
JQuery
Vue.js 2.0以及基于Vue的架構：Vuetify
前端建構工具：WebPack
前端安裝包工具：NPM
Vue腳手架：Vue-cli
Vue路由：vue-router
ajax架構：axios
基于Vue的富文本架構：quill-editor 後端技術：
基礎的SpringMVC、Spring 5.0和MyBatis3
Spring Boot 2.0.1版本
Spring Cloud 最新版 Finchley.RC1
Redis-4.0
RabbitMQ-3.4
Elasticsearch-5.6.8
nginx-1.10.2：
FastDFS - 5.0.8
MyCat
Thymeleaf 3.2.開發環境
為了保證開發環境的統一，希望每個人都按照我的環境來配置：
IDE：我們使用Idea 2017.3 版本
JDK：統一使用JDK1.8
項目建構：maven3.3.9以上版本即可
版本控制工具：git 3.3.域名
我們在開發的過程中，為了保證以後的生産、測試環境統一。盡量都采用域名來通路項目。
一級域名：www.leyou.com
二級域名：manage.leyou.com , api.leyou.com 我們可以通過switchhost工具來修改自己的host對應的位址，隻要把這些域名指向127.0.0.1，那麼跟你用localhost的效果是完全一樣的。
switchhost可以去課前資料尋找。
3.4.建立父工程
建立統一的父工程：leyou，用來管理依賴及其版本，注意是建立project，而不是moudle
填寫項目資訊：
注意：
父工程不需要代碼，隻是管理依賴，是以我們不選擇任何SpringCloud的依賴
跳過依賴選擇。
填寫儲存的位置資訊：
然後将pom檔案修改成我這個樣子：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.leyou.parent</groupId>
<artifactId>leyou</artifactId>
<version>1.0.0-SNAPSHOT</version>
<packaging>pom</packaging>
<name>leyou</name>
<description>Demo project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.1.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
<spring-cloud.version>Finchley.RC1</spring-cloud.version>
<mybatis.starter.version>1.3.2</mybatis.starter.version>
<mapper.starter.version>2.0.2</mapper.starter.version>
<druid.starter.version>1.1.9</druid.starter.version>
<mysql.version>5.1.32</mysql.version>
<pageHelper.starter.version>1.2.3</pageHelper.starter.version>
<leyou.latest.version>1.0.0-SNAPSHOT</leyou.latest.version>
<fastDFS.client.version>1.26.1-RELEASE</fastDFS.client.version>
</properties>
<dependencyManagement>
<dependencies>
<!-- springCloud -->
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-dependencies</artifactId>
<version>${spring-cloud.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
<!-- mybatis啟動器 -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>${mybatis.starter.version}</version>
</dependency>
<!-- 通用Mapper啟動器 -->
<dependency>
<groupId>tk.mybatis</groupId>
<artifactId>mapper-spring-boot-starter</artifactId>
<version>${mapper.starter.version}</version>
</dependency>
<!-- 分頁助手啟動器 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>${pageHelper.starter.version}</version>
</dependency>
<!-- mysql驅動 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
<!--FastDFS用戶端-->
<dependency>
<groupId>com.github.tobato</groupId>
<artifactId>fastdfs-client</artifactId>
<version>${fastDFS.client.version}</version>
</dependency>
</dependencies>
</dependencyManagement>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
<repositories>
<repository>
<id>spring-milestones</id>
<name>Spring Milestones</name>
<url>https://repo.spring.io/milestone</url>
<snapshots>
<enabled>false</enabled>
</snapshots>
</repository>
</repositories>
</project> 可以發現，我們在父工程中引入了SpringCloud等很多以後需要用到的依賴，以後建立的子工程就不需要自己引入了。
最後，删除自動生成的LeyouApplication啟動類、測試類以及application.properties檔案，我們不需要。 3.5.建立EurekaServer
3.5.1.建立工程
這個大家應該比較熟悉了。
我們的注冊中心，起名為：ly-registry
這次我們就不使用Spring提供的腳手架了。直接建立maven項目，自然會繼承父類的依賴：
選擇建立module：
選擇maven安裝，但是不要選擇骨架：
然後填寫項目坐标，我們的項目名稱為ly-registry:
選擇安裝目錄，因為是聚合項目，目錄應該是在父工程leyou的下面：
3.5.2.添加依賴
添加EurekaServer的依賴：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
<artifactId>leyou</artifactId>
<groupId>com.leyou.parent</groupId>
<version>1.0.0-SNAPSHOT</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<groupId>com.leyou.common</groupId>
<artifactId>ly-registry</artifactId>
<version>1.0.0-SNAPSHOT</version>
<dependencies>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-netflix-eureka-server</artifactId>
</dependency>
</dependencies>
</project> 3.5.3.編寫啟動類
@SpringBootApplication
@EnableEurekaServer
public class LyRegistry {
public static void main(String[] args) {
SpringApplication.run(LyRegistry.class, args);
}
} 3.5.4.配置檔案
server:
port: 10086
spring:
application:
name: ly-registry
eureka:
client:
fetch-registry: false
register-with-eureka: false
service-url:
defaultZone: http://127.0.0.1:${server.port}/eureka
server:
enable-self-preservation: false # 關閉自我保護
eviction-interval-timer-in-ms: 5000 # 每隔5秒進行一次服務清單清理 3.5.5.項目的結構：
目前，整個項目的結構如圖：
3.6.建立Zuul網關
3.6.1.建立工程
與上面類似，選擇maven方式建立Module，然後填寫項目名稱，我們命名為：ly-api-gateway
填寫儲存的目錄：
3.6.2.添加依賴
這裡我們需要添加Zuul和EurekaClient的依賴：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
<artifactId>leyou</artifactId>
<groupId>com.leyou.parent</groupId>
<version>1.0.0-SNAPSHOT</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<groupId>com.leyou.common</groupId>
<artifactId>ly-api-gateway</artifactId>
<version>1.0.0-SNAPSHOT</version>
<dependencies>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-netflix-zuul</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
</dependency>
<!--是springboot提供的微服務檢測接口，預設對外提供幾個接口：/info-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-actuator</artifactId>
</dependency>
</dependencies>
</project> 3.6.3.編寫啟動類
@SpringBootApplication
@EnableDiscoveryClient
@EnableZuulProxy
public class LyApiGateway {
public static void main(String[] args) {
SpringApplication.run(LyApiGateway.class, args);
}
} 3.6.4.配置檔案
server:
port: 10010
spring:
application:
name: api-gateway
eureka:
client:
service-url:
defaultZone: http://127.0.0.1:10086/eureka
registry-fetch-interval-seconds: 5
instance:
prefer-ip-address: true
ip-address: 127.0.0.1
instance-id: ${spring.application.name}:${server.port}
zuul:
prefix: /api # 添加路由字首
retryable: true
ribbon:
ConnectTimeout: 250 # 連接配接逾時時間(ms)
ReadTimeout: 2000 # 通信逾時時間(ms)
OkToRetryOnAllOperations: true # 是否對所有操作重試
MaxAutoRetriesNextServer: 1 # 同一服務不同執行個體的重試次數
MaxAutoRetries: 1 # 同一執行個體的重試次數
hystrix:
command:
default:
execution:
isolation:
thread:
timeoutInMillisecond: 10000 # 熔斷逾時時長：10000ms 3.6.5.項目結構
目前，leyou下有兩個子子產品：
ly-registry：服務的注冊中心（EurekaServer）
ly-api-gateway：服務網關（Zuul） 目前，服務的結構如圖所示：
截止到這裡，我們已經把基礎服務搭建完畢，為了便于開發，統一配置中心（ConfigServer）我們留待以後添加。
3.7.建立商品微服務
既然是一個全品類的電商購物平台，那麼核心自然就是商品。是以我們要搭建的第一個服務，就是商品微服務。其中會包含對于商品相關的一系列内容的管理，包括：
商品分類管理
品牌管理
商品規格參數管理
商品管理
庫存管理 我們先完成項目的搭建：
3.7.1.微服務的結構
因為與商品的品類相關，我們的工程命名為ly-item.
需要注意的是，我們的ly-item是一個微服務，那麼将來肯定會有其它系統需要來調用服務中提供的接口，是以肯定也會使用到接口中關聯的實體類。
是以這裡我們需要使用聚合工程，将要提供的接口及相關實體類放到獨立子工程中，以後别人引用的時候，隻需要知道坐标即可。 我們會在ly-item中建立兩個子工程：
ly-item-interface：主要是對外暴露的接口及相關實體類
ly-item-service：所有業務邏輯及内部使用接口 調用關系如圖所示：
3.7.2.建立父工程ly-item
依然是使用maven建構：
儲存的位置：
不需要任何依賴，我們可以把項目打包方式設定為pom
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
<artifactId>leyou</artifactId>
<groupId>com.leyou.parent</groupId>
<version>1.0.0-SNAPSHOT</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<groupId>com.leyou.service</groupId>
<artifactId>ly-item</artifactId>
<version>1.0.0-SNAPSHOT</version>
<!-- 打包方式為pom -->
<packaging>pom</packaging>
</project> 3.7.3.建立ly-item-interface
在ly-item工程上點選右鍵，選擇new > module:
依然是使用maven建構，注意父工程是ly-item：
注意：接下來填寫的目錄結構需要自己手動完成，儲存到ly-item下的ly-item-interface目錄中：
點選Finish完成。
此時的項目結構：
3.7.4.建立ly-item-service
與ly-item-interface類似，我們選擇在ly-item上右鍵，建立module，然後填寫項目資訊：
填寫存儲位置，是在/ly-item/ly-item-service目錄
點選Finish完成。
3.7.5.整個微服務結構
如圖所示：
我們打開ly-item的pom檢視，會發現ly-item-interface和ly-item-service都已經稱為module了：
3.7.6.添加依賴
接下來我們給ly-item-service中添加依賴：
思考一下我們需要什麼？
Eureka用戶端
web啟動器
mybatis啟動器
通用mapper啟動器
分頁助手啟動器
連接配接池，我們用預設的Hykira
mysql驅動 千萬不能忘了，我們自己也需要ly-item-interface中的實體類
這些依賴，我們在頂級父工程：leyou中已經添加好了。是以直接引入即可：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
<artifactId>ly-item</artifactId>
<groupId>com.leyou.service</groupId>
<version>1.0.0-SNAPSHOT</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<groupId>com.leyou.service</groupId>
<artifactId>ly-item-service</artifactId>
<version>1.0.0-SNAPSHOT</version>
<dependencies>
<!--Eureka用戶端-->
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-netflix-eureka-client</artifactId>
</dependency>
<!--web啟動器-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- mybatis啟動器 -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>${mybatis.starter.version}</version>
</dependency>
<!-- 通用Mapper啟動器 -->
<dependency>
<groupId>tk.mybatis</groupId>
<artifactId>mapper-spring-boot-starter</artifactId>
<version>${mapper.starter.version}</version>
</dependency>
<!-- 分頁助手啟動器 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>${pageHelper.starter.version}</version>
</dependency>
<!-- mysql驅動 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
<dependency>
<groupId>com.leyou.service</groupId>
<artifactId>ly-item-interface</artifactId>
<version>${leyou.latest.version}</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-actuator</artifactId>
</dependency>
</dependencies>
</project> ly-item-interface中需要什麼我們暫時不清楚，是以先不管。
整個結構：
3.7.7.編寫啟動和配置
在整個ly-item工程中，隻有ly-item-service是需要啟動的。是以在其中編寫啟動類即可：
@SpringBootApplication
@EnableDiscoveryClient
public class LyItemService {
public static void main(String[] args) {
SpringApplication.run(LyItemService.class, args);
}
} 然後是全局屬性檔案：
server:
port: 8081
spring:
application:
name: item-service
datasource:
url: jdbc:mysql://localhost:3306/heima
username: root
password: 123
hikari:
maximum-pool-size: 30
minimum-idle: 10
eureka:
client:
service-url:
defaultZone: http://127.0.0.1:10086/eureka
instance:
lease-renewal-interval-in-seconds: 5 # 每隔5秒發送一次心跳
lease-expiration-duration-in-seconds: 10 # 10秒不發送就過期
prefer-ip-address: true
ip-address: 127.0.0.1
instance-id: ${spring.application.name}:${server.port} 3.8.添加商品微服務的路由規則
既然商品微服務已經建立，接下來肯定要添加路由規則到Zuul中，我們不使用預設的路由規則。
zuul:
prefix: /api # 添加路由字首
retryable: true
routes:
item-service: /item/** # 将商品微服務映射到/item/** 3.9.啟動測試
我們分别啟動：
ly-registry，ly-api-gateway，ly-item-service 檢視Eureka面闆：
3.10.測試路由規則
為了測試路由規則是否暢通，我們是不是需要在item-service中編寫一個controller接口呢？
其實不需要，Spring提供了一個依賴：actuator
隻要我們添加了actuator的依賴，它就會為我們生成一系列的通路接口：
/info
/health
/refresh
... 添加依賴：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-actuator</artifactId>
</dependency> 重新開機後通路Eureka控制台：
滑鼠懸停在item-service上，會顯示一個位址：
這就是actuator提供的接口，我們點選通路：
因為我們沒有添加資訊，是以是一個空的json，但是可以肯定的是：我們能夠通路到item-service了。
接下來我們通過路由通路試試，根據路由規則，我們需要通路的位址是：
http://127.0.0.1:10010/api/item/actuator/info
3.11.通用工具子產品
有些工具或通用的約定内容，我們希望各個服務共享，是以需要建立一個工具子產品：ly-common
使用maven來建構module：
位置資訊：
結構：
目前還不需要編碼。
4、ES6 文法指南
後端項目搭建完畢，接下來就是前端頁面了。不過在這之前需要一些準備工作。我們需要學習ES6的文法标準。
什麼是ES6？就是ECMAScript第6版标準。
4.1.什麼是ECMAScript？
來看下前端的發展曆程：
web1.0時代：
最初的網頁以HTML為主，是純靜态的網頁。網頁是隻讀的，資訊流隻能從服務的到用戶端單向流通。開發人員也隻關心頁面的樣式和内容即可。
web2.0時代：
1995年，網景工程師Brendan Eich 花了10天時間設計了JavaScript語言。
1996年，微軟釋出了JScript，其實是JavaScript的逆向工程實作。
1997年，為了統一各種不同script腳本語言，ECMA（歐洲計算機制造商協會）以JavaScript為基礎，制定了ECMAscript标準規範。JavaScript和JScript都是ECMAScript的标準實作者，随後各大浏覽器廠商紛紛實作了ECMAScript标準。
是以，ECMAScript是浏覽器腳本語言的規範，而各種我們熟知的js語言，如JavaScript則是規範的具體實作。 4.2.ECMAScript的快速發展
而後，ECMAScript就進入了快速發展期。
1998年6月，ECMAScript 2.0 釋出。
1999年12月，ECMAScript 3.0 釋出。這時，ECMAScript 規範本身也相對比較完善和穩定了，但是接下來的事情，就比較悲劇了。
2007年10月。。。。ECMAScript 4.0 草案釋出。
這次的新規範，曆時頗久，規範的新内容也有了很多争議。在制定ES4的時候，是分成了兩個工作組同時工作的。
一邊是以 Adobe, Mozilla, Opera 和 Google為主的 ECMAScript 4 工作組。
一邊是以 Microsoft 和 Yahoo 為主的 ECMAScript 3.1 工作組。
ECMAScript 4 的很多主張比較激進，改動較大。而 ECMAScript 3.1 則主張小幅更新。最終經過 TC39 的會議，決定将一部分不那麼激進的改動保留釋出為 ECMAScript 3.1，而ES4的内容，則延續到了後來的ECMAScript5和6版本中
2009年12月，ECMAScript 5 釋出。
2011年6月，ECMAScript 5.1 釋出。
2015年6月，ECMAScript 6，也就是 ECMAScript 2015 釋出了。 并且從 ECMAScript 6 開始，開始采用年号來做版本。即 ECMAScript 2015，就是ECMAScript6。
4.3.ES5和6的一些新特性
我們這裡隻把一些常用的進行學習，更詳細的大家參考：阮一峰的ES6教程
4.3.1.let 和 const 指令
var
之前，js定義變量隻有一個關鍵字：var
var有一個問題，就是定義的變量有時會莫名奇妙的成為全局變量。
例如這樣的一段代碼：
for(var i = 0; i < 5; i++){
console.log(i);
}
console.log("循環外：" + i) 你猜下列印的結果是什麼？
let
let所聲明的變量，隻在let指令所在的代碼塊内有效。
我們把剛才的var改成let試試：
for(let i = 0; i < 5; i++){
console.log(i);
}
console.log("循環外：" + i) 結果：
const
const聲明的變量是常量，不能被修改
4.3.2.字元串擴充
新的API
ES6為字元串擴充了幾個新的API：
includes()：傳回布爾值，表示是否找到了參數字元串。
startsWith()：傳回布爾值，表示參數字元串是否在原字元串的頭部。
endsWith()：傳回布爾值，表示參數字元串是否在原字元串的尾部。 實驗一下：
字元串模闆
ES6中提供了`來作為字元串模闆标記。我們可以這麼玩：
在兩個`之間的部分都會被作為字元串的值，不管你任意換行，甚至加入js腳本
鍵盤是的1的左側，tab的上側，esc的正下方
4.3.3.解構表達式
數組解構
比如有一個數組：
let arr = [1,2,3] 我想擷取其中的值，隻能通過角标。ES6可以這樣：
const [x,y,z] = arr;// x，y，z将與arr中的每個位置對應來取值
// 然後列印
console.log(x,y,z); 結果：
對象解構
例如有個person對象：
const person = {
name:"jack",
age:21,
language: ['java','js','css']
} 我們可以這麼做：
// 解構表達式擷取值
const {name,age,language} = person;
// 列印
console.log(name);
console.log(age);
console.log(language); 結果：
如過想要用其它變量接收，需要額外指定别名：
{name:n}：name是person中的屬性名，冒号後面的n是解構後要指派給的變量。 4.3.4.函數優化
函數參數預設值
在ES6以前，我們無法給一個函數參數設定預設值，隻能采用變通寫法：
function add(a , b) {
// 判斷b是否為空，為空就給預設值1
b = b || 1;
return a + b;
}
// 傳一個參數
console.log(add(10)); 現在可以這麼寫：
function add(a , b = 1) {
return a + b;
}
// 傳一個參數
console.log(add(10)); 箭頭函數
ES6中定義函數的簡寫方式：
一個參數時：
var print = function (obj) {
console.log(obj);
}
// 簡寫為：
var print2 = obj => console.log(obj); 多個參數：
// 兩個參數的情況：
var sum = function (a , b) {
return a + b;
}
// 簡寫為：
var sum2 = (a,b) => a+b; 代碼不止一行，可以用{}括起來
var sum3 = (a,b) => {
return a + b;
} 對象的函數屬性簡寫
比如一個Person對象，裡面有eat方法：
let person = {
name: "jack",
// 以前：
eat: function (food) {
console.log(this.name + "在吃" + food);
},
// 箭頭函數版：
eat2: food => console.log(person.name + "在吃" + food),// 這裡拿不到this
// 簡寫版：
eat3(food){
console.log(this.name + "在吃" + food);
}
} 箭頭函數結合解構表達式
比如有一個函數：
const person = {
name:"jack",
age:21,
language: ['java','js','css']
}
function hello(person) {
console.log("hello," + person.name)
} 如果用箭頭函數和解構表達式
var hi = ({name}) => console.log("hello," + name); 4.3.5.map和reduce
數組中新增了map和reduce方法。
map
map()：接收一個函數，将原數組中的所有元素用這個函數處理後放入新數組傳回。
舉例：有一個字元串數組，我們希望轉為int數組
let arr = ['1','20','-5','3'];
console.log(arr)
arr = arr.map(s => parseInt(s));
console.log(arr) reduce
reduce()：接收一個函數（必須）和一個初始值（可選），該函數接收兩個參數：
第一個參數是上一次reduce處理的結果
第二個參數是數組中要處理的下一個元素
reduce()會從左到右依次把數組中的元素用reduce處理，并把處理的結果作為下次reduce的第一個參數。如果是第一次，會把前兩個元素作為計算參數，或者把使用者指定的初始值作為起始參數
舉例：
const arr = [1,20,-5,3] 沒有初始值：
指定初始值：
4.3.6.promise
所謂Promise，簡單說就是一個容器，裡面儲存着某個未來才會結束的事件（通常是一個異步操作）的結果。從文法上說，Promise 是一個對象，從它可以擷取異步操作的消息。Promise 提供統一的 API，各種異步操作都可以用同樣的方法進行處理。
感覺跟java的Future類很像啊，有木有！
我們可以通過Promise的構造函數來建立Promise對象，并在内部封裝一個異步執行的結果。
文法：
const promise = new Promise(function(resolve, reject) {
// ... 執行異步操作
if (/* 異步操作成功 */){
resolve(value);// 調用resolve，代表Promise将傳回成功的結果
} else {
reject(error);// 調用reject，代表Promise會傳回失敗結果
}
}); 這樣，在promise中就封裝了一段異步執行的結果。
如果我們想要等待異步執行完成，做一些事情，我們可以通過promise的then方法來實作,文法：
promise.then(function(value){
// 異步執行成功後的回調
}); 如果想要處理promise異步執行失敗的事件，還可以跟上catch：
promise.then(function(value){
// 異步執行成功後的回調
}).catch(function(error){
// 異步執行失敗後的回調
}) 示例：
const p = new Promise(function (resolve, reject) {
// 這裡我們用定時任務模拟異步
setTimeout(() => {
const num = Math.random();
// 随機傳回成功或失敗
if (num < 0.5) {
resolve("成功！num:" + num)
} else {
reject("出錯了！num:" + num)
}
}, 300)
})
// 調用promise
p.then(function (msg) {
console.log(msg);
}).catch(function (msg) {
console.log(msg);
}) 結果：
4.3.7.set和map（了解）
ES6提供了Set和Map的資料結構。
Set，本質與數組類似。不同在于Set中隻能儲存不同元素，如果元素相同會被忽略。跟java很像吧。
構造函數：
// Set構造函數可以接收一個數組或空
let set = new Set();
set.add(1);// [1]
// 接收數組
let set2 = new Set([2,3,4,5,5]);// 得到[2,3,4,5] 普通方法：
set.add(1);// 添加
set.clear();// 清空
set.delete(2);// 删除指定元素
set.has(2); // 判斷是否存在
set.keys();// 傳回所有key
set.values();// 傳回所有值
set.entries();// 傳回鍵值對集合
// 因為set沒有鍵值對，所有其keys、values、entries方法傳回值一樣的。
set.size; // 元素個數。是屬性，不是方法。 map，本質是與Object類似的結構。不同在于，Object強制規定key隻能是字元串。而Map結構的key可以是任意對象。即：
object是 集合
map是集合
構造函數：
// map接收一個數組，數組中的元素是鍵值對數組
const map = new Map([
['key1','value1'],
['key2','value2'],
])
// 或者接收一個set
const set = new Set([
['key1','value1'],
['key2','value2'],
])
const map2 = new Map(set)
// 或者其它map
const map3 = new Map(map); 方法：
4.3.8.子產品化
4.3.8.1.什麼是子產品化
子產品化就是把代碼進行拆分，友善重複利用。類似java中的導包：要使用一個包，必須先導包。
而JS中沒有包的概念，換來的是 子產品。
子產品功能主要由兩個指令構成：export和import。
export指令用于規定子產品的對外接口，
import指令用于導入其他子產品提供的功能。 4.3.8.2.export
比如我定義一個js檔案:hello.js，裡面有一個對象：
const util = {
sum(a,b){
return a + b;
}
} 我可以使用export将這個對象導出：
const util = {
sum(a,b){
return a + b;
}
}
export util; 當然，也可以簡寫為：
export const util = {
sum(a,b){
return a + b;
}
} export不僅可以導出對象，一切JS變量都可以導出。比如：基本類型變量、函數、數組、對象。
當要導出多個值時，還可以簡寫。比如我有一個檔案：user.js：
var name = "jack"
var age = 21
export {name,age} 省略名稱
上面的導出代碼中，都明确指定了導出的變量名，這樣其它人在導入使用時就必須準确寫出變量名，否則就會出錯。
是以js提供了default關鍵字，可以對導出的變量名進行省略
例如：
// 無需聲明對象的名字
export default {
sum(a,b){
return a + b;
}
} 這樣，當使用者導入時，可以任意起名字
4.3.8.3.import
使用export指令定義了子產品的對外接口以後，其他 JS 檔案就可以通過import指令加載這個子產品。
例如我要使用上面導出的util：
// 導入util
import util from 'hello.js'
// 調用util中的屬性
util.sum(1,2) 要批量導入前面導出的name和age：
import {name, age} from 'user.js'
console.log(name + " , 今年"+ age +"歲了") 但是上面的代碼暫時無法測試，因為浏覽器目前還不支援ES6 的導入和導出功能。除非借助于工具，把ES6 的文法進行編譯降級到ES5，比如Babel-cli工具
我們暫時不做測試，大家了解即可。
4.3.9.對象擴充
ES6給Object拓展了許多新的方法，如：
keys(obj)：擷取對象的所有key形成的數組
values(obj)：擷取對象的所有value形成的數組
entries(obj)：擷取對象的所有key和value形成的二維數組。格式：[[k1,v1],[k2,v2],...]
assian(dest, ...src) ：将多個src對象的值 拷貝到 dest中（淺拷貝）。 find(callback)：把數組中的元素逐個傳遞給函數callback執行，如果傳回true，則傳回該元素
findIndex(callback)：與find類似，不過傳回的是品牌到的元素的索引
includes（callback）：與find類似，如果比對到元素，則傳回true，代表找到了。