樂優商場開發第四天筆記
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:每秒處理的請求數量。
-
比如你的程式處理一個請求平均需要0.1S,那麼1秒就可以處理10個請求。QPS自然就是10,多執行緒情況下,這個數字可能就會有所增加。
-
-
由PV和QPS如何需要部署的伺服器數量?
-
根據二八原則,80%的請求集中在20%的時間來計算峰值壓力:
-
(每日PV * 80%) / (3600s * 24 * 20%) * 每個頁面的請求數 = 每個頁面每秒的請求數量
-
然後除以伺服器的QPS值,即可計算得出需要部署的伺服器數量
-
-
1.5.專案開發流程
專案經理:管人
產品經理:設計需求原型
測試:
前端:大前端。
後端:
移動端:
專案開發流程圖:
公司現狀:
2.樂優商城介紹
2.1.專案介紹
-
樂優商城是一個全品類的電商購物網站(B2C)。
-
使用者可以線上購買商品、加入購物車、下單
-
可以評論已購買商品
-
管理員可以在後臺管理商品的上下架、促銷活動
-
管理員可以監控商品銷售狀況
-
客服可以在後臺處理退款操作
-
希望未來3到5年可以支援千萬使用者的使用
2.2.系統架構
2.2.1.架構圖
樂優商城架構縮圖,大圖請參考課前資料:
2.2.2.系統架構解讀
整個樂優商城可以分為兩部分:後臺管理系統、前臺門戶系統。
-
後臺管理:
-
後臺系統主要包含以下功能:
-
商品管理,包括商品分類、品牌、商品規格等資訊的管理
-
銷售管理,包括訂單統計、訂單退款處理、促銷活動生成等
-
使用者管理,包括使用者控制、凍結、解鎖等
-
許可權管理,整個網站的許可權控制,採用JWT鑑權方案,對使用者及API進行許可權控制
-
統計,各種資料的統計分析展示
-
-
後臺系統會採用前後端分離開發,而且整個後臺管理系統會使用Vue.js框架搭建出單頁應用(SPA)。
-
-
前臺門戶
-
前臺門戶面向的是客戶,包含與客戶互動的一切功能。例如:
-
搜尋商品
-
加入購物車
-
下單
-
評價商品等等
-
-
前臺系統我們會使用Thymeleaf模板引擎技術來完成頁面開發。出於SEO優化的考慮,我們將不採用單頁應用。
-
無論是前臺還是後臺系統,都共享相同的微服務叢集,包括:
-
商品微服務:商品及商品分類、品牌、庫存等的服務
-
搜尋微服務:實現搜尋功能
-
訂單微服務:實現訂單相關
-
購物車微服務:實現購物車相關功能
-
使用者中心:使用者的登入註冊等功能
-
Eureka註冊中心
-
Zuul閘道器服務
-
...
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.x和MyBatis3
-
Spring Boot 2.0.4版本
-
Spring Cloud 最新版 Finchley.Release
-
Redis-4.0
-
RabbitMQ-3.4
-
Elasticsearch-6.3
-
nginx-1.14.2
-
FastDFS - 5.0.8
-
MyCat
-
Thymeleaf
3.2.開發環境
為了保證開發環境的統一,希望每個人都按照我的環境來配置:
-
IDE:我們使用Idea 2017.3 版本
-
JDK:統一使用JDK1.8
-
專案構建:maven3.3.9以上版本即可(3.5.2)
-
版本控制工具:git
idea大家可以在我的課前資料中找到。另外,使用幫助大家可以參考課前資料的《idea使用指南.md》
3.3.域名
我們在開發的過程中,為了保證以後的生產、測試環境統一。儘量都採用域名來訪問專案。
一級域名:www.leyou.com
二級域名:manage.leyou.com , api.leyou.com
我們可以通過switchhost工具來修改自己的host對應的地址,只要把這些域名指向127.0.0.1,那麼跟你用localhost的效果是完全一樣的。
switchhost可以去課前資料尋找。
3.4.建立父工程
建立統一的父工程:leyou,用來管理依賴及其版本,注意是建立project,而不是module
填寫專案資訊:
填寫儲存的位置資訊:
然後將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.3.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.RELEASE</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> </project>
可以發現,我們在父工程中引入了SpringCloud等,很多以後需要用到的依賴,以後建立的子工程就不需要自己引入了。
可以刪除src目錄,工程結構如下:
3.5.建立EurekaServer
3.5.1.建立工程
我們的註冊中心,起名為:leyou-registry
選擇新建module:
不要選擇骨架:
然後填寫專案座標,我們的專案名稱為leyou-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>leyou-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 LeyouRegistryApplication { public static void main(String[] args) { SpringApplication.run(LeyouRegistryApplication.class, args); } }
3.5.4.配置檔案
server: port: 10086 spring: application: name: leyou-registry eureka: client: service-url: defaultZone: http://127.0.0.1:${server.port}/eureka register-with-eureka: false # 把自己註冊到eureka服務列表 fetch-registry: false # 拉取eureka服務資訊 server: enable-self-preservation: false # 關閉自我保護 eviction-interval-timer-in-ms: 5000 # 每隔5秒鐘,進行一次服務列表的清理
3.5.5.專案的結構
目前,整個專案的結構如圖:
3.6.建立Zuul閘道器
3.6.1.建立工程
與上面類似,選擇maven方式建立Module,然後填寫專案名稱,我們命名為:leyou-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>leyou-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提供微服務檢測介面,預設對外提供幾個介面 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-actuator</artifactId> </dependency> </dependencies> </project>
3.6.3.編寫啟動類
@SpringBootApplication @EnableDiscoveryClient @EnableZuulProxy public class LeyouGatewayApplication { public static void main(String[] args) { SpringApplication.run(LeyouGatewayApplication.class, args); } }
3.6.4.配置檔案
server: port: 10010 spring: application: name: leyou-gateway eureka: client: registry-fetch-interval-seconds: 5 service-url: defaultZone: http://127.0.0.1:10086/eureka instance: prefer-ip-address: true ip-address: 127.0.0.1 instance-id: ${spring.application.name}:${server.port} zuul: prefix: /api # 路由路徑字首 hystrix: command: default: execution: isolation: thread: timeoutInMillisecond: 10000 # 熔斷超時時長:10000ms
3.6.5.專案結構
目前,leyou下有兩個子模組:
-
leyou-registry:服務的註冊中心(EurekaServer)
-
leyou-gateway:服務閘道器(Zuul)
目前,服務的結構如圖所示:
截止到這裡,我們已經把基礎服務搭建完畢,為了便於開發,統一配置中心(ConfigServer)我們留待以後新增。
3.7.建立商品微服務
既然是一個全品類的電商購物平臺,那麼核心自然就是商品。因此我們要搭建的第一個服務,就是商品微服務。其中會包含對於商品相關的一系列內容的管理,包括:
-
商品分類管理
-
品牌管理
-
商品規格引數管理
-
商品管理
-
庫存管理
3.7.1.微服務的結構
因為與商品的品類相關,我們的工程命名為leyou-item
.
需要注意的是,我們的leyou-item是一個微服務,那麼將來肯定會有其它系統需要來呼叫服務中提供的介面,獲取的介面資料,也需要對應的實體類來封裝,因此肯定也會使用到介面中關聯的實體類。
因此這裡我們需要使用聚合工程,將要提供的介面及相關實體類放到獨立子工程中,以後別人引用的時候,只需要知道座標即可。
我們會在leyou-item中建立兩個子工程:
-
leyou-item-interface:主要是對外暴露的介面及相關實體類
-
leyou-item-service:所有業務邏輯及內部使用介面
呼叫關係如圖所示:
3.7.2.leyou-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.item</groupId> <artifactId>leyou-item</artifactId> <version>1.0.0-SNAPSHOT</version> <!-- 打包方式為pom --> <packaging>pom</packaging> </project>
3.7.3.leyou-item-interface
在leyou-item工程上點選右鍵,選擇new --> module:
依然是使用maven構建,注意父工程是leyou-item:
注意:目錄結構,儲存到leyou-item
下的leyou-item-interface
目錄中:
點選Finish完成。
此時的專案結構:
3.7.4.leyou-item-service
與leyou-item-interface
類似,我們選擇在leyou-item
上右鍵,新建module,然後填寫專案資訊:
填寫儲存位置
點選Finish完成。
3.7.5.整個微服務結構
如圖所示:
我們開啟leyou-item的pom檢視,會發現leyou-item-interface和leyou-item-service都已經成為module了:
可以刪除leyou-item工程的src目錄
3.7.6.新增依賴
接下來我們給leyou-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>leyou-item</artifactId> <groupId>com.leyou.item</groupId> <version>1.0.0-SNAPSHOT</version> </parent> <modelVersion>4.0.0</modelVersion> <groupId>com.leyou.item</groupId> <artifactId>leyou-item-service</artifactId> <version>1.0.0-SNAPSHOT</version> <dependencies> <!-- web啟動器 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- eureka客戶端 --> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-netflix-eureka-client</artifactId> </dependency> <!-- mybatis的啟動器 --> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> </dependency> <!-- 通用mapper啟動器 --> <dependency> <groupId>tk.mybatis</groupId> <artifactId>mapper-spring-boot-starter</artifactId> </dependency> <!-- 分頁助手啟動器 --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> </dependency> <!-- jdbc啟動器 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-jdbc</artifactId> </dependency> <!-- mysql驅動 --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> </dependency> <dependency> <groupId>com.leyou.item</groupId> <artifactId>leyou-item-interface</artifactId> <version>1.0.0-SNAPSHOT</version> </dependency> <!-- springboot檢測服務啟動器 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-actuator</artifactId> </dependency> </dependencies> </project>
leyou-item-interface中需要什麼我們暫時不清楚,所以先不管。以後需要什麼依賴,再引入。
3.7.7.編寫啟動和配置
在整個leyou-item工程
中,只有leyou-item-service
是需要啟動的。因此在其中編寫啟動類即可:
@SpringBootApplication @EnableDiscoveryClient public class LeyouItemServiceApplication { public static void main(String[] args) { SpringApplication.run(LeyouItemServiceApplication.class, args); } }
然後是全域性屬性檔案:
server: port: 8081 spring: application: name: item-service datasource: url: jdbc:mysql://localhost:3306/leyou username: root password: root hikari: max-lifetime: 28830000 # 一個連線的生命時長(毫秒),超時而且沒被使用則被釋放(retired),預設:30分鐘,建議設定比資料庫超時時長少30秒,參考MySQL wait_timeout引數(show variables like '%timeout%';) maximum-pool-size: 9 # 連線池中允許的最大連線數。預設值:10;推薦的公式:((core_count * 2) + effective_spindle_count) eureka: client: server_url: defaultZone: http://127.0.0.1:10086/eureka instance: lease-renewal-interval-in-seconds: 5 # 5秒鐘傳送一次心跳 lease-expiration-duration-in-seconds: 10 # 10秒不傳送就過期
3.8.新增商品微服務的路由規則
既然商品微服務已經建立,接下來肯定要新增路由規則到Zuul中,我們不使用預設的路由規則。
修改leyou-gateway工程的application.yml配置檔案:
zuul: prefix: /api # 路由路徑字首 routes: item-service: /item/** # 商品微服務的對映路徑
3.9.啟動測試
我們分別啟動:leyou-registry,leyou-gateway,leyou-item-service
檢視Eureka面板:
3.10.測試路由規則
為了測試路由規則是否暢通,我們是不是需要在item-service中編寫一個controller介面呢?
其實不需要,SpringBoot提供了一個依賴: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.通用工具模組
有些工具或通用的約定內容,我們希望各個服務共享,因此需要建立一個工具模組:leyou-common
右鍵leyou工程,使用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.0 工作組。
-
一邊是以 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。 它的目標,是使得 JavaScript 語言可以用來編寫複雜的大型應用程式,成為企業級開發語言。
4.3.ES5和6的一些新特性
我們這裡只把一些常用的進行學習,更詳細的大家參考:阮一峰的ES6教程
建立一個空的html頁面:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <script> </script> <body> </body> </html>
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指令碼
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,各種非同步操作都可以用同樣的方法進行處理。
我們可以通過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是 <string,object>集合
-
map是<object,object>集合
建構函式:
// 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中(淺拷貝)。
4.3.10.陣列擴充套件
ES6給陣列新增了許多方法:
-
find(callback):陣列例項的find方法,用於找出第一個符合條件的陣列成員。它的引數是一個回撥函式,所有陣列成員依次執行該回調函式,直到找出第一個返回值為true的成員,然後返回該成員。如果沒有符合條件的成員,則返回undefined。
-
findIndex(callback):陣列例項的findIndex方法的用法與find方法非常類似,返回第一個符合條件的陣列成員的位置,如果所有成員都不符合條件,則返回-1。
-
includes(陣列元素):與find類似,如果匹配到元素,則返回true,代表找到了。