當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

04-乐优商城项目搭建

發(fā)布時間：2023/12/10 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 04-乐优商城项目搭建小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

0.學(xué)習(xí)目標(biāo)

了解電商行業(yè)
了解樂優(yōu)商城項目結(jié)構(gòu)
能獨立搭建項目基本框架
能參考使用ES6的新語法

1.了解電商行業(yè)

學(xué)習(xí)電商項目，自然要先了解這個行業(yè)，所以我們首先來聊聊電商行業(yè)

1.1.項目分類

主要從需求方、盈利模式、技術(shù)側(cè)重點這三個方面來看它們的不同

1.1.1.傳統(tǒng)項目

各種企業(yè)里面用的管理系統(tǒng)（ERP、HR、OA、CRM、物流管理系統(tǒng)。。。。。。。）

需求方：公司、企業(yè)內(nèi)部
盈利模式：項目本身賣錢
技術(shù)側(cè)重點：業(yè)務(wù)功能

1.1.2.互聯(lián)網(wǎng)項目

門戶網(wǎng)站、電商網(wǎng)站：baidu.com、qq.com、taobao.com、jd.com ......

需求方：廣大用戶群體
盈利模式：虛擬幣、增值服務(wù)、廣告收益......
技術(shù)側(cè)重點：網(wǎng)站性能、業(yè)務(wù)功能

而我們今天要聊的就是互聯(lián)網(wǎng)項目中的重要角色：電商

1.2.電商行業(yè)的發(fā)展

1.2.1.錢景

近年來，中國的電子商務(wù)快速發(fā)展，交易額連創(chuàng)新高，電子商務(wù)在各領(lǐng)域的應(yīng)用不斷拓展和深化、相關(guān)服務(wù)業(yè)蓬勃發(fā)展、支撐體系不斷健全完善、創(chuàng)新的動力和能力不斷增強。電子商務(wù)正在與實體經(jīng)濟(jì)深度融合，進(jìn)入規(guī)模性發(fā)展階段，對經(jīng)濟(jì)社會生活的影響不斷增大，正成為我國經(jīng)濟(jì)發(fā)展的新引擎。

中國電子商務(wù)研究中心數(shù)據(jù)顯示，截止到 2012 年底，中國電子商務(wù)市場交易規(guī)模達(dá) 7.85萬億人民幣，同比增長 30.83%。其中，B2B 電子商務(wù)交易額達(dá) 6.25 萬億，同比增長 27%。而 2011 年全年，中國電子商務(wù)市場交易額達(dá) 6 萬億人民幣，同比增長 33%，占 GDP 比重上升到 13%；2012 年，電子商務(wù)占 GDP 的比重已經(jīng)高達(dá) 15%。

1.2.2.數(shù)據(jù)

來看看雙十一的成交數(shù)據(jù)：

2016雙11開場30分鐘，創(chuàng)造每秒交易峰值17.5萬筆，每秒支付峰值12萬筆的新紀(jì)錄。菜鳥單日物流訂單量超過4.67億，創(chuàng)歷史新高。

1.2.3.技術(shù)特點

從上面的數(shù)據(jù)我們不僅要看到錢，更要看到背后的技術(shù)實力。正是得益于電商行業(yè)的高強度并發(fā)壓力，促使了BAT等巨頭們的技術(shù)進(jìn)步。電商行業(yè)有些什么特點呢？

技術(shù)范圍廣
技術(shù)新
高并發(fā)（分布式、靜態(tài)化技術(shù)、緩存技術(shù)、異步并發(fā)、池化、隊列）
高可用（集群、負(fù)載均衡、限流、降級、熔斷）
數(shù)據(jù)量大
業(yè)務(wù)復(fù)雜
數(shù)據(jù)安全

1.3.常見電商模式

電商行業(yè)的一些常見模式：

B2C：商家對個人，如：亞馬遜、當(dāng)當(dāng)?shù)?/p>
C2C平臺：個人對個人，如：咸魚、拍拍網(wǎng)、ebay
B2B平臺：商家對商家，如：阿里巴巴、八方資源網(wǎng)等
O2O：線上和線下結(jié)合，如：餓了么、電影票、團(tuán)購等
P2P：在線金融，貸款，如：網(wǎng)貸之家、人人聚財?shù)取?/p>
B2C平臺：天貓、京東、一號店等

