Node.js

什麼是Node.js

簡單的說 Node.js 就是運行在服務端的 JavaScript。
Node.js 是一個基於Chrome JavaScript 運行時建立的一個平臺。
Node.js是一個事件驅動I/O服務端JavaScript環境，基於Google的V8引擎，V8引擎執行Javascript的速度非常快，性能非常好。

Node.js安裝

1、下載對應你係統的Node.js版本:
https://nodejs.org/en/download/

2、選安裝目錄進行安裝
點擊下一步…下一步…默認安裝即可

3.測試
在命令提示符下輸入命令
node -v
會顯示當前node的版本

開發工具VsCode

VsCode簡介

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

VsCode安裝與配置

安裝
官網下載 https://code.visualstudio.com/
默認安裝即可

插件安裝
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代碼片段
配置自動保存
點擊菜單：文件–勾選自動保存

NodeJs快速入門

控制檯輸出

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

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

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

node demo01.js

使用函數

創建文本文件demo02.js

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

命令提示符輸入命令

node demo2.js

運行後看到輸出結果爲300

模塊化編程

創建文本文件demo03_1.js

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

創建文本文件demo03_2.js

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

我們在命令提示符下輸入命令
node demo03_2.js

結果爲1000

創建web服務器

創建文本文件demo04.js

var http = require('http');
http.createServer(function (request, response) {
    // 發送 HTTP 頭部 
    // HTTP 狀態值: 200 : OK
    // 內容類型: text/plain
    response.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 demo04.js

服務啓動後，我們打開瀏覽器，輸入網址
http://localhost:8888/

即可看到網頁輸出結果Hello World，心情是不是很激動呢？
如果想終止服務的運行，在命令提示符Ctrl+c即可。

理解服務端渲染

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

var http = require('http');
http.createServer(function (request, response) {
    // 發送 HTTP 頭部 
    // HTTP 狀態值: 200 : OK
    // 內容類型: text/plain
    response.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很是相似。

接收參數

創建demo06.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

在瀏覽器測試結果

包資源管理器NPM

什麼是NPM

npm全稱Node Package Manager，他是node包管理和分發工具。其實我們可以把NPM理解爲java中的Maven。
我們通過npm 可以很方便地下載js庫，管理前端工程。
最近版本的node.js已經集成了npm工具，在命令提示符輸入 npm -v 可查看當前npm版本。

NPM命令

初始化工程

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

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

npm init

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

name: 項目名稱
version: 項目版本號
description: 項目描述
keywords: {Array}關鍵詞，便於用戶搜索到我們的項目

最後會生成package.json文件，這個是包的配置文件，相當於maven的pom.xml
我們之後也可以根據需要進行修改。

本地安裝

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：安裝最新版本。

全局安裝

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

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

npm root -g

我的全局目錄在
C:\Users\it\AppData\Roaming\npm\node_modules

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

npm install jquery -g

批量下載

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

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

npm install

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

淘寶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

編譯工程

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

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

npm run build

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

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

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

Webpack

什麼是Webpack

Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關係進行靜態分析，然後將這些模塊按照指定的規則生成對應的靜態資源。
官網： https://www.webpackjs.com/

從圖中我們可以看出，Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態文件，減少了頁面的請求。 接下來我們簡單爲大家介紹 Webpack 的安裝與使用

Webpack安裝

全局安裝

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

安裝後查看版本號

webpack -v

快速入門

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文件的內容
（6）創建index.html ,引用bundle.js

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

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

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文件夾下創建css1.css

body{
 background:red;
}

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

require('./css1.css');

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

ES6

什麼是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語言可以用來編寫複雜的大型應用程序，成爲企業級開發語言。

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的文件名

語法新特性

變量聲明let

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

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

以上的代碼實際上是:

function aa(bool) {
    var test // 變量提升
    if(bool) {
        test = 'hello man'
    } 
console.log(test)
}
aa(true);

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

接下來ES6主角登場：

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

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

常量聲明

const 用於聲明常量，看以下代碼
const name = ‘feifei’
name = ‘yaya’ //再次賦值此時會報錯

模板字符串

es6模板字符簡直是開發者的福音啊，解決了ES5在字符串功能上的痛點。
第一個用途，基本的字符串格式化。將表達式嵌入字符串中進行拼接。用${}來界定。

//es5 
var name = 'feifei'
console.log('hello' + name)
//es6
const name2 = 'yaya'
console.log(`hello ${name2}`) //hello yaya

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

// es5
var msg = "Hi \
man!"
// es6
const template = `<div>
    <span>hello world</span>
</div>`

函數默認參數

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

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

箭頭函數

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

箭頭函數最直觀的三個特點。
1不需要function關鍵字來創建函數
2省略return關鍵字
3繼承當前上下文的 this 關鍵字

看下面代碼

//ES5用法
function add(a,b){
    return a+b;
}
console.log(add(100,200));
	
//ES6用法
add2 = (a,b) => {
    return a+b;
}
console.log(add2(100,200));

//省略return關鍵字
add3 = (a,b) => a+b;
console.log(add3(100,200));

對象初始化簡寫

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

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

以上代碼可以簡寫爲

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

解構

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

const people = {
        name: 'feifei',
        age: 20
    };
const name = people.name;
const age = people.age;
console.log(name + ' --- ' + age);

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

	const people = {
        name: 'feifei',
        age: 20
};
//大括號中的取值必須與對象中的屬性名一致
    const { name, age } = people;
    console.log(`${name} --- ${age}`);
    //數組
    const color = ['red', 'blue'];
    const [first, second] = color;
    console.log(first); //'red'
    console.log(second); //'blue'

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"

import 和 export

import導入模塊、export導出模塊

lib.js

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

demo09.js

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

注意：node(v8.x)本身並不支持import關鍵字，所以我們需要使用babel的命令行工具來執行

babel-node demo09

Node、Npm、ES6

Node.js

什麼是Node.js

Node.js安裝

開發工具VsCode

VsCode簡介

VsCode安裝與配置

NodeJs快速入門

控制檯輸出

使用函數

模塊化編程

創建web服務器

理解服務端渲染

接收參數

包資源管理器NPM

什麼是NPM

NPM命令

初始化工程

本地安裝

全局安裝

批量下載

淘寶NPM鏡像

編譯工程

Webpack

什麼是Webpack

Webpack安裝

快速入門

JS打包

CSS打包

ES6

什麼是ES6

Node.js中使用ES6

語法新特性

變量聲明let

常量聲明

模板字符串

函數默認參數

箭頭函數

對象初始化簡寫

解構

Spread Operator

import 和 export