前端技術(shù)架構(gòu)

架構(gòu)描述：以Node.js為核心的Vue.js前端技術(shù)生態(tài)架構(gòu)

2 Node.js

2.1 什么是Node.js

簡(jiǎn)單的說(shuō) Node.js 就是運(yùn)行在服務(wù)端的 JavaScript。

Node.js 是一個(gè)基于Chrome JavaScript 運(yùn)行時(shí)建立的一個(gè)平臺(tái)。

Node.js是一個(gè)事件驅(qū)動(dòng)I/O服務(wù)端JavaScript環(huán)境，基于Google的V8引擎，V8引擎執(zhí)行Javascript的速度非常快，性能非常好。

2.2 Node.js安裝

1、下載對(duì)應(yīng)你系統(tǒng)的Node.js版本:

https://nodejs.org/en/download/

2、選安裝目錄進(jìn)行安裝

默認(rèn)即可

3.測(cè)試

在命令提示符下輸入命令

node -v

會(huì)顯示當(dāng)前node的版本

2.3 快速入門(mén)

2.3.1 控制臺(tái)輸出

我們現(xiàn)在做個(gè)最簡(jiǎn)單的小例子，演示如何在控制臺(tái)輸出，創(chuàng)建文本文件demo1.js,代碼內(nèi)容

var a=1; var b=2; console.log(a+b);

我們?cè)诿钐崾痉螺斎朊?/p> node demo1.js

2.3.2 使用函數(shù)

創(chuàng)建文本文件demo2.js

var c=add(100,200); console.log(c); function add(a,b){return a+b; }

命令提示符輸入命令

node demo2.js

運(yùn)行后看到輸出結(jié)果為300

2.3.3 模塊化編程

創(chuàng)建文本文件demo3_1.js

exports.add=function(a,b){return a+b; }

創(chuàng)建文本文件demo3_2.js

var demo= require('./demo3_1'); console.log(demo.add(400,600));

我們?cè)诿钐崾痉螺斎朊?/p> node demo3_2.js

結(jié)果為1000

2.3.4 創(chuàng)建web服務(wù)器

創(chuàng)建文本文件demo4.js

var http = require('http'); http.createServer(function (request, response) {// 發(fā)送 HTTP 頭部 // HTTP 狀態(tài)值: 200 : OK// 內(nèi)容類(lèi)型: text/plainresponse.writeHead(200, {'Content-Type': 'text/plain'});// 發(fā)送響應(yīng)數(shù)據(jù) "Hello World"response.end('Hello World\n'); }).listen(8888); // 終端打印如下信息 console.log('Server running at http://127.0.0.1:8888/');

http為node內(nèi)置的web模塊

我們?cè)诿钐崾痉螺斎朊?/p> node demo4.js

服務(wù)啟動(dòng)后，我們打開(kāi)瀏覽器，輸入網(wǎng)址

http://localhost:8888/

即可看到網(wǎng)頁(yè)輸出結(jié)果Hello World

心情是不是很激動(dòng)呢？Ctrl+c 終止運(yùn)行。

2.3.5 理解服務(wù)端渲染

我們創(chuàng)建demo5.js ，將上邊的例子寫(xiě)成循環(huán)的形式

var http = require('http'); http.createServer(function (request, response) {// 發(fā)送 HTTP 頭部 // HTTP 狀態(tài)值: 200 : OK// 內(nèi)容類(lèi)型: text/plainresponse.writeHead(200, {'Content-Type': 'text/plain'});// 發(fā)送響應(yīng)數(shù)據(jù) "Hello World"for(var i=0;i<10;i++){response.write('Hello World\n');} response.end(''); }).listen(8888); // 終端打印如下信息 console.log('Server running at http://127.0.0.1:8888/');

我們?cè)诿钐崾痉螺斎朊顔?dòng)服務(wù)

node demo5.js

瀏覽器地址欄輸入http://127.0.0.1:8888即可看到查詢結(jié)果。

我們右鍵“查看源代碼”發(fā)現(xiàn)，并沒(méi)有我們寫(xiě)的for循環(huán)語(yǔ)句，而是直接的10條Hello World ，這就說(shuō)明這個(gè)循環(huán)是在服務(wù)端完成的，而非瀏覽器（客戶端）來(lái)完成。這與我們?cè)瓉?lái)的JSP很是相似。

