前端技術架構

架構描述：以Node.js為核心的Vue.js前端技術生態架構

2 Node.js

2.1 什么是Node.js

簡單的說 Node.js 就是運行在服務端的 JavaScript。

Node.js 是一個基于Chrome JavaScript 運行時建立的一個平臺。

Node.js是一個事件驅動I/O服務端JavaScript環境，基于Google的V8引擎，V8引擎執行Javascript的速度非常快，性能非常好。

2.2 Node.js安裝

1、下載對應你系統的Node.js版本:

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

2、選安裝目錄進行安裝

默認即可

3.測試

在命令提示符下輸入命令

node -v

會顯示當前node的版本

2.3 快速入門

2.3.1 控制臺輸出

我們現在做個最簡單的小例子，演示如何在控制臺輸出，創建文本文件demo1.js,代碼內容

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

我們在命令提示符下輸入命令

node demo1.js

2.3.2 使用函數

創建文本文件demo2.js

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

命令提示符輸入命令

node demo2.js

運行后看到輸出結果為300

2.3.3 模塊化編程

創建文本文件demo3_1.js

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

創建文本文件demo3_2.js

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

我們在命令提示符下輸入命令

node demo3_2.js

結果為1000

2.3.4 創建web服務器

創建文本文件demo4.js

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

http為node內置的web模塊

我們在命令提示符下輸入命令

node demo4.js

服務啟動后，我們打開瀏覽器，輸入網址

http://localhost:8888/

即可看到網頁輸出結果Hello World

心情是不是很激動呢？Ctrl+c 終止運行。

2.3.5 理解服務端渲染

我們創建demo5.js ，將上邊的例子寫成循環的形式