1.4.一些專業(yè)術(shù)語

SaaS：軟件即服務(wù)
SOA：面向服務(wù)
RPC：遠(yuǎn)程過程調(diào)用
RMI：遠(yuǎn)程方法調(diào)用
PV：(page view)，即頁面瀏覽量；

用戶每1次對網(wǎng)站中的每個網(wǎng)頁訪問均被記錄1次。用戶對同一頁面的多次訪問，訪問量累計
UV：(unique visitor)，獨立訪客

指訪問某個站點或點擊某條新聞的不同IP地址的人數(shù)。在同一天內(nèi)，uv只記錄第一次進(jìn)入網(wǎng)站的具有獨立IP的訪問者，在同一天內(nèi)再次訪問該網(wǎng)站則不計數(shù)。
PV與帶寬：
- 計算帶寬大小需要關(guān)注兩個指標(biāo)：峰值流量和頁面的平均大小。
- 計算公式是：網(wǎng)站帶寬= ( PV * 平均頁面大小（單位MB）* 8 )/統(tǒng)計時間（換算到秒）
- 為什么要乘以8？
  - 網(wǎng)站大小為單位是字節(jié)(Byte)，而計算帶寬的單位是bit，1Byte=8bit
- 這個計算的是平均帶寬，高峰期還需要擴(kuò)大一定倍數(shù)
PV、QPS、并發(fā)
- QPS：每秒處理的請求數(shù)量。8000/s
  - 比如你的程序處理一個請求平均需要0.1S，那么1秒就可以處理10個請求。QPS自然就是10，多線程情況下，這個數(shù)字可能就會有所增加。
- 由PV和QPS如何需要部署的服務(wù)器數(shù)量？
  - 根據(jù)二八原則，80%的請求集中在20%的時間來計算峰值壓力：
  - （每日PV * 80%） / （3600s * 24 * 20%） * 每個頁面的請求數(shù) = 每個頁面每秒的請求數(shù)量
  - 然后除以服務(wù)器的QPS值，即可計算得出需要部署的服務(wù)器數(shù)量

1.5.項目開發(fā)流程

項目經(jīng)理：管人

產(chǎn)品經(jīng)理：設(shè)計需求原型

測試：

前端：大前端。node

后端：

移動端：

項目開發(fā)流程圖：

公司現(xiàn)狀：

2.樂優(yōu)商城介紹

2.1.項目介紹

樂優(yōu)商城是一個全品類的電商購物網(wǎng)站（B2C）。
用戶可以在線購買商品、加入購物車、下單、秒殺商品
可以品論已購買商品
管理員可以在后臺管理商品的上下架、促銷活動
管理員可以監(jiān)控商品銷售狀況
客服可以在后臺處理退款操作
希望未來3到5年可以支持千萬用戶的使用

2.2.系統(tǒng)架構(gòu)

2.2.1.架構(gòu)圖

樂優(yōu)商城架構(gòu)縮略圖，大圖請參考課前資料：

2.2.2.系統(tǒng)架構(gòu)解讀

整個樂優(yōu)商城可以分為兩部分：后臺管理系統(tǒng)、前臺門戶系統(tǒng)。

后臺管理：
- 后臺系統(tǒng)主要包含以下功能：
  - 商品管理，包括商品分類、品牌、商品規(guī)格等信息的管理
  - 銷售管理，包括訂單統(tǒng)計、訂單退款處理、促銷活動生成等
  - 用戶管理，包括用戶控制、凍結(jié)、解鎖等
  - 權(quán)限管理，整個網(wǎng)站的權(quán)限控制，采用JWT鑒權(quán)方案，對用戶及API進(jìn)行權(quán)限控制
  - 統(tǒng)計，各種數(shù)據(jù)的統(tǒng)計分析展示