2.3.6 接收參數(shù)

創(chuàng)建demo6.js

var http = require('http'); var url = require('url'); http.createServer(function(request, response){response.writeHead(200, {'Content-Type': 'text/plain'});// 解析 url 參數(shù)var params = url.parse(request.url, true).query;response.write("name:" + params.name);response.write("\n");response.end(); }).listen(8888); console.log('Server running at http://127.0.0.1:8888/');

我們?cè)诿钐崾痉螺斎朊?/p> node demo6.js

在瀏覽器測(cè)試結(jié)果

3 包資源管理器NPM

3.1 什么是NPM

npm全稱(chēng)Node Package Manager，他是node包管理和分發(fā)工具。其實(shí)我們可以把NPM理解為前端的Maven .

我們通過(guò)npm 可以很方便地下載js庫(kù)，管理前端工程.

最近版本的node.js已經(jīng)集成了npm工具，在命令提示符輸入 npm -v 可查看當(dāng)前npm版本

3.2 NPM命令

3.2.1 初始化工程

init命令是工程初始化命令。

建立一個(gè)空文件夾，在命令提示符進(jìn)入該文件夾 執(zhí)行命令初始化

npm init

按照提示輸入相關(guān)信息，如果是用默認(rèn)值則直接回車(chē)即可。

name: 項(xiàng)目名稱(chēng)

version: 項(xiàng)目版本號(hào)

description: 項(xiàng)目描述

keywords: {Array}關(guān)鍵詞，便于用戶搜索到我們的項(xiàng)目

最后會(huì)生成package.json文件，這個(gè)是包的配置文件，相當(dāng)于maven的pom.xml

我們之后也可以根據(jù)需要進(jìn)行修改。

3.2.2 本地安裝

install命令用于安裝某個(gè)模塊，如果我們想安裝express模塊（node的web框架），輸出命令如下：

npm install express

出現(xiàn)黃色的是警告信息，可以忽略，請(qǐng)放心，你已經(jīng)成功執(zhí)行了該命令。

在該目錄下已經(jīng)出現(xiàn)了一個(gè)node_modules文件夾 和package-lock.json

node_modules文件夾用于存放下載的js庫(kù)（相當(dāng)于maven的本地倉(cāng)庫(kù)）

package-lock.json是當(dāng) node_modules 或 package.json 發(fā)生變化時(shí)自動(dòng)生成的文件。這個(gè)文件主要功能是確定當(dāng)前安裝的包的依賴(lài)，以便后續(xù)重新安裝的時(shí)候生成相同的依賴(lài)，而忽略項(xiàng)目開(kāi)發(fā)過(guò)程中有些依賴(lài)已經(jīng)發(fā)生的更新。

我們?cè)俅蜷_(kāi)package.json文件，發(fā)現(xiàn)剛才下載的express已經(jīng)添加到依賴(lài)列表中了.

關(guān)于版本號(hào)定義：

指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式規(guī)定，安裝時(shí)只安裝指定版本。波浪號(hào)（tilde）+指定版本：比如~1.2.2，表示安裝1.2.x的最新版本（不低于1.2.2），但是不安裝1.3.x，也就是說(shuō)安裝時(shí)不改變大版本號(hào)和次要版本號(hào)。插入號(hào)（caret）+指定版本：比如?1.2.2，表示安裝1.x.x的最新版本（不低于1.2.2），但是不安裝2.x.x，也就是說(shuō)安裝時(shí)不改變大版本號(hào)。需要注意的是，如果大版本號(hào)為0，則插入號(hào)的行為與波浪號(hào)相同，這是因?yàn)榇藭r(shí)處于開(kāi)發(fā)階段，即使是次要版本號(hào)變動(dòng)，也可能帶來(lái)程序的不兼容。latest：安裝最新版本。

3.2.3 全局安裝

剛才我們使用的是本地安裝，會(huì)將js庫(kù)安裝在當(dāng)前目錄，而使用全局安裝會(huì)將庫(kù)安裝到你的全局目錄下。

如果你不知道你的全局目錄在哪里，執(zhí)行命令

npm root -g

我的全局目錄在

C:\Users\Administrator\AppData\Roaming\npm\node_modules