var http = require('http'); http.createServer(function (request, response) {// 發送 HTTP 頭部 // HTTP 狀態值: 200 : OK// 內容類型: text/plainresponse.writeHead(200, {'Content-Type': 'text/plain'});// 發送響應數據 "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/');

我們在命令提示符下輸入命令啟動服務

node demo5.js

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

我們右鍵“查看源代碼”發現，并沒有我們寫的for循環語句，而是直接的10條Hello World ，這就說明這個循環是在服務端完成的，而非瀏覽器（客戶端）來完成。這與我們原來的JSP很是相似。

2.3.6 接收參數

創建demo6.js

var http = require('http'); var url = require('url'); http.createServer(function(request, response){response.writeHead(200, {'Content-Type': 'text/plain'});// 解析 url 參數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/');

我們在命令提示符下輸入命令

node demo6.js

在瀏覽器測試結果

3 包資源管理器NPM

3.1 什么是NPM

npm全稱Node Package Manager，他是node包管理和分發工具。其實我們可以把NPM理解為前端的Maven .

我們通過npm 可以很方便地下載js庫，管理前端工程.

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

3.2 NPM命令

3.2.1 初始化工程

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

建立一個空文件夾，在命令提示符進入該文件夾 執行命令初始化

npm init

按照提示輸入相關信息，如果是用默認值則直接回車即可。

name: 項目名稱

version: 項目版本號

description: 項目描述

keywords: {Array}關鍵詞，便于用戶搜索到我們的項目

最后會生成package.json文件，這個是包的配置文件，相當于maven的pom.xml

我們之后也可以根據需要進行修改。

3.2.2 本地安裝

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

npm install express

出現黃色的是警告信息，可以忽略，請放心，你已經成功執行了該命令。

在該目錄下已經出現了一個node_modules文件夾 和package-lock.json

node_modules文件夾用于存放下載的js庫（相當于maven的本地倉庫）

package-lock.json是當 node_modules 或 package.json 發生變化時自動生成的文件。這個文件主要功能是確定當前安裝的包的依賴，以便后續重新安裝的時候生成相同的依賴，而忽略項目開發過程中有些依賴已經發生的更新。

我們再打開package.json文件，發現剛才下載的express已經添加到依賴列表中了.

關于版本號定義：

指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式規定，安裝時只安裝指定版本。波浪號（tilde）+指定版本：比如~1.2.2，表示安裝1.2.x的最新版本（不低于1.2.2），但是不安裝1.3.x，也就是說安裝時不改變大版本號和次要版本號。插入號（caret）+指定版本：比如?1.2.2，表示安裝1.x.x的最新版本（不低于1.2.2），但是不安裝2.x.x，也就是說安裝時不改變大版本號。需要注意的是，如果大版本號為0，則插入號的行為與波浪號相同，這是因為此時處于開發階段，即使是次要版本號變動，也可能帶來程序的不兼容。latest：安裝最新版本。

3.2.3 全局安裝

剛才我們使用的是本地安裝，會將js庫安裝在當前目錄，而使用全局安裝會將庫安裝到你的全局目錄下。

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

npm root -g

我的全局目錄在

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

比如我們全局安裝jquery, 輸入以下命令

npm install jquery -g

3.2.4 批量下載

我們從網上下載某些代碼，發現只有package.json,沒有node_modules文件夾，這時我們需要通過命令重新下載這些js庫.

進入目錄（package.json所在的目錄）輸入命令

npm install

此時，npm會自動下載package.json中依賴的js庫.

3.2.5淘寶NPM鏡像

有時我們使用npm下載資源會很慢，所以我們可以安裝一個cnmp(淘寶鏡像)來加快下載速度。

輸入命令，進行全局安裝淘寶鏡像。

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

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

cnpm -v

使用cnpm

cnpm install 需要下載的js庫

3.2.6 運行工程

如果我們想運行某個工程，則使用run命令

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

dev是開發階段測試運行

build是構建編譯工程

lint 是運行js代碼檢測

我們現在來試一下運行dev

npm run dev

3.2.7 編譯工程

我們接下來，測試一個代碼的編譯.編譯后我們就可以將工程部署到nginx中啦~

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

npm run build

生成后我們會發現只有個靜態頁面，和一個static文件夾

這種工程我們稱之為單頁Web應用（single page web application，SPA），就是只有一張Web頁面的應用，是加載單個HTML 頁面并在用戶與應用程序交互時動態更新該頁面的Web應用程序。

這里其實是調用了webpack來實現打包的，關于webpack我們后續的章節進行介紹

4 Webpack

4.1 什么是Webpack

Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。從圖中我們可以看出，Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態文件，減少了頁面的請求。 接下來我們簡單為大家介紹 Webpack 的安裝與使用

4.2 Webpack安裝

全局安裝

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

安裝后查看版本號

webpack -v

4.3 快速入門

4.3.1 JS打包

（1）創建src文件夾，創建bar.js

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

（2）src下創建logic.js

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

（3）src下創建main.js

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

（4）創建配置文件webpack.config.js ，該文件與src處于同級目錄

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

以上代碼的意思是：讀取當前目錄下src文件夾中的main.js（入口文件）內容，把對應的js文件打包，打包后的文件放入當前目錄的dist文件夾下，打包后的js文件名為bundle.js

（5）執行編譯命令

webpack

執行后查看bundle.js 會發現里面包含了上面兩個js文件的內容

（7）創建index.html ,引用bundle.js

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

測試調用index.html，會發現有內容輸出

4.3.2 CSS打包

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

Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進行轉換。

Loader 可以理解為是模塊和資源的轉換器，它本身是一個函數，接受源文件作為參數，返回轉換的結果。這樣，我們就可以通過 require 來加載任何類型的模塊或文件，比如 CoffeeScript、 JSX、 LESS 或圖片。首先我們需要安裝相關Loader插件，css-loader 是將 css 裝載到 javascript；style-loader 是讓 javascript 認識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文件夾創建css文件夾,css文件夾下創建css1

body{background:red; }

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

require('./css1.css');

（5）重新運行webpack

（6）運行index.html看看背景是不是變成紅色啦？

5 開發工具VsCode

5.1 VsCode簡介

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

5.2 VsCode安裝與配置

5.2.1安裝

官網下載 https://code.visualstudio.com/

默認安裝即可

5.2.2插件安裝

VsCode可以通過安裝插件來使編輯器變的更加強大

以下為前端開發工程師常用插件

（1）HTML Snippets

超級實用且初級的 H5代碼片段以及提示

（2）HTML CSS Support

讓 html 標簽上寫class 智能提示當前項目所支持的樣式 新版已經支持scss文件檢索

（3）Debugger for Chrome

讓 vscode 映射 chrome 的 debug功能，靜態頁面都可以用 vscode 來打斷點調試，真666~

（4）vetur

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

（5）VueHelper

snippet代碼片段

5.2.3配置自動保存

點擊菜單 ：文件–勾選自動保存

6 ES6

6.1 什么是ES6

編程語言JavaScript是ECMAScript的實現和擴展 。ECMAScript是由ECMA（一個類似W3C的標準組織）參與進行標準化的語法規范。ECMAScript定義了：

語言語法 – 語法解析規則、關鍵字、語句、聲明、運算符等。

類型 – 布爾型、數字、字符串、對象等。

原型和繼承

內建對象和函數的標準庫 – JSON、Math、數組方法、對象自省方法等。

ECMAScript標準不定義HTML或CSS的相關功能，也不定義類似DOM（文檔對象模型）的Web API，這些都在獨立的標準中進行定義。ECMAScript涵蓋了各種環境中JS的使用場景，無論是瀏覽器環境還是類似node.js的非瀏覽器環境。

ECMAScript標準的歷史版本分別是1、2、3、5。

那么為什么沒有第4版？其實，在過去確實曾計劃發布提出巨量新特性的第4版，但最終卻因想法太過激進而慘遭廢除（這一版標準中曾經有一個極其復雜的支持泛型和類型推斷的內建靜態類型系統）。

ES4飽受爭議，當標準委員會最終停止開發ES4時，其成員同意發布一個相對謙和的ES5版本，隨后繼續制定一些更具實質性的新特性。這一明確的協商協議最終命名為“Harmony”，因此，ES5規范中包含這樣兩句話

ECMAScript是一門充滿活力的語言，并在不斷進化中。

未來版本的規范中將持續進行重要的技術改進

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

ECMAScript 6.0（以下簡稱ES6）是JavaScript語言的下一代標準，2015年6月正式發布。它的目標，是使得JavaScript語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。

6.2 Node.js中使用ES6

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

（1）babel轉換配置,項目根目錄添加.babelrc 文件

{"presets" : ['es2015'] }

（2）安裝es6轉換模塊

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

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

cnpm install babel-cli -g

（4）使用

babel-node js文件名

6.3 語法新特性

6.3.1 變量聲明let

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

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

以上的代碼實際上是:

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

所以不用關心bool是否為true or false。實際上，無論如何test都會被創建聲明。

接下來ES6主角登場：

我們通常用let和const來聲明，let表示變量、const表示常量。let和const都是塊級作用域。怎么理解這個塊級作用域？在一個函數內部 ，在一個代碼塊內部。看以下代碼

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

6.3.2 常量聲明

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

const name = 'lux' name = 'joe' //再次賦值此時會報錯

6.3.3 模板字符串

es6模板字符簡直是開發者的福音啊，解決了ES5在字符串功能上的痛點。

第一個用途，基本的字符串格式化。將表達式嵌入字符串中進行拼接。用${}來界定。

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

第二個用途，在ES5時我們通過反斜杠()來做多行字符串或者字符串一行行拼接。ES6反引號(``)直接搞定。

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

6.3.4 函數默認參數

ES6為參數提供了默認值。在定義函數時便初始化了這個參數，以便在參數沒有被傳遞進去時使用。

看例子代碼

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

6.3.5 箭頭函數

ES6很有意思的一部分就是函數的快捷寫法。也就是箭頭函數。

箭頭函數最直觀的三個特點。

1不需要function關鍵字來創建函數

2省略return關鍵字

3繼承當前上下文的 this 關鍵字

看下面代碼（ES6）

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

相當于ES5代碼

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

6.3.6 對象初始化簡寫

ES5我們對于對象都是以鍵值對的形式書寫，是有可能出現鍵值對重名的。例如

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

以上代碼可以簡寫為

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

6.3.7 解構

數組和對象是JS中最常用也是最重要表示形式。為了簡化提取信息，ES6新增了解構，這是將一個數據結構分解為更小的部分的過程

ES5我們提取對象中的信息形式如下

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

是不是覺得很熟悉，沒錯，在ES6之前我們就是這樣獲取對象信息的，一個一個獲取。現在，ES6的解構能讓我們從對象或者數組里取出數據存為變量，例如

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

6.3.8 Spread Operator

ES6中另外一個好玩的特性就是Spread Operator 也是三個點兒…接下來就展示一下它的用途。 組裝對象或者數組

//數組const color = ['red', 'yellow']const colorful = [...color, 'green', 'pink']console.log(colorful) //[red, yellow, green, pink]//對象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導入模塊、export導出模塊

lib.js

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

demo9.js

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

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

babel-node demo9

6.3.10 Promise（自學內容）

Promise 是異步編程的一種解決方案，比傳統的解決方案–回調函數和事件－－更合理和更強大。它由社區最早提出和實現，ES6將其寫進了語言標準，統一了語法，原生提供了Promise.此知識點屬于本章自學內容，請同學們百度promise查閱文章完成自學（完成測試代碼，整理自學筆記）。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。