- 后臺系統(tǒng)會采用前后端分離開發(fā)，而且整個后臺管理系統(tǒng)會使用Vue.js框架搭建出單頁應(yīng)用（SPA）。
- 預(yù)覽圖：
?
前臺門戶
- 前臺門戶面向的是客戶，包含與客戶交互的一切功能。例如：
  - 搜索商品
  - 加入購物車
  - 下單
  - 評價商品等等
- 前臺系統(tǒng)我們會使用Thymeleaf模板引擎技術(shù)來完成頁面開發(fā)。出于SEO優(yōu)化的考慮，我們將不采用單頁應(yīng)用。
?

?

無論是前臺還是后臺系統(tǒng)，都共享相同的微服務(wù)集群，包括：

商品微服務(wù)：商品及商品分類、品牌、庫存等的服務(wù)
搜索微服務(wù)：實現(xiàn)搜索功能
訂單微服務(wù)：實現(xiàn)訂單相關(guān)
購物車微服務(wù)：實現(xiàn)購物車相關(guān)功能
用戶中心：用戶的登錄注冊等功能
Eureka注冊中心
Zuul網(wǎng)關(guān)服務(wù)
Spring Cloud Config配置中心
...

3.項目搭建

3.1.技術(shù)選型

前端技術(shù)：

基礎(chǔ)的HTML、CSS、JavaScript（基于ES6標(biāo)準(zhǔn)）
JQuery
Vue.js 2.0以及基于Vue的框架：Vuetify
前端構(gòu)建工具：WebPack
前端安裝包工具：NPM
Vue腳手架：Vue-cli
Vue路由：vue-router
ajax框架：axios
基于Vue的富文本框架：quill-editor

后端技術(shù)：

基礎(chǔ)的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.開發(fā)環(huán)境

為了保證開發(fā)環(huán)境的統(tǒng)一，希望每個人都按照我的環(huán)境來配置：

IDE：我們使用Idea 2017.3 版本
JDK：統(tǒng)一使用JDK1.8
項目構(gòu)建：maven3.3.9以上版本即可
版本控制工具：git

idea大家可以在我的課前資料中找到。另外，使用幫助大家可以參考課前資料的《idea使用指南.md》

3.3.域名

我們在開發(fā)的過程中，為了保證以后的生產(chǎn)、測試環(huán)境統(tǒng)一。盡量都采用域名來訪問項目。

一級域名：www.leyou.com

二級域名：manage.leyou.com , api.leyou.com

我們可以通過switchhost工具來修改自己的host對應(yīng)的地址，只要把這些域名指向127.0.0.1，那么跟你用localhost的效果是完全一樣的。

switchhost可以去課前資料尋找。

3.4.創(chuàng)建父工程

創(chuàng)建統(tǒng)一的父工程：leyou，用來管理依賴及其版本，注意是創(chuàng)建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/> </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><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-dependencies</artifactId><version>${spring-cloud.version}</version><type>pom</type><scope>import</scope></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>${mybatis.starter.version}</version></dependency><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><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>${mysql.version}</version></dependency><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> ?

可以發(fā)現(xiàn)，我們在父工程中引入了SpringCloud等很多以后需要用到的依賴，以后創(chuàng)建的子工程就不需要自己引入了。

最后，刪除自動生成的LeyouApplication啟動類、測試類以及application.properties文件，我們不需要。

3.5.創(chuàng)建EurekaServer

3.5.1.創(chuàng)建工程

這個大家應(yīng)該比較熟悉了。

我們的注冊中心，起名為：ly-registry

3.5.2.添加依賴

添加EurekaServer的依賴：

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: falseregister-with-eureka: falseservice-url:defaultZone: http://127.0.0.1:${server.port}/eurekaserver:enable-self-preservation: false # 關(guān)閉自我保護(hù)eviction-interval-timer-in-ms: 5000 # 每隔5秒進(jìn)行一次服務(wù)列表清理

3.5.5.項目的結(jié)構(gòu)：

目前，整個項目的結(jié)構(gòu)如圖：

3.6.創(chuàng)建Zuul網(wǎng)關(guān)

3.6.1.創(chuàng)建工程

與上面類似，選擇maven方式創(chuàng)建Module，然后填寫項目名稱，我們命名為：ly-gateway

3.6.2.添加依賴