比如我們?nèi)职惭bjquery, 輸入以下命令

npm install jquery -g

3.2.4 批量下載

我們從網(wǎng)上下載某些代碼，發(fā)現(xiàn)只有package.json,沒(méi)有node_modules文件夾，這時(shí)我們需要通過(guò)命令重新下載這些js庫(kù).

進(jìn)入目錄（package.json所在的目錄）輸入命令

npm install

此時(shí)，npm會(huì)自動(dòng)下載package.json中依賴(lài)的js庫(kù).

3.2.5淘寶NPM鏡像

有時(shí)我們使用npm下載資源會(huì)很慢，所以我們可以安裝一個(gè)cnmp(淘寶鏡像)來(lái)加快下載速度。

輸入命令，進(jìn)行全局安裝淘寶鏡像。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝后，我們可以使用以下命令來(lái)查看cnpm的版本

cnpm -v

使用cnpm

cnpm install 需要下載的js庫(kù)

3.2.6 運(yùn)行工程

如果我們想運(yùn)行某個(gè)工程，則使用run命令

如果package.json中定義的腳本如下

dev是開(kāi)發(fā)階段測(cè)試運(yùn)行

build是構(gòu)建編譯工程

lint 是運(yùn)行js代碼檢測(cè)

我們現(xiàn)在來(lái)試一下運(yùn)行dev

npm run dev

3.2.7 編譯工程

我們接下來(lái)，測(cè)試一個(gè)代碼的編譯.編譯后我們就可以將工程部署到nginx中啦~

編譯后的代碼會(huì)放在dist文件夾中，首先我們先刪除dist文件夾中的文件,進(jìn)入命令提示符輸入命令

npm run build

生成后我們會(huì)發(fā)現(xiàn)只有個(gè)靜態(tài)頁(yè)面，和一個(gè)static文件夾

這種工程我們稱(chēng)之為單頁(yè)Web應(yīng)用（single page web application，SPA），就是只有一張Web頁(yè)面的應(yīng)用，是加載單個(gè)HTML 頁(yè)面并在用戶與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁(yè)面的Web應(yīng)用程序。

這里其實(shí)是調(diào)用了webpack來(lái)實(shí)現(xiàn)打包的，關(guān)于webpack我們后續(xù)的章節(jié)進(jìn)行介紹

4 Webpack

4.1 什么是Webpack

Webpack 是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴(lài)關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。從圖中我們可以看出，Webpack 可以將多種靜態(tài)資源 js、css、less 轉(zhuǎn)換成一個(gè)靜態(tài)文件，減少了頁(yè)面的請(qǐng)求。 接下來(lái)我們簡(jiǎn)單為大家介紹 Webpack 的安裝與使用

4.2 Webpack安裝

全局安裝

npm install webpack -g npm install webpack-cli -g

安裝后查看版本號(hào)

webpack -v

4.3 快速入門(mén)

4.3.1 JS打包

（1）創(chuàng)建src文件夾，創(chuàng)建bar.js

exports.info=function(str){document.write(str); }

（2）src下創(chuàng)建logic.js

exports.add=function(a,b){return a+b; }

（3）src下創(chuàng)建main.js

var bar= require('./bar'); var logic= require('./logic'); bar.info( 'Hello world!'+ logic.add(100,200));

（4）創(chuàng)建配置文件webpack.config.js ，該文件與src處于同級(jí)目錄

var path = require("path"); module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, './dist'),filename: 'bundle.js'} };

以上代碼的意思是：讀取當(dāng)前目錄下src文件夾中的main.js（入口文件）內(nèi)容，把對(duì)應(yīng)的js文件打包，打包后的文件放入當(dāng)前目錄的dist文件夾下，打包后的js文件名為bundle.js

（5）執(zhí)行編譯命令

webpack

執(zhí)行后查看bundle.js 會(huì)發(fā)現(xiàn)里面包含了上面兩個(gè)js文件的內(nèi)容

（7）創(chuàng)建index.html ,引用bundle.js

<!doctype html> <html><head> </head><body> <script src="dist/bundle.js"></script></body> </html>

測(cè)試調(diào)用index.html，會(huì)發(fā)現(xiàn)有內(nèi)容輸出

4.3.2 CSS打包

（1）安裝style-loader和 css-loader

Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類(lèi)型的文件，就需要使用 loader 進(jìn)行轉(zhuǎn)換。

Loader 可以理解為是模塊和資源的轉(zhuǎn)換器，它本身是一個(gè)函數(shù)，接受源文件作為參數(shù)，返回轉(zhuǎn)換的結(jié)果。這樣，我們就可以通過(guò) require 來(lái)加載任何類(lèi)型的模塊或文件，比如 CoffeeScript、 JSX、 LESS 或圖片。首先我們需要安裝相關(guān)Loader插件，css-loader 是將 css 裝載到 javascript；style-loader 是讓 javascript 認(rèn)識(shí)css

cnpm install style-loader css-loader --save-dev

（2）修改webpack.config.js

var path = require("path"); module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, './dist'),filename: 'bundle.js'},module: {rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader']} ] } };

（3）在src文件夾創(chuàng)建css文件夾,css文件夾下創(chuàng)建css1

body{background:red; }

（4）修改main.js ，引入css1.css

require('./css1.css');

（5）重新運(yùn)行webpack

（6）運(yùn)行index.html看看背景是不是變成紅色啦？

5 開(kāi)發(fā)工具VsCode

5.1 VsCode簡(jiǎn)介

VSCode（ Visual Studio Code）是微軟出的一款輕量級(jí)代碼編輯器 ，重要的是它在Windows, OS X 和Linux操作系統(tǒng)的桌面上均可運(yùn)行。Visual Studio Code內(nèi)置了對(duì)JavaScript, TypeScript和Node.js語(yǔ)言的支持，并且為其他語(yǔ)言如C++, C#, Python, PHP等提供了豐富的擴(kuò)展庫(kù)和運(yùn)行時(shí)。

5.2 VsCode安裝與配置

5.2.1安裝

官網(wǎng)下載 https://code.visualstudio.com/

默認(rèn)安裝即可

5.2.2插件安裝

VsCode可以通過(guò)安裝插件來(lái)使編輯器變的更加強(qiáng)大

以下為前端開(kāi)發(fā)工程師常用插件

（1）HTML Snippets

超級(jí)實(shí)用且初級(jí)的 H5代碼片段以及提示

（2）HTML CSS Support

讓 html 標(biāo)簽上寫(xiě)class 智能提示當(dāng)前項(xiàng)目所支持的樣式 新版已經(jīng)支持scss文件檢索

（3）Debugger for Chrome

讓 vscode 映射 chrome 的 debug功能，靜態(tài)頁(yè)面都可以用 vscode 來(lái)打斷點(diǎn)調(diào)試，真666~

（4）vetur

vue框架所需的插件 語(yǔ)法高亮、智能感知、Emmet等

（5）VueHelper

snippet代碼片段

5.2.3配置自動(dòng)保存

點(diǎn)擊菜單 ：文件–勾選自動(dòng)保存

6 ES6

6.1 什么是ES6

編程語(yǔ)言JavaScript是ECMAScript的實(shí)現(xiàn)和擴(kuò)展 。ECMAScript是由ECMA（一個(gè)類(lèi)似W3C的標(biāo)準(zhǔn)組織）參與進(jìn)行標(biāo)準(zhǔn)化的語(yǔ)法規(guī)范。ECMAScript定義了：

語(yǔ)言語(yǔ)法 – 語(yǔ)法解析規(guī)則、關(guān)鍵字、語(yǔ)句、聲明、運(yùn)算符等。

類(lèi)型 – 布爾型、數(shù)字、字符串、對(duì)象等。

原型和繼承

內(nèi)建對(duì)象和函數(shù)的標(biāo)準(zhǔn)庫(kù) – JSON、Math、數(shù)組方法、對(duì)象自省方法等。

ECMAScript標(biāo)準(zhǔn)不定義HTML或CSS的相關(guān)功能，也不定義類(lèi)似DOM（文檔對(duì)象模型）的Web API，這些都在獨(dú)立的標(biāo)準(zhǔn)中進(jìn)行定義。ECMAScript涵蓋了各種環(huán)境中JS的使用場(chǎng)景，無(wú)論是瀏覽器環(huán)境還是類(lèi)似node.js的非瀏覽器環(huán)境。

ECMAScript標(biāo)準(zhǔn)的歷史版本分別是1、2、3、5。

那么為什么沒(méi)有第4版？其實(shí)，在過(guò)去確實(shí)曾計(jì)劃發(fā)布提出巨量新特性的第4版，但最終卻因想法太過(guò)激進(jìn)而慘遭廢除（這一版標(biāo)準(zhǔn)中曾經(jīng)有一個(gè)極其復(fù)雜的支持泛型和類(lèi)型推斷的內(nèi)建靜態(tài)類(lèi)型系統(tǒng)）。

ES4飽受爭(zhēng)議，當(dāng)標(biāo)準(zhǔn)委員會(huì)最終停止開(kāi)發(fā)ES4時(shí)，其成員同意發(fā)布一個(gè)相對(duì)謙和的ES5版本，隨后繼續(xù)制定一些更具實(shí)質(zhì)性的新特性。這一明確的協(xié)商協(xié)議最終命名為“Harmony”，因此，ES5規(guī)范中包含這樣兩句話

ECMAScript是一門(mén)充滿活力的語(yǔ)言，并在不斷進(jìn)化中。

未來(lái)版本的規(guī)范中將持續(xù)進(jìn)行重要的技術(shù)改進(jìn)

2009年發(fā)布的改進(jìn)版本ES5，引入了Object.create()、Object.defineProperty()、getters和setters、嚴(yán)格模式以及JSON對(duì)象。

ECMAScript 6.0（以下簡(jiǎn)稱(chēng)ES6）是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)，2015年6月正式發(fā)布。它的目標(biāo)，是使得JavaScript語(yǔ)言可以用來(lái)編寫(xiě)復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開(kāi)發(fā)語(yǔ)言。