這里我們需要添加Zuul和EurekaClient的依賴：

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/eurekaregistry-fetch-interval-seconds: 5instance:prefer-ip-address: trueip-address: 127.0.0.1instance-id: ${spring.application.name}:${server.port} zuul:prefix: /api # 添加路由前綴retryable: true ribbon:ConnectTimeout: 250 # 連接超時時間(ms)ReadTimeout: 2000 # 通信超時時間(ms)OkToRetryOnAllOperations: true # 是否對所有操作重試MaxAutoRetriesNextServer: 1 # 同一服務(wù)不同實例的重試次數(shù)MaxAutoRetries: 1 # 同一實例的重試次數(shù) hystrix:command:default:execution:isolation:thread:timeoutInMillisecond: 10000 # 熔斷超時時長：10000ms

3.6.5.項目結(jié)構(gòu)

目前，leyou下有兩個子模塊：

ly-registry：服務(wù)的注冊中心（EurekaServer）
ly-api-gateway：服務(wù)網(wǎng)關(guān)（Zuul）

目前，服務(wù)的結(jié)構(gòu)如圖所示：

截止到這里，我們已經(jīng)把基礎(chǔ)服務(wù)搭建完畢，為了便于開發(fā)，統(tǒng)一配置中心（ConfigServer）我們留待以后添加。

3.7.創(chuàng)建商品微服務(wù)

既然是一個全品類的電商購物平臺，那么核心自然就是商品。因此我們要搭建的第一個服務(wù)，就是商品微服務(wù)。其中會包含對于商品相關(guān)的一系列內(nèi)容的管理，包括：

商品分類管理
品牌管理
商品規(guī)格參數(shù)管理
商品管理
庫存管理

我們先完成項目的搭建：

3.7.1.微服務(wù)的結(jié)構(gòu)

因為與商品的品類相關(guān)，我們的工程命名為ly-item.

需要注意的是，我們的ly-item是一個微服務(wù)，那么將來肯定會有其它系統(tǒng)需要來調(diào)用服務(wù)中提供的接口，因此肯定也會使用到接口中關(guān)聯(lián)的實體類。

因此這里我們需要使用聚合工程，將要提供的接口及相關(guān)實體類放到獨立子工程中，以后別人引用的時候，只需要知道坐標(biāo)即可。

我們會在ly-item中創(chuàng)建兩個子工程：

ly-item-interface：主要是對外暴露的接口及相關(guān)實體類
ly-item-service：所有業(yè)務(wù)邏輯及內(nèi)部使用接口

調(diào)用關(guān)系如圖所示：

3.7.2.創(chuàng)建父工程ly-item

依然是使用maven構(gòu)建：

保存的位置：

不需要任何依賴，我們可以把項目打包方式設(shè)置為pom

3.7.3.創(chuàng)建ly-item-interface

在ly-item工程上點擊右鍵，選擇new > module:

依然是使用maven構(gòu)建，注意父工程是ly-item：

注意：接下來填寫的目錄結(jié)構(gòu)需要自己手動完成，保存到ly-item下的ly-item-interface目錄中：

點擊Finish完成。

此時的項目結(jié)構(gòu)：

3.7.4.創(chuàng)建ly-item-service

與ly-item-interface類似，我們選擇在ly-item上右鍵，新建module，然后填寫項目信息：

填寫存儲位置，是在/ly-item/ly-item-service目錄

點擊Finish完成。

3.7.5.整個微服務(wù)結(jié)構(gòu)

如圖所示：

我們打開ly-item的pom查看，會發(fā)現(xiàn)ly-item-interface和ly-item-service都已經(jīng)稱為module了：

3.7.6.添加依賴

接下來我們給ly-item-service中添加依賴：

思考一下我們需要什么？

Eureka客戶端
web啟動器
mybatis啟動器
通用mapper啟動器
分頁助手啟動器
連接池，我們用默認(rèn)的Hykira
mysql驅(qū)動
千萬不能忘了，我們自己也需要ly-item-interface中的實體類

這些依賴，我們在頂級父工程：leyou中已經(jīng)添加好了。所以直接引入即可：

ly-item-interface中需要什么我們暫時不清楚，所以先不管。

整個結(jié)構(gòu)：

3.7.7.編寫啟動和配置

在整個ly-item工程中，只有l(wèi)y-item-service是需要啟動的。因此在其中編寫啟動類即可：

@SpringBootApplication @EnableDiscoveryClient public class LyItemService {public static void main(String[] args) {SpringApplication.run(LyItemService.class, args);} }

然后是全局屬性文件：

server:port: 8081spring:application:name: item-servicedatasource:url: jdbc:mysql://localhost:3306/yun6username: rootpassword: root eureka:client:service-url:defaultZone: http://127.0.0.1:10086/eurekainstance:prefer-ip-address: trueip-address: 127.0.0.1hystrix:command:default:execution:isolation:thread:timeoutInMillisecond: 5000 # 熔斷超時時長：10000mszuul:prefix: /api # 添加路由前綴routers:item-serveice: /item/**ribbon:ConnectTimeout: 1000 # 連接超時時間(ms)ReadTimeout: 3500 # 通信超時時間(ms)OkToRetryOnAllOperations: true # 是否對所有操作重試MaxAutoRetriesNextServer: 0 # 同一服務(wù)不同實例的重試次數(shù)MaxAutoRetries: 0 # 同一實例的重試次數(shù)

3.8.添加商品微服務(wù)的路由規(guī)則

既然商品微服務(wù)已經(jīng)創(chuàng)建，接下來肯定要添加路由規(guī)則到Zuul中，我們不使用默認(rèn)的路由規(guī)則。

zuul:prefix: /api # 添加路由前綴retryable: trueroutes:item-service: /item/** # 將商品微服務(wù)映射到/item/**

3.9.啟動測試

我們分別啟動：ly-registry，ly-api-gateway，ly-item-service

查看Eureka面板：

3.10.測試路由規(guī)則

為了測試路由規(guī)則是否暢通，我們是不是需要在item-service中編寫一個controller接口呢？

其實不需要，Spring提供了一個依賴：actuator

只要我們添加了actuator的依賴，它就會為我們生成一系列的訪問接口：

/info
/health
/refresh
...

添加依賴：

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-actuator</artifactId> </dependency>

重啟后訪問Eureka控制臺：

鼠標(biāo)懸停在item-service上，會顯示一個地址：

這就是actuator提供的接口，我們點擊訪問：

因為我們沒有添加信息，所以是一個空的json，但是可以肯定的是：我們能夠訪問到item-service了。

接下來我們通過路由訪問試試，根據(jù)路由規(guī)則，我們需要訪問的地址是：

http://127.0.0.1:10010/api/item/actuator/info

3.11.通用工具模塊

有些工具或通用的約定內(nèi)容，我們希望各個服務(wù)共享，因此需要創(chuàng)建一個工具模塊：ly-common

使用maven來構(gòu)建module：

位置信息：

結(jié)構(gòu)：

目前還不需要編碼。

4、ES6 語法指南

后端項目搭建完畢，接下來就是前端頁面了。不過在這之前需要一些準(zhǔn)備工作。我們需要學(xué)習(xí)ES6的語法標(biāo)準(zhǔn)。

什么是ES6？就是ECMAScript第6版標(biāo)準(zhǔn)。

4.1.什么是ECMAScript？

來看下前端的發(fā)展歷程：

web1.0時代：

最初的網(wǎng)頁以HTML為主，是純靜態(tài)的網(wǎng)頁。網(wǎng)頁是只讀的，信息流只能從服務(wù)的到客戶端單向流通。開發(fā)人員也只關(guān)心頁面的樣式和內(nèi)容即可。

web2.0時代：

1995年，網(wǎng)景工程師Brendan Eich 花了10天時間設(shè)計了JavaScript語言。
1996年，微軟發(fā)布了JScript，其實是JavaScript的逆向工程實現(xiàn)。
1997年，為了統(tǒng)一各種不同script腳本語言，ECMA（歐洲計算機制造商協(xié)會）以JavaScript為基礎(chǔ)，制定了ECMAscript標(biāo)準(zhǔn)規(guī)范。JavaScript和JScript都是ECMAScript的標(biāo)準(zhǔn)實現(xiàn)者，隨后各大瀏覽器廠商紛紛實現(xiàn)了ECMAScript標(biāo)準(zhǔn)。