6.2 Node.js中使用ES6

ES6+ 太棒了,但是很多高級(jí)功能node是不支持的,就需要使用babel轉(zhuǎn)換成ES5

（1）babel轉(zhuǎn)換配置,項(xiàng)目根目錄添加.babelrc 文件

{"presets" : ['es2015'] }

（2）安裝es6轉(zhuǎn)換模塊

cnpm install babel-preset-es2015 --save-dev

（3）全局安裝命令行工具

cnpm install babel-cli -g

（4）使用

babel-node js文件名

6.3 語(yǔ)法新特性

6.3.1 變量聲明let

我們都是知道在ES6以前，var關(guān)鍵字聲明變量。無(wú)論聲明在何處，都會(huì)被視為聲明在函數(shù)的最頂部(不在函數(shù)內(nèi)即在全局作用域的最頂部)。這就是函數(shù)變量提升例如

function aa() {if(bool) {var test = 'hello man'} else {console.log(test)}}

以上的代碼實(shí)際上是:

function aa() {var test // 變量提升if(bool) {test = 'hello man'} else {//此處訪問(wèn)test 值為undefinedconsole.log(test)}//此處訪問(wèn)test 值為undefined}

所以不用關(guān)心bool是否為true or false。實(shí)際上，無(wú)論如何test都會(huì)被創(chuàng)建聲明。

接下來(lái)ES6主角登場(chǎng)：

我們通常用let和const來(lái)聲明，let表示變量、const表示常量。let和const都是塊級(jí)作用域。怎么理解這個(gè)塊級(jí)作用域？在一個(gè)函數(shù)內(nèi)部 ，在一個(gè)代碼塊內(nèi)部。看以下代碼

function aa() {if(bool) {let test = 'hello man'} else {//test 在此處訪問(wèn)不到console.log(test)}}

6.3.2 常量聲明

const 用于聲明常量，看以下代碼

const name = 'lux' name = 'joe' //再次賦值此時(shí)會(huì)報(bào)錯(cuò)

6.3.3 模板字符串

es6模板字符簡(jiǎn)直是開(kāi)發(fā)者的福音啊，解決了ES5在字符串功能上的痛點(diǎn)。

第一個(gè)用途，基本的字符串格式化。將表達(dá)式嵌入字符串中進(jìn)行拼接。用${}來(lái)界定。

//es5 var name = 'lux'console.log('hello' + name)//es6const name = 'lux'console.log(`hello ${name}`) //hello lux

第二個(gè)用途，在ES5時(shí)我們通過(guò)反斜杠()來(lái)做多行字符串或者字符串一行行拼接。ES6反引號(hào)(``)直接搞定。

// es5var msg = "Hi \man!"// es6const template = `<div><span>hello world</span></div>`

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

ES6為參數(shù)提供了默認(rèn)值。在定義函數(shù)時(shí)便初始化了這個(gè)參數(shù)，以便在參數(shù)沒(méi)有被傳遞進(jìn)去時(shí)使用。

看例子代碼

function action(num = 200) {console.log(num)}action() //200action(300) //300

6.3.5 箭頭函數(shù)

ES6很有意思的一部分就是函數(shù)的快捷寫(xiě)法。也就是箭頭函數(shù)。

箭頭函數(shù)最直觀的三個(gè)特點(diǎn)。

1不需要function關(guān)鍵字來(lái)創(chuàng)建函數(shù)

2省略return關(guān)鍵字

3繼承當(dāng)前上下文的 this 關(guān)鍵字

看下面代碼（ES6）

(response,message) => {.......}

相當(dāng)于ES5代碼

function(response,message){...... }

6.3.6 對(duì)象初始化簡(jiǎn)寫(xiě)

ES5我們對(duì)于對(duì)象都是以鍵值對(duì)的形式書(shū)寫(xiě)，是有可能出現(xiàn)鍵值對(duì)重名的。例如

function people(name, age) {return {name: name,age: age};}

以上代碼可以簡(jiǎn)寫(xiě)為

function people(name, age) {return {name,age};}

6.3.7 解構(gòu)

數(shù)組和對(duì)象是JS中最常用也是最重要表示形式。為了簡(jiǎn)化提取信息，ES6新增了解構(gòu)，這是將一個(gè)數(shù)據(jù)結(jié)構(gòu)分解為更小的部分的過(guò)程

ES5我們提取對(duì)象中的信息形式如下

const people = {name: 'lux',age: 20}const name = people.nameconst age = people.ageconsole.log(name + ' --- ' + age)

是不是覺(jué)得很熟悉，沒(méi)錯(cuò)，在ES6之前我們就是這樣獲取對(duì)象信息的，一個(gè)一個(gè)獲取。現(xiàn)在，ES6的解構(gòu)能讓我們從對(duì)象或者數(shù)組里取出數(shù)據(jù)存為變量，例如

//對(duì)象const people = {name: 'lux',age: 20}const { name, age } = peopleconsole.log(`${name} --- ${age}`)//數(shù)組const color = ['red', 'blue']const [first, second] = colorconsole.log(first) //'red'console.log(second) //'blue'

6.3.8 Spread Operator

ES6中另外一個(gè)好玩的特性就是Spread Operator 也是三個(gè)點(diǎn)兒…接下來(lái)就展示一下它的用途。 組裝對(duì)象或者數(shù)組

//數(shù)組const color = ['red', 'yellow']const colorful = [...color, 'green', 'pink']console.log(colorful) //[red, yellow, green, pink]//對(duì)象const alp = { fist: 'a', second: 'b'}const alphabets = { ...alp, third: 'c' }console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"

6.3.9 import 和 export

import導(dǎo)入模塊、export導(dǎo)出模塊

lib.js

let fn0=function(){console.log('fn0...'); } export {fn0}

demo9.js

import {fn0} from './lib' fn0();

注意：node(v8.x)本身并不支持import關(guān)鍵字，所以我們需要使用babel的命令行工具來(lái)執(zhí)行（配置詳見(jiàn)6.2小節(jié)內(nèi)容）

babel-node demo9

6.3.10 Promise（自學(xué)內(nèi)容）

Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案–回調(diào)函數(shù)和事件－－更合理和更強(qiáng)大。它由社區(qū)最早提出和實(shí)現(xiàn)，ES6將其寫(xiě)進(jìn)了語(yǔ)言標(biāo)準(zhǔn)，統(tǒng)一了語(yǔ)法，原生提供了Promise.此知識(shí)點(diǎn)屬于本章自學(xué)內(nèi)容，請(qǐng)同學(xué)們百度promise查閱文章完成自學(xué)（完成測(cè)試代碼，整理自學(xué)筆記）。

總結(jié)

以上是生活随笔為你收集整理的前端技术架构概述的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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