所以，ECMAScript是瀏覽器腳本語言的規(guī)范，而各種我們熟知的js語言，如JavaScript則是規(guī)范的具體實現(xiàn)。

4.2.ECMAScript的快速發(fā)展

而后，ECMAScript就進(jìn)入了快速發(fā)展期。

1998年6月，ECMAScript 2.0 發(fā)布。
1999年12月，ECMAScript 3.0 發(fā)布。這時，ECMAScript 規(guī)范本身也相對比較完善和穩(wěn)定了，但是接下來的事情，就比較悲劇了。
2007年10月。。。。ECMAScript 4.0 草案發(fā)布。

這次的新規(guī)范，歷時頗久，規(guī)范的新內(nèi)容也有了很多爭議。在制定ES4的時候，是分成了兩個工作組同時工作的。
- 一邊是以 Adobe, Mozilla, Opera 和 Google為主的 ECMAScript 4 工作組。
- 一邊是以 Microsoft 和 Yahoo 為主的 ECMAScript 3.1 工作組。
ECMAScript 4 的很多主張比較激進(jìn)，改動較大。而 ECMAScript 3.1 則主張小幅更新。最終經(jīng)過 TC39 的會議，決定將一部分不那么激進(jìn)的改動保留發(fā)布為 ECMAScript 3.1，而ES4的內(nèi)容，則延續(xù)到了后來的ECMAScript5和6版本中
2009年12月，ECMAScript 5 發(fā)布。
2011年6月，ECMAScript 5.1 發(fā)布。
2015年6月，ECMAScript 6，也就是 ECMAScript 2015 發(fā)布了。并且從 ECMAScript 6 開始，開始采用年號來做版本。即 ECMAScript 2015，就是ECMAScript6。

4.3.ES5和6的一些新特性

我們這里只把一些常用的進(jìn)行學(xué)習(xí)，更詳細(xì)的大家參考：阮一峰的ES6教程

4.3.1.let 和 const 命令

var

之前，js定義變量只有一個關(guān)鍵字：var

var有一個問題，就是定義的變量有時會莫名奇妙的成為全局變量。

例如這樣的一段代碼：

for(var i = 0; i < 5; i++){console.log(i); } console.log("循環(huán)外：" + i)

你猜下打印的結(jié)果是什么？

let

let所聲明的變量，只在let命令所在的代碼塊內(nèi)有效。

我們把剛才的var改成let試試：

for(let i = 0; i < 5; i++){console.log(i); } console.log("循環(huán)外：" + i)

結(jié)果：

const

const聲明的變量是常量，不能被修改

4.3.2.字符串?dāng)U展

新的API

ES6為字符串?dāng)U展了幾個新的API：

includes()：返回布爾值，表示是否找到了參數(shù)字符串。
startsWith()：返回布爾值，表示參數(shù)字符串是否在原字符串的頭部。
endsWith()：返回布爾值，表示參數(shù)字符串是否在原字符串的尾部。

實驗一下：

字符串模板

ES6中提供了`來作為字符串模板標(biāo)記。我們可以這么玩：

在兩個`之間的部分都會被作為字符串的值，不管你任意換行，甚至加入js腳本

鍵盤是的1的左側(cè)，tab的上側(cè)，esc的正下方

4.3.3.解構(gòu)表達(dá)式

數(shù)組解構(gòu)

比如有一個數(shù)組：

let arr = [1,2,3]

我想獲取其中的值，只能通過角標(biāo)。ES6可以這樣：

const [x,y,z] = arr;// x，y，z將與arr中的每個位置對應(yīng)來取值 // 然后打印 console.log(x,y,z);

結(jié)果：

對象解構(gòu)

例如有個person對象：

const person = {name:"jack",age:21,language: ['java','js','css'] }

我們可以這么做：

// 解構(gòu)表達(dá)式獲取值 const {name,age,language} = person; // 打印 console.log(name); console.log(age); console.log(language);

結(jié)果：

如過想要用其它變量接收，需要額外指定別名：

{name:n}：name是person中的屬性名，冒號后面的n是解構(gòu)后要賦值給的變量。

4.3.4.函數(shù)優(yōu)化

函數(shù)參數(shù)默認(rèn)值

在ES6以前，我們無法給一個函數(shù)參數(shù)設(shè)置默認(rèn)值，只能采用變通寫法：

function add(a , b) {// 判斷b是否為空，為空就給默認(rèn)值1b = b || 1;return a + b;}// 傳一個參數(shù)console.log(add(10));

現(xiàn)在可以這么寫：

function add(a , b = 1) {return a + b; } // 傳一個參數(shù) console.log(add(10));

箭頭函數(shù)

ES6中定義函數(shù)的簡寫方式：

一個參數(shù)時：

var print = function (obj) {console.log(obj); } // 簡寫為： var print2 = obj => console.log(obj);

多個參數(shù)：

// 兩個參數(shù)的情況： var sum = function (a , b) {return a + b; } // 簡寫為： var sum2 = (a,b) => a+b;

代碼不止一行，可以用{}括起來

var sum3 = (a,b) => {return a + b; }

對象的函數(shù)屬性簡寫

比如一個Person對象，里面有eat方法：

let person = {name: "jack",// 以前：eat: function (food) {console.log(this.name + "在吃" + food);},// 箭頭函數(shù)版：eat2: food => console.log(person.name + "在吃" + food),// 這里拿不到this// 簡寫版：eat3(food){console.log(this.name + "在吃" + food);} }

箭頭函數(shù)結(jié)合解構(gòu)表達(dá)式

比如有一個函數(shù)：

const person = {name:"jack",age:21,language: ['java','js','css'] }function hello(person) {console.log("hello," + person.name) }

如果用箭頭函數(shù)和解構(gòu)表達(dá)式

var hi = ({name}) => console.log("hello," + name);

4.3.5.map和reduce

數(shù)組中新增了map和reduce方法。

map

map()：接收一個函數(shù)，將原數(shù)組中的所有元素用這個函數(shù)處理后放入新數(shù)組返回。

舉例：有一個字符串?dāng)?shù)組，我們希望轉(zhuǎn)為int數(shù)組

let arr = ['1','20','-5','3']; console.log(arr)arr = arr.map(s => parseInt(s));console.log(arr)

reduce

reduce()：接收一個函數(shù)（必須）和一個初始值（可選），該函數(shù)接收兩個參數(shù)：

第一個參數(shù)是上一次reduce處理的結(jié)果
第二個參數(shù)是數(shù)組中要處理的下一個元素

reduce()會從左到右依次把數(shù)組中的元素用reduce處理，并把處理的結(jié)果作為下次reduce的第一個參數(shù)。如果是第一次，會把前兩個元素作為計算參數(shù)，或者把用戶指定的初始值作為起始參數(shù)

舉例：

const arr = [1,20,-5,3]

沒有初始值：

指定初始值：

4.3.6.promise

所謂Promise，簡單說就是一個容器，里面保存著某個未來才會結(jié)束的事件（通常是一個異步操作）的結(jié)果。從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進(jìn)行處理。

感覺跟java的Future類很像啊，有木有！

我們可以通過Promise的構(gòu)造函數(shù)來創(chuàng)建Promise對象，并在內(nèi)部封裝一個異步執(zhí)行的結(jié)果。

語法：

這樣，在promise中就封裝了一段異步執(zhí)行的結(jié)果。

如果我們想要等待異步執(zhí)行完成，做一些事情，我們可以通過promise的then方法來實現(xiàn),語法：

promise.then(function(value){// 異步執(zhí)行成功后的回調(diào) });

如果想要處理promise異步執(zhí)行失敗的事件，還可以跟上catch：

promise.then(function(value){// 異步執(zhí)行成功后的回調(diào) }).catch(function(error){// 異步執(zhí)行失敗后的回調(diào) })

示例：

結(jié)果：

4.3.7.set和map（了解）

ES6提供了Set和Map的數(shù)據(jù)結(jié)構(gòu)。

Set，本質(zhì)與數(shù)組類似。不同在于Set中只能保存不同元素，如果元素相同會被忽略。跟java很像吧。

構(gòu)造函數(shù)：

// Set構(gòu)造函數(shù)可以接收一個數(shù)組或空 let set = new Set(); set.add(1);// [1] // 接收數(shù)組 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; // 元素個數(shù)。是屬性，不是方法。

map，本質(zhì)是與Object類似的結(jié)構(gòu)。不同在于，Object強制規(guī)定key只能是字符串。而Map結(jié)構(gòu)的key可以是任意對象。即：

object是 <string,object>集合
map是<object,object>集合

構(gòu)造函數(shù)：

// map接收一個數(shù)組，數(shù)組中的元素是鍵值對數(shù)組 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.什么是模塊化

模塊化就是把代碼進(jìn)行拆分，方便重復(fù)利用。類似java中的導(dǎo)包：要使用一個包，必須先導(dǎo)包。

而JS中沒有包的概念，換來的是模塊。

模塊功能主要由兩個命令構(gòu)成：export和import。

export命令用于規(guī)定模塊的對外接口，
import命令用于導(dǎo)入其他模塊提供的功能。

4.3.8.2.export

比如我定義一個js文件:hello.js，里面有一個對象：

const util = {sum(a,b){return a + b;} }

我可以使用export將這個對象導(dǎo)出：

const util = {sum(a,b){return a + b;} } export util;

當(dāng)然，也可以簡寫為：

export const util = {sum(a,b){return a + b;} }

export不僅可以導(dǎo)出對象，一切JS變量都可以導(dǎo)出。比如：基本類型變量、函數(shù)、數(shù)組、對象。

當(dāng)要導(dǎo)出多個值時，還可以簡寫。比如我有一個文件：user.js：

var name = "jack" var age = 21 export {name,age}

省略名稱

上面的導(dǎo)出代碼中，都明確指定了導(dǎo)出的變量名，這樣其它人在導(dǎo)入使用時就必須準(zhǔn)確寫出變量名，否則就會出錯。

因此js提供了default關(guān)鍵字，可以對導(dǎo)出的變量名進(jìn)行省略

例如：

// 無需聲明對象的名字 export default {sum(a,b){return a + b;} }

這樣，當(dāng)使用者導(dǎo)入時，可以任意起名字

4.3.8.3.import

使用export命令定義了模塊的對外接口以后，其他 JS 文件就可以通過import命令加載這個模塊。

例如我要使用上面導(dǎo)出的util：

// 導(dǎo)入util import util from 'hello.js' // 調(diào)用util中的屬性 util.sum(1,2)

要批量導(dǎo)入前面導(dǎo)出的name和age：

import {name, age} from 'user.js'console.log(name + " , 今年"+ age +"歲了")

但是上面的代碼暫時無法測試，因為瀏覽器目前還不支持ES6 的導(dǎo)入和導(dǎo)出功能。除非借助于工具，把ES6 的語法進(jìn)行編譯降級到ES5，比如Babel-cli工具

我們暫時不做測試，大家了解即可。

4.3.9.對象擴(kuò)展

ES6給Object拓展了許多新的方法，如：

keys(obj)：獲取對象的所有key形成的數(shù)組
values(obj)：獲取對象的所有value形成的數(shù)組
entries(obj)：獲取對象的所有key和value形成的二維數(shù)組。格式：[[k1,v1],[k2,v2],...]
assian(dest, ...src) ：將多個src對象的值拷貝到 dest中（淺拷貝）。

4.3.10.數(shù)組擴(kuò)展

ES6給數(shù)組新增了許多方法：

find(callback)：把數(shù)組中的元素逐個傳遞給函數(shù)callback執(zhí)行，如果返回true，則返回該元素
findIndex(callback)：與find類似，不過返回的是品牌到的元素的索引
includes（callback）：與find類似，如果匹配到元素，則返回true，代表找到了。

總結(jié)

以上是生活随笔為你收集整理的04-乐优商城项目搭建的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java装箱和拆箱_java自动装箱和拆
下一篇：使用DataTable作为存储过程的参数