Ext JS學習第十六天 事件機制event（一）
此文用來記錄學習筆記；css
休息了好幾天，從今天開始繼續保持更新，鞭策本身學習html
今天咱們來講一說什麼是事件,對於事件，相信你必定不陌生，前端
基本事件是什麼？就相似於click、keypress、focus、mouseover等這些事件都是瀏覽器定義好的內置事件，咱們直接使用便可。對於高級事件，無非就是本身去設計一個事件，就好比咱們實際項目中，一般都伴隨些業務邏輯，多是曾刪改查等...這些事件都是非原生事件，也就是瀏覽器沒法自行判別觸發的。可是咱們確實有需求去實現他們，從而讓咱們開發起來更爽一些。java
首先咱們來看事件的幾種綁定方式：node
第一種html方式：很簡單直接給出代碼jquery
<body> <input type="button" id="btn1" value="第一種事件綁定方式" onClick="hello()"> </body>
第二種綁定方式：dom方式git
首先咱們先構造幾個按鈕程序員
<body> <input type="button" id="btn1" value="第一種事件綁定方式" onClick="hello()"><br> <input type="button" id="btn2" value="第二種事件綁定方式"><br> <input type="button" id="btn3" value="第三種事件綁定方式"><br> <input type="button" id="btn4" value="單擊我吧"><br> <input type="button" id="btn5" value="按鈕5"> </body>
好了，開始第二種綁定方式，看栗子github
(function(){
Ext.onReady(function(){
if(Ext.isIE){
document.getElementById("btn2").attachEvent("onclick",function(){
alert("第二種事件綁定方式");
});
}else{
document.getElementById("btn2").addEventListener("click",function(){
alert("第二種事件綁定方式");
});
}
})
})();
第三種綁定方式：Ext方式web
(function(){
Ext.onReady(function(){
Ext.get('btn3').on("click",function(){
alert("第三種事件綁定方式");
})
})
})();
明天咱們繼續學習如何自定義事件進行觸發
我的 網站 www.fishcmonkey.com
DotNet進階系列(持續更新)
一. 回顧歷史
回顧我的發展歷程，自2012年初次接觸開發至今(2018年)已經有六個年頭，這期間陸陸續續學習並掌握了很多技術，C#語言、ORM框架、多線程技術、設計模式、前端技術、MVC、MVVM框架思想等等，每種技術隨着屢次使用，隨着不斷的反思，逐漸經歷 「瞭解→理解→掌握→精通 」這麼一個過程，從最初的只能實現功能到現在的「每一步都考慮性能優化問題」，在近兩年內，開始寫博客，最初只是一時興起，想讓百度上能搜索出個人文章，但如今已經造成一個習慣，在沒有特殊事情耽擱的狀況下，堅持一週兩篇博客，到目前爲止，有效文章數已經達到140多篇，固然後面還會陸續寫下去。
做爲理科生出身的我，沒有華麗的辭藻 ，沒有煽情篇章，話很少說，回顧完我的開發歷程，下面看一下C#和.Net的發展歷程，再次補充一點，.Net不是一門開發語言，而C#纔是基於.Net運行環境下的一種高級開發語言。
從上面的表格能夠看出來，C#這麼語言至今已經接近20年曆史了，從2002年誕生的那一刻起，不斷更新，不斷改進，功能愈來愈強大，愈來愈方便程序們的開發，固然.NET類庫、CLR、以及開發神器Visual Studio也在不端更新。（VS 2017 宇宙第一開發神器 這個應該毫無爭議吧）
以前曾說過，C#僅僅是.Net下的一門開發語言而已，.Net生態遠遠不止如此。
咱們之前提到.Net，指的都是.Net FrameWork，常常被java程序員嘲笑，.Net不能跨平臺，但如今不會來，他們能夠閉嘴了，.Net Core就是爲跨平臺而生，下面簡單總結一下.Net生態。
(1) 語言有：C# 、F#、VB
(2) C/S程序開發技術有：WinForm、WPF
(3) B/S程序開發技術有：ASP.Net WebForm 、ASP.Net MVC、Core MVC
(4) 通信技術有：WebAPI、WCF、SignalR
(5) 日誌框架有：Log4Net
(6) 數據庫訪問技術有：ADO.NET 、EF
這裏再也不繼續列舉了，也沒有必要再列舉了，由於對於新時代合格的工程師而言，沒有人限制你只能掌握一種技術，任何一個大型的信息系統，都是有多種技術組合而來，在如今一個大一統的時代，連.Net的生身父母「微軟」都開源了，難道小小的你還能故步自封嗎？
二. 掃盲C#運行原理
C#做爲一門高級語言，機器是不認識的，那麼它是怎麼編譯成讓機器碼讓機器識別呢，一張圖勝似千言萬語，請看下圖。
概念補充：
CTS：C#、F#、VB都必須遵照的通用類型
CLS：通用語言規範（CLS是CTS的一個子集）
BCL：基礎類庫
總結：C#是一種面向對象的高級編程語言，符合CLR中的CLS(通用語言規範)
.Net Framework包含三部分：
1 CLR
2 編程工具
3 BCL(基類庫)
三. 基礎進階系列及章節詳細介紹
最近一直在考慮初學者學習.Net應該從哪學起，上面說的天花亂墜，有什麼用呢？ 若是連.Net最基礎的知識都掌握不了，還談什麼開發呢？
這裏結合我本身的理解，整理出一條較爲合適的路線，並對以前的博客從新排版從新改寫，造成這個【DotNet進階篇】系列，一方面方便本身往後複習，另外一方面也爲.Net社區盡一點綿薄之力。
第一節：從面向對象思想(oo)開發、接口、抽象類以及兩者比較
第二節：重寫（new）、覆寫（overwrite）、和重載（overload）
第三節：深度剖析各種數據結構(Array、List、Queue、Stack)及線程安全問題和yeild關鍵字
第五節：泛型(泛型類、接口、方法、委託、泛型約束、泛型緩存、逆變和協變)
第七節：語法總結(1)(自動屬性、out參數、對象初始化器、var和dynamic等)
第九節：委託和事件(1)(委託的發展歷史、插件式編程、多播委託)
第十節：委託和事件(2)(泛型委託、Func和Action、事件及與委託的比較)
第十一節：特性(常見的特性標籤、自定義特性、特性的使用案例)
第十五節：Expression表達式目錄樹(與委託的區別、自行拼接、總結幾類實例間的拷貝)
第十七節：易混淆的概念(靜態和非靜態、拆箱和裝箱、值傳遞和引用傳遞、深拷貝和淺拷貝)(持續更新)
第二十二節：XXXXXXXXXXXXXXXXXXXXXXXX
第二十三節：XXXXXXXXXXXXXXXXXXXXXXXX
第一節：.Net版基於WebSocket的聊天室樣例
一. 說在前面的話
該篇文章爲實時通信系列的第一節，基於WebSocket編寫了一個簡易版聊天樣例，主要做用是爲引出後面SignalR系列的用法及其強大方便之處，經過這個樣例與後續的SignalR對比，能夠體會到用原生的WebSocket編程的不靈活以及繁瑣之處。（PS：下面那個案例 編寫+調試 用了大約2個小時的時間）
特別強調：該案例只是一個簡易版的Demo，實現了一些基本的功能，起到一個基本入門的做用，在一些細節方面的限制、驗證、以及關鍵信息的存放位置是有必定缺陷的，在實際項目中，須要根據實際狀況進行調整。
後面打算以一個真實的微信項目爲例【二人奪寶】以下圖，介紹裏面須要用到的實時通信技術，即SignalR在裏面起到的做用，你會發現若是業務複雜，若是採用原生的WebSocket進行編程，「你能累死」，或者說有些功能很難實現。
最後以一個真實的App混合開發項目【紅猴代派】以下圖，介紹用SignalR替代推送技術的實現。
ps：鑑於保密協議，以上提到的兩個項目名稱並不是最終上線的真實名稱。
二. WebSocket簡介
WebSocket能夠經過JS與服務器端創建實時的雙向通訊，它主要包括：2個核心方法、4個監聽函數、1個核心屬性。
2個核心方法：
① send() 向遠程服務器發送信息
② close() 關閉與遠程服務器的鏈接
4個監聽函數：
① onopen 當網絡鏈接創建成功時觸發該事件
② onerror 當網絡發生錯誤時觸發該事件
③ onclose 當網絡鏈接被關閉時觸發該事件
④ onmessage 當websocket接收到服務器發來的消息的時觸發該事件
1個核心屬性：readyState，它有四種狀態
① WebSocket.OPEN：表示與服務器已經創建好鏈接
② WebSocket.CLOSED：表示與服務器鏈接已經斷開
③ WebSocket.CONNECTING：表示正在嘗試與服務創建鏈接
④ WebSocket.CLOSING：表示正在關閉與服務器鏈接
服務器端主要用到兩個方法：
① SendAsync() 發送信息給客戶端
② CloseAsync() 關閉該Socket鏈接
三. 聊天室實現的功能
1. 經過輸入登陸標記，進行創建鏈接，會提示當前全部在線的人(包括本身)，登陸成功。（Ps：同一個標記不能重複登陸）
2. 點擊關閉鏈接，斷開當前鏈接，提示除了本身之外的全部人，「某某離開了」。
3. 羣發功能：給全部在線的人（本身除外）的發送消息。
4. 單發功能：點對點發送消息。（須要輸入內容和接收人的標識）
四. 代碼分享
代碼主要分爲3部分組成：前端html頁面、服務器端ashx通常處理程序、封裝的消息發送幫助類。
前端頁面代碼：
1 @{
2 Layout = null;
3 }
4
5 <!DOCTYPE html>
6
7 <html>
8 <head>
9 <meta name="viewport" content="width=device-width" />
10 <title>Index</title>
11 <script src="~/Scripts/jquery-3.3.1.min.js"></script>
12 <script>
13
14 //封裝WebSocket的相關方法
15 (function (w) {
16 //聲明全局對象
17 var ws; //websocket對象
18 var url = "ws://localhost:9008/webSocketHandler.ashx"; //鏈接地址
19 var mainUitls = {
20 //1.初始化基本事件
21 init: function () {
22 this.initClick();
23 },
24 //2.創建通信事件
25 initConnect: function () {
26 var newUrl = url + "?userKey=" + $("#j_userKey").val();
27 ws = new WebSocket(newUrl);
28 //2.1 網絡創建鏈接的時候觸發該事件
29 ws.onopen = function () {
30 $('#j_notice').html('已經鏈接');
31 }
32 //2.2 接受服務器發來消息時觸發事件
33 ws.onmessage = function (evt) {
34 $("#j_Msg").append("<li>" + evt.data + "</li>");
35 }
36 //2.3 網絡錯誤時候觸發
37 ws.onerror = function (evt) {
38 $('#j_notice').html(JSON.stringify(evt));
39 }
40 //2.4 當鏈接關閉的時候觸發該事件
41 ws.onclose = function () {
42 //這裏根據實際場景來編寫 (好比斷線重連機制)
43 //該版本只是簡單的給個提示
44 $('#j_notice').html("鏈接斷開");
45 }
46 },
47 //3. 各類點擊事件
48 initClick: function () {
49 //3.1 創建鏈接
50 $("#j_connect").on("click", function () {
51 if ($("#j_userKey").val()=="") {
52 $('#j_notice').html("請輸入用戶標記");
53 return;
54 }
55 mainUitls.initConnect();
56 });
57 //3.2 關閉鏈接
58 $("#j_close").on("click", function () {
59 ws.close();
60 });
61 //3.3 羣發發送消息
62 $("#j_send").on("click", function () {
63 //表示與服務器已經創建好鏈接
64 if (ws.readyState == WebSocket.OPEN) {
65 ws.send($('#j_content').val());
66 }
67 //表示與服務器鏈接已經斷開
68 else if (ws.readyState == WebSocket.CLOSED) {
69 $('#j_notice').html('與服務器鏈接已經斷開');
70 }
71 //表示正在嘗試與服務創建鏈接
72 else if (ws.readyState == WebSocket.CONNECTING) {
73 $('#j_notice').html('正在嘗試與服務創建鏈接');
74 }
75 //正在關閉與服務器鏈接
76 else if (ws.readyState == WebSocket.CLOSING) {
77 $('#j_notice').html('正在關閉與服務器鏈接');
78 }
79
80 });
81 //3.4 單發消息
82 $("#j_send2").on("click", function () {
83 var msg = $('#j_receiveUserKey').val();
84 if (msg=="") {
85 $('#j_notice').html('請輸入接收人的標識');
86 return;
87 }
88 //下面對內容進行拼接
89 // "$--$--**" + msg + "$--$--**" + "發送的內容";
90
91 var finalMsg = "$--$--**" + msg + "$--$--**" + $('#j_content').val();
92
93 //表示與服務器已經創建好鏈接
94 if (ws.readyState == WebSocket.OPEN) {
95 ws.send(finalMsg);
96 }
97 //表示與服務器鏈接已經斷開
98 else if (ws.readyState == WebSocket.CLOSED) {
99 $('#j_notice').html('與服務器鏈接已經斷開');
100 }
101 //表示正在嘗試與服務創建鏈接
102 else if (ws.readyState == WebSocket.CONNECTING) {
103 $('#j_notice').html('正在嘗試與服務創建鏈接');
104 }
105 //正在關閉與服務器鏈接
106 else if (ws.readyState == WebSocket.CLOSING) {
107 $('#j_notice').html('正在關閉與服務器鏈接');
108 }
109
110 });
111 }
112
113 };
114
115 w.mainUitls = mainUitls;
116 })(window)
117
118 $(function () {
119 mainUitls.init();
120 });
121 </script>
122 </head>
123 <body>
124 <div>
125 <div><span>提示：</span><span id="j_notice"></span></div>
126 <div style="margin-top:20px">
127 <input type="text" name="name" value="" placeholder="請輸入登陸標識" id="j_userKey" />
128 <button id="j_connect">創建鏈接</button>
129 <button id="j_close">關閉鏈接</button>
130 </div>
131 <div style="margin-top:20px">
132 <input type="text" value="" placeholder="請輸入發送內容" id="j_content" />
133 <button id="j_send">羣發</button>
134 </div>
135
136 <div style="margin-top:20px">
137 <input type="text" value="" placeholder="請輸入接收人標識" id="j_receiveUserKey" />
138 <button id="j_send2">單發</button>
139 </div>
140 <div>
141 <ul id="j_Msg"></ul>
142 </div>
143 </div>
144 </body>
145 </html>
通常處理程序代碼：
1 using System;
2 using System.Collections.Concurrent;
3 using System.Collections.Generic;
4 using System.Linq;
5 using System.Net.WebSockets;
6 using System.Text;
7 using System.Threading;
8 using System.Threading.Tasks;
9 using System.Web;
10 using System.Web.SessionState;
11 using System.Web.WebSockets;
12
13 namespace WebSocketDemo
14 {
15 /// <summary>
16 /// webSocketHander
17 /// </summary>
18 public class webSocketHandler : IHttpHandler, IRequiresSessionState
19 {
20 //用戶登記標識
21 private string userKey = "";
22 public void ProcessRequest(HttpContext context)
23 {
24 if (context.IsWebSocketRequest)
25 {
26 this.userKey = context.Request.QueryString["userKey"];
27 context.AcceptWebSocketRequest(ProcessChat);
28 }
29 else
30 {
31 context.Response.Write("不是WebSocket請求");
32 }
33 }
34 private async Task ProcessChat(AspNetWebSocketContext context)
35 {
36 WebSocket socket = context.WebSocket;
37 CancellationToken cancellationToken = new CancellationToken();
38 bool isExits = WebManager.AddUser(userKey, socket);
39 if (isExits == false)
40 {
41 //表示該用戶有在線
42 await WebManager.SendToMySelf(cancellationToken, $"用戶【{this.userKey}】 已在線", this.userKey);
43 }
44 else
45 {
46 //表示登陸成功
47 //某人登錄後，給羣裏其餘人發送提示信息(本人除外)
48 await WebManager.SendLoginSucesssNotice(cancellationToken, $"用戶【{this.userKey}】 進入聊天室,當前時間：{DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")}");
49 while (socket.State == WebSocketState.Open)
50 {
51 ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
52 //接受指令
53 WebSocketReceiveResult result = await socket.ReceiveAsync(buffer, cancellationToken);
54 //表示是關閉指令
55 if (result.MessageType == WebSocketMessageType.Close)
56 {
57 //移除該用戶對應的socket對象
58 WebManager.RemoveUser(userKey);
59 //發送離開提醒
60 await WebManager.SendOutNotice(cancellationToken, $"用戶【{this.userKey}】 離開聊天室,當前時間：{DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")}");
61 await socket.CloseAsync(WebSocketCloseStatus.NormalClosure, String.Empty, cancellationToken);
62 }
63 //獲取是發送消息指令
64 else
65 {
66 string userMsg = Encoding.UTF8.GetString(buffer.Array, 0, result.Count);
67 //這裏要區分是單發仍是羣發(經過與前端在內容開頭作一個標記，來區分是單發仍是羣發)
68 if (userMsg.Length > 8 && userMsg.Substring(0, 8) == "$--$--**")
69 {
70 //表示是單發，截取內容和接受者的標記
71 var array = userMsg.Split(new string[] { "$--$--**" }, StringSplitOptions.None);
72 var receiveNotice = array[1];
73 string content = $"用戶【{this.userKey}】 發來消息：{array[2]},當前時間：{DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")}";
74 WebManager.SendSingleMessage(cancellationToken, content, receiveNotice);
75 }
76 else
77 {
78 //表示羣發信息
79 string content = $"用戶【{this.userKey}】 羣發消息：{userMsg},當前時間：{DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")}";
80 WebManager.SendAllMessage(cancellationToken, content, userKey);
81 }
82 }
83 }
84 }
85
86 }
87
88 /// <summary>
89 /// true 若是 System.Web.IHttpHandler 實例是可重複使用; 不然爲 false。
90 /// </summary>
91 public bool IsReusable
92 {
93 get
94 {
95 return false;
96 }
97 }
98 }
99
100
101 }
幫助類代碼：
1 using System;
2 using System.Collections.Concurrent;
3 using System.Collections.Generic;
4 using System.Linq;
5 using System.Net.WebSockets;
6 using System.Text;
7 using System.Threading;
8 using System.Threading.Tasks;
9 using System.Web;
10 using System.Web.SessionState;
11
12
13 namespace WebSocketDemo
14 {
15 /// <summary>
16 /// webSocket幫助類
17 /// </summary>
18 public class WebManager
19 {
20 /// <summary>
21 /// 這採用ConcurrentDictionary字典，是線程安全的，不須要加鎖
22 /// </summary>
23 private static ConcurrentDictionary<string, WebSocket> _UserDictionary = new ConcurrentDictionary<string, WebSocket>();
24
25 #region 01-增長用戶
26 /// <summary>
27 /// 增長用戶
28 /// </summary>
29 /// <param name="userKey"></param>
30 /// <param name="socket"></param>
31 public static bool AddUser(string userKey, WebSocket socket)
32 {
33
34 bool flag = _UserDictionary.Select(d => d.Key).ToList().Contains(userKey);
35 if (flag == false)
36 {
37 _UserDictionary[userKey] = socket;
38 return true;
39 }
40 else
41 {
42 //表示該用戶在線
43 return false;
44
45 }
46 }
47 #endregion
48
49 #region 02-移除用戶
50 /// <summary>
51 /// 移除用戶
52 /// </summary>
53 /// <param name="userKey"></param>
54 public static void RemoveUser(string userKey)
55 {
56 WebSocket socket = null;
57 _UserDictionary.TryRemove(userKey, out socket);
58 }
59 #endregion
60
61 #region 03-登陸提醒
62
63 /// <summary>
64 /// 登陸提醒（包括本身）
65 /// </summary>
66 /// <param name="cancellationToken"></param>
67 /// <param name="content"></param>
68 /// <returns></returns>
69 public static async Task SendLoginSucesssNotice(CancellationToken cancellationToken, string content)
70 {
71 ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
72 buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(content));
73 //登陸提醒（包括本身）
74 foreach (var socket in _UserDictionary.Select(d => d.Value))
75 {
76 await socket.SendAsync(buffer, WebSocketMessageType.Text, true, cancellationToken);
77 }
78 }
79
80 #endregion
81
82 #region 04-離開提醒
83
84 /// <summary>
85 /// 離開提醒
86 /// </summary>
87 /// <param name="cancellationToken"></param>
88 /// <param name="content"></param>
89 /// <returns></returns>
90 public static async Task SendOutNotice(CancellationToken cancellationToken, string content)
91 {
92 ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
93 buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(content));
94 //離開提醒
95 foreach (var socket in _UserDictionary.Select(d => d.Value))
96 {
97 await socket.SendAsync(buffer, WebSocketMessageType.Text, true, cancellationToken);
98 }
99 }
100
101 #endregion
102
103 #region 05-羣發消息，不包括本身
104 /// <summary>
105 /// 羣發消息，不包括本身
106 /// </summary>
107 /// <param name="cancellationToken"></param>
108 /// <param name="content"></param>
109 /// <param name="myUserKey">當前用戶標記</param>
110 /// <returns></returns>
111 public static void SendAllMessage(CancellationToken cancellationToken, string content, string myUserKey)
112 {
113 try
114 {
115 ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
116 buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(content));
117 //羣發消息，但不包括本身
118 foreach (var item in _UserDictionary)
119 {
120 if (item.Key.ToString() != myUserKey)
121 {
122 item.Value.SendAsync(buffer, WebSocketMessageType.Text, true, cancellationToken);
123 }
124 }
125 }
126 catch (Exception ex)
127 {
128 var msg = ex.Message;
129 }
130 }
131 #endregion
132
133 #region 06-單發消息
134 /// <summary>
135 /// 單發消息
136 /// </summary>
137 /// <param name="cancellationToken"></param>
138 /// <param name="content"></param>
139 /// <param name="receiveKey">接收者的標識</param>
140 /// <returns></returns>
141 public static void SendSingleMessage(CancellationToken cancellationToken, string content, string receiveKey)
142 {
143 try
144 {
145 ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
146 buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(content));
147 //單發消息
148 foreach (var item in _UserDictionary)
149 {
150 if (item.Key.ToString() == receiveKey)
151 {
152 item.Value.SendAsync(buffer, WebSocketMessageType.Text, true, cancellationToken);
153 }
154 }
155 }
156 catch (Exception ex)
157 {
158 var msg = ex.Message;
159 }
160 }
161 #endregion
162
163 #region 07-給本身發送消息
164
165 /// <summary>
166 /// 給本身發送消息
167 /// </summary>
168 /// <param name="cancellationToken"></param>
169 /// <param name="content"></param>
170 /// <param name="userKey">當前標記</param>
171 /// <returns></returns>
172 public static async Task SendToMySelf(CancellationToken cancellationToken, string content,string userKey)
173 {
174 ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
175 buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(content));
176 //離開提醒
177 foreach (var item in _UserDictionary)
178 {
179 if (item.Key.ToString() == userKey)
180 {
181 await item.Value.SendAsync(buffer, WebSocketMessageType.Text, true, cancellationToken);
182 }
183 }
184 }
185 #endregion
186
187 }
188 }
最終實現效果：
五. 侷限與後續計劃
經過上面這個小例子，我以爲WebSocket主要有這麼兩個缺陷：
1. 衆所周知，不少低版本的瀏覽器不支持。
2. 代碼寫起來繁瑣，客戶端和服務器端之間不能自行指定方法名進行直接調用，好比上面單發和羣發在客戶端是隻能經過Send方法進行發送到服務器端固定的位置，使得不得不本身約定規則進行區分；再好比：客戶端消息的接受只能經過onmessage進行監聽，很是侷限不靈活。
而SignalR很好的解決了上面的兩個問題。
補充一張websocket的兼容性，下圖來自於網絡。
後續章節開始詳細的介紹SignalR的用法，大約3天一篇，有興趣的朋友能夠關注該系列，互相討論，共同提升。
第十五節：深刻理解async和await的做用及各類適用場景和用法
一. 同步VS異步
1. 同步 VS 異步 VS 多線程
2. 常見的異步方法（都以Async結尾）
① HttpClient類：PostAsync、PutAsync、GetAsync、DeleteAsync
② EF中DbContext類：SaveChangesAsync
③ 文件相關中的：WriteLineAsync
3. 引入異步方法的背景
好比我在後臺要向另外一臺服務器中獲取中的2個接口獲取信息，而後將兩個接口的信息拼接起來，一塊兒輸出，接口1耗時3s，接口2耗時5s，
① 傳統的同步方式：
須要的時間大約爲：3s + 5s =8s, 以下面 【案例1】
先分享一個同步請求接口的封裝方法，下同。
1 public class HttpService
2 {
3 /// <summary>
4 /// 後臺跨域請求發送代碼
5 /// </summary>
6 /// <param name="url">eg:http://ac.guojin.org/jeesite/regist/saveAppAgentAccount </param>
7 ///<param name="postData"></param>
8 /// 參數格式（手拼Json） string postData = "{\"name\":\"" + vip.comName + "\",\"shortName\":\"" + vip.shortName + + "\"}";
9 /// <returns></returns>
10 public static string PostData(string postData, string url)
11 {
12 HttpWebRequest req = (HttpWebRequest)WebRequest.Create(url);//後臺請求頁面
13 Encoding encoding = Encoding.GetEncoding("utf-8");//注意頁面的編碼，不然會出現亂碼
14 byte[] requestBytes = encoding.GetBytes(postData);
15 req.Method = "POST";
16 req.ContentType = "application/json";
17 req.ContentLength = requestBytes.Length;
18 Stream requestStream = req.GetRequestStream();
19 requestStream.Write(requestBytes, 0, requestBytes.Length);
20 requestStream.Close();
21 HttpWebResponse res = (HttpWebResponse)req.GetResponse();
22 StreamReader sr = new StreamReader(res.GetResponseStream(), System.Text.Encoding.GetEncoding("utf-8"));
23 string backstr = sr.ReadToEnd();//能夠讀取到從頁面返回的結果，以數據流的形式。
24 sr.Close();
25 res.Close();
26
27 return backstr;
28 }
而後在分享服務上的耗時操做，下同。
1 /// <summary>
2 /// 耗時方法 耗時3s
3 /// </summary>
4 /// <returns></returns>
5 public ActionResult GetMsg1()
6 {
7 Thread.Sleep(3000);
8 return Content("GetMsg1");
9
10 }
11
12 /// <summary>
13 /// 耗時方法 耗時5s
14 /// </summary>
15 /// <returns></returns>
16 public ActionResult GetMsg2()
17 {
18 Thread.Sleep(5000);
19 return Content("GetMsg2");
20
21 }
下面是案例1代碼
1 #region 案例1(傳統同步方式 耗時8s左右)
2 {
3 Stopwatch watch = Stopwatch.StartNew();
4 Console.WriteLine("開始執行");
5
6 string t1 = HttpService.PostData("", "http://localhost:2788/Home/GetMsg1");
7 string t2 = HttpService.PostData("", "http://localhost:2788/Home/GetMsg2");
8
9 Console.WriteLine("我是主業務");
10 Console.WriteLine($"{t1},{t2}");
11 watch.Stop();
12 Console.WriteLine($"耗時：{watch.ElapsedMilliseconds}");
13 }
14 #endregion
② 開啓新線程分別執行兩個耗時操做
須要的時間大約爲：Max(3s,5s) = 5s ,以下面【案例2】
1 #region 案例2(開啓新線程分別執行兩個耗時操做 耗時5s左右)
2 {
3 Stopwatch watch = Stopwatch.StartNew();
4 Console.WriteLine("開始執行");
5
6 var task1 = Task.Run(() =>
7 {
8 return HttpService.PostData("", "http://localhost:2788/Home/GetMsg1");
9 });
10
11 var task2 = Task.Run(() =>
12 {
13 return HttpService.PostData("", "http://localhost:2788/Home/GetMsg2");
14 });
15
16 Console.WriteLine("我是主業務");
17 //主線程進行等待
18 Task.WaitAll(task1, task2);
19 Console.WriteLine($"{task1.Result},{task2.Result}");
20 watch.Stop();
21 Console.WriteLine($"耗時：{watch.ElapsedMilliseconds}");
22 }
23 #endregion
既然②方式能夠解決同步方法串行耗時間的問題，但這種方式存在一個弊端，一個業務中存在多個線程，且須要對線程進行管理，相對麻煩，從而引出了異步方法。
這裏的異步方法 我 特指：系統類庫自帶的以async結尾的異步方法。
③ 使用系統類庫自帶的異步方法
須要的時間大約爲：Max(3s,5s) = 5s ,以下面【案例3】
1 #region 案例3(使用系統類庫自帶的異步方法 耗時5s左右)
2 {
3 Stopwatch watch = Stopwatch.StartNew();
4 HttpClient http = new HttpClient();
5 var httpContent = new StringContent("", Encoding.UTF8, "application/json");
6 Console.WriteLine("開始執行");
7 //執行業務
8 var r1 = http.PostAsync("http://localhost:2788/Home/GetMsg1", httpContent);
9 var r2 = http.PostAsync("http://localhost:2788/Home/GetMsg2", httpContent);
10 Console.WriteLine("我是主業務");
11
12 //經過異步方法的結果.Result能夠是異步方法執行完的結果
13 Console.WriteLine(r1.Result.Content.ReadAsStringAsync().Result);
14 Console.WriteLine(r2.Result.Content.ReadAsStringAsync().Result);
15
16 watch.Stop();
17 Console.WriteLine($"耗時：{watch.ElapsedMilliseconds}");
18 }
19 #endregion
PS：經過 .Result 來獲取異步方法執行完後的結果。
二. 利用async和await封裝異步方法
1. 首先要聲明幾點：
① async和await關鍵字是C# 5.0時代引入的，它是一種異步編程模型
② 它們自己並不建立新線程，但我能夠在自行封裝的async中利用Task.Run開啓新線程
③ 利用async關鍵字封裝的方法中若是寫所有都是一些串行業務, 且不用await關鍵字，那麼即便使用async封裝，也並無什麼卵用，並起不了異步方法的做用。
須要的時間大約爲：3s + 5s =8s, 以下面 【案例4】，而且封裝的方法編譯器會提示：「缺乏關鍵字await，將以同步的方式調用，請使用await運算符等待非阻止API或Task.Run的形式」（PS：非阻止API指系統類庫自帶的以Async結尾的異步方法）
1 //利用async封裝同步業務的方法
2 private static async Task<string> NewMethod5Async()
3 {
4 Thread.Sleep(3000);
5 //其它同步業務
6 return "Msg1";
7 }
8 private static async Task<string> NewMethod6Async()
9 {
10 Thread.Sleep(5000);
11 //其它同步業務
12 return "Msg2";
13 }
1 #region 案例4(async關鍵字封裝的方法中若是寫所有都是一些串行業務 耗時8s左右)
2 {
3 Stopwatch watch = Stopwatch.StartNew();
4
5 Console.WriteLine("開始執行");
6
7 Task<string> t1 = NewMethod5Async();
8 Task<string> t2 = NewMethod6Async();
9
10 Console.WriteLine("我是主業務");
11 Console.WriteLine($"{t1.Result},{t2.Result}");
12 watch.Stop();
13 Console.WriteLine($"耗時：{watch.ElapsedMilliseconds}");
14 }
15 #endregion
觀點結論1：從上面③中能夠得出一個結論，async中必需要有await運算符才能起到異步方法的做用，且await 運算符只能加在 系統類庫默認提供的異步方法或者新線程（如：Task.Run）前面。
如：下面【案例5】 和 【案例6】須要的時間大約爲：Max(3s,5s) = 5s
1 // 將系統類庫提供的異步方法利用async封裝起來
2 private static async Task<String> NewMethod1Async()
3 {
4 HttpClient http = new HttpClient();
5 var httpContent = new StringContent("", Encoding.UTF8, "application/json");
6 //執行業務
7 var r1 = await http.PostAsync("http://localhost:2788/Home/GetMsg1", httpContent);
8 return r1.Content.ReadAsStringAsync().Result;
9 }
10 private static async Task<String> NewMethod2Async()
11 {
12 HttpClient http = new HttpClient();
13 var httpContent = new StringContent("", Encoding.UTF8, "application/json");
14 //執行業務
15 var r1 = await http.PostAsync("http://localhost:2788/Home/GetMsg2", httpContent);
16 return r1.Content.ReadAsStringAsync().Result;
17 }
18
19 //將await關鍵字加在新線程的前面
20 private static async Task<string> NewMethod3Async()
21 {
22 var msg = await Task.Run(() =>
23 {
24 return HttpService.PostData("", "http://localhost:2788/Home/GetMsg1");
25 });
26 return msg;
27 }
28 private static async Task<string> NewMethod4Async()
29 {
30 var msg = await Task.Run(() =>
31 {
32 return HttpService.PostData("", "http://localhost:2788/Home/GetMsg2");
33 });
34 return msg;
35 }
1 #region 案例5(將系統類庫提供的異步方法利用async封裝起來 耗時5s左右)
2 //而且先輸出「我是主業務」，證實t1和t2是並行執行的，且不阻礙主業務
3 {
4 Stopwatch watch = Stopwatch.StartNew();
5
6 Console.WriteLine("開始執行");
7 Task<string> t1 = NewMethod1Async();
8 Task<string> t2 = NewMethod2Async();
9
10 Console.WriteLine("我是主業務");
11 Console.WriteLine($"{t1.Result},{t2.Result}");
12 watch.Stop();
13 Console.WriteLine($"耗時：{watch.ElapsedMilliseconds}");
14 }
15 #endregion
1 #region 案例6(將新線程利用async封裝起來 耗時5s左右)
2 //而且先輸出「我是主業務」，證實t1和t2是並行執行的，且不阻礙主業務
3 {
4 Stopwatch watch = Stopwatch.StartNew();
5
6 Console.WriteLine("開始執行");
7 Task<string> t1 = NewMethod3Async();
8 Task<string> t2 = NewMethod4Async();
9
10 Console.WriteLine("我是主業務");
11 Console.WriteLine($"{t1.Result},{t2.Result}");
12 watch.Stop();
13 Console.WriteLine($"耗時：{watch.ElapsedMilliseconds}");
14 }
15 #endregion
2. 幾個規則和約定
① async封裝的方法中，能夠有多個await，這裏的await表明等待該行代碼執行完畢。
② 咱們一般本身封裝的方法也要以Async結尾，方便識別
③ 異步返回類型主要有三種：Task<T> 、Task、Void
3. 測試得出其餘幾個結論
① 若是async封裝的異步方法裏既有同步業務又有異步業務(開啓新線程或者系統類庫提供異步方法)，那麼同步方法那部分的時間在調用的時候是會阻塞主線程的，即主線程要等待這部分同步業務執行完才能往下執行。
如【案例7】 耗時：同步操做之和 2s+2s + Max(3s,5s)=9s;
1 //同步耗時操做和異步方法同時封裝
2 private static async Task<String> NewMethod7Async()
3 {
4 //調用異步方法以前還有一個耗時操做
5 Thread.Sleep(2000);
6
7 //下面的操做耗時3s
8 HttpClient http = new HttpClient();
9 var httpContent = new StringContent("", Encoding.UTF8, "application/json");
10 //執行業務
11 var r1 = await http.PostAsync("http://localhost:2788/Home/GetMsg1", httpContent);
12 return r1.Content.ReadAsStringAsync().Result;
13 }
14 private static async Task<String> NewMethod8Async()
15 {
16 //調用異步方法以前還有一個耗時操做
17 Thread.Sleep(2000);
18
19 //下面的操做耗時5s
20 HttpClient http = new HttpClient();
21 var httpContent = new StringContent("", Encoding.UTF8, "application/json");
22 //執行業務
23 var r1 = await http.PostAsync("http://localhost:2788/Home/GetMsg2", httpContent);
24 return r1.Content.ReadAsStringAsync().Result;
25 }
1 #region 案例7(既有普通的耗時操做，也有系統自己的異步方法,耗時9s左右)
2 //且大約4s後才能輸出 「我是主業務」，證實同步操做Thread.Sleep(2000); 阻塞主線程
3 {
4 Stopwatch watch = Stopwatch.StartNew();
5
6 Console.WriteLine("開始執行");
7 Task<string> t1 = NewMethod7Async();
8 Task<string> t2 = NewMethod8Async();
9
10 Console.WriteLine("我是主業務");
11 Console.WriteLine($"{t1.Result},{t2.Result}");
12 watch.Stop();
13 Console.WriteLine($"耗時：{watch.ElapsedMilliseconds}");
14 }
15 #endregion
證實：async封裝的異步方法裏的同步業務的時間會阻塞主線程，再次證實 await只能加在 非阻止api和開啓新線程的前面
② 若是封裝的異步方法中存在等待的問題，並且不能阻塞主線程(不能用Thread.Sleep) , 這個時候能夠用Task.Delay，並在前面加await關鍵字
如【案例8】 耗時：Max（2+3 , 5+2）=7s
1 //利用Task.Delay(2000);等待
2 private static async Task<String> NewMethod11Async()
3 {
4 //調用異步方法以前須要等待2s
5 await Task.Delay(2000);
6
7 //下面的操做耗時3s
8 HttpClient http = new HttpClient();
9 var httpContent = new StringContent("", Encoding.UTF8, "application/json");
10 //執行業務
11 var r1 = await http.PostAsync("http://localhost:2788/Home/GetMsg1", httpContent);
12 return r1.Content.ReadAsStringAsync().Result;
13 }
14
15 private static async Task<String> NewMethod12Async()
16 {
17 //調用異步方法以前須要等待2s
18 await Task.Delay(2000);
19
20 //下面的操做耗時5s
21 HttpClient http = new HttpClient();
22 var httpContent = new StringContent("", Encoding.UTF8, "application/json");
23 //執行業務
24 var r1 = await http.PostAsync("http://localhost:2788/Home/GetMsg2", httpContent);
25 return r1.Content.ReadAsStringAsync().Result;
26 }
1 #region 案例8(利用Task.Delay執行異步方法的等待操做)
2 //結果是7s，且立刻輸出「我是主業務」，說明Task.Delay(),不阻塞主線程。
3 {
4 Stopwatch watch = Stopwatch.StartNew();
5 Console.WriteLine("開始執行");
6 Task<string> t1 = NewMethod11Async();
7 Task<string> t2 = NewMethod12Async();
8
9 Console.WriteLine("我是主業務");
10 Console.WriteLine($"{t1.Result},{t2.Result}");
11 watch.Stop();
12 Console.WriteLine($"耗時：{watch.ElapsedMilliseconds}");
13 }
14 #endregion
三. 異步方法返回類型
1. Task<T>, 處理含有返回值的異步方法，經過 .Result 等待異步方法執行完，且獲取到返回值。
2. Task：調用方法不須要從異步方法中取返回值，可是但願檢查異步方法的狀態，那麼能夠選擇能夠返回 Task 類型的對象。不過，就算異步方法中包含 return 語句，也不會返回任何東西。
如【案例9】
1
2 //返回值爲Task的方法
3 private static async Task NewMethod9Async()
4 {
5
6 //下面的操做耗時3s
7 HttpClient http = new HttpClient();
8 var httpContent = new StringContent("", Encoding.UTF8, "application/json");
9 //執行業務
10 var r1 = await http.PostAsync("http://localhost:2788/Home/GetMsg1", httpContent);
11 Console.WriteLine("NewMethod9Async執行完成");
12 }
1 #region 案例9(返回值爲Task的異步方法)
2 //結果是5s，說明異步方法和主線程的同步方法 在並行執行
3 {
4 Stopwatch watch = Stopwatch.StartNew();
5
6 Console.WriteLine("開始執行");
7 Task t = NewMethod9Async();
8
9 Console.WriteLine($"{nameof(t.Status)}: {t.Status}"); //任務狀態
10 Console.WriteLine($"{nameof(t.IsCompleted)}: {t.IsCompleted}"); //任務完成狀態標識
11 Console.WriteLine($"{nameof(t.IsFaulted)}: {t.IsFaulted}"); //任務是否有未處理的異常標識
12
13 //執行其餘耗時操做，與此同時NewMethod9Async也在工做
14 Thread.Sleep(5000);
15
16 Console.WriteLine("我是主業務");
17
18 t.Wait();
19
20 Console.WriteLine($"{nameof(t.Status)}: {t.Status}"); //任務狀態
21 Console.WriteLine($"{nameof(t.IsCompleted)}: {t.IsCompleted}"); //任務完成狀態標識
22 Console.WriteLine($"{nameof(t.IsFaulted)}: {t.IsFaulted}"); //任務是否有未處理的異常標識
23
24 Console.WriteLine($"全部業務執行完成了");
25 watch.Stop();
26 Console.WriteLine($"耗時：{watch.ElapsedMilliseconds}");
27 }
28 #endregion
PS：對於Task返回值的異步方法，能夠調用Wait(),等 待該異步方法執行完，他和await不一樣，await必須出如今async關鍵字封裝的方法中。
3. void：調用異步執行方法，不須要作任何交互
如【案例10】
1 //返回值是Void的方法
2 private static async void NewMethod10Async()
3 {
4 //下面的操做耗時5s
5 HttpClient http = new HttpClient();
6 var httpContent = new StringContent("", Encoding.UTF8, "application/json");
7 //執行業務，假設這裏主須要請求，不須要作任何交互
8 var r1 = await http.PostAsync("http://localhost:2788/Home/GetMsg1", httpContent);
9 Console.WriteLine("NewMethod10Async執行完成");
10 }
1 #region 案例10(返回值爲Void的異步方法)
2 //結果是5s，說明異步方法和主線程的同步方法 在並行執行
3 {
4 Stopwatch watch = Stopwatch.StartNew();
5
6 Console.WriteLine("開始執行");
7 NewMethod10Async();
8
9 //執行其餘耗時操做，與此同時NewMethod9Async也在工做
10 Thread.Sleep(5000);
11
12 Console.WriteLine("我是主業務");
13
14
15 Console.WriteLine($"全部業務執行完成了");
16 watch.Stop();
17 Console.WriteLine($"耗時：{watch.ElapsedMilliseconds}");
18 }
19 #endregion
四. 幾個結論
1. 異步方法到底開不開起新線程？
異步和等待關鍵字不會致使其餘線程建立。 由於異步方法自己並不會運行的線程，異步方法不須要多線程。 只有 + 當方法處於活動狀態，則方法在當前同步上下文中運行並使用在線程的時間。 可使用 Task.Run 移動 CPU 工做移到後臺線程，可是，後臺線程不利於等待結果變得可用處理。（來自MSDN原話）
2. async和await是一種異步編程模型，它自己並不能開啓新線程，多用於將一些非阻止API或者開啓新線程的操做封裝起來，使其調用的時候像同步方法同樣使用。
下面補充博客園dudu的解釋，方便你們理解。
五. 參考資料
1. 反骨仔：http://www.cnblogs.com/liqingwen/p/5831951.html
http://www.cnblogs.com/liqingwen/p/5844095.html
2. MSDN：https://msdn.microsoft.com/library/hh191443(vs.110).aspx
PS：若是你想了解多線程的其餘知識，請移步：那些年咱們一塊兒追逐的多線程(Thread、ThreadPool、委託異步調用、Task/TaskFactory、Parallerl、async和await)
前端自動化準備和詳細配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、Git/SVN)
一. 各種概念和指令介紹
1. NVM
(1). 全稱：Node Version Manager，是一款針對Nodejs的版本管理工具，因爲Node的版本不少，不少時候我要須要依賴多個版本，而且要求能夠自動切換，這個時候採用NVM來管理Node再合適不過了。
(2). 下載地址：https://github.com/coreybutler/nvm-windows/releases
(3). 經常使用指令：
a. 查看已經安裝的node版本： 【nvm list】
b. 更換當前node的版本： 【nvm use 版本號 】
c. 安裝指定版本的node： 【nvm install 版本號 】 （nvm install stable 特指安裝最新最穩的node版本 nvm install latest 特指下載最新的node版本）
d. 刪除指定版本的node： 【nvm uninstall 版本號】
其它指令：
(4). NVM自身版本如何更新：
NVM總共就5個文件，直接複製到原文件夾下，覆蓋便可。
2. Node.JS
(1). 一個JS的運行環境
(2). 主要用於開發Web應用程序
(3). 不少的前端開發工具都是基於node這個平臺
(4). 所用的工具就至關於一些軟件
PS：
Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境，Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。
Node.js 的包管理器 npm，是全球最大的開源庫生態系統。
Node.js的版本管理器爲nvm。
3. NPM
NPM（node package manager），是Node.js的包管理器，是全球最大的開源生態庫。
參考地址： 官方網站：https://www.npmjs.com/
npm管理包很是方便，咱們只須要記住使用哪一個包就能夠了，相似於.Net平臺下的Nuget。
4. CNPM
cnpm工具，它是中國版的npm鏡像庫，地址在這裏：https://cnpmjs.org/，也是npm官方的一個拷貝，由於咱們和外界有一堵牆隔着，因此用這個國內的比較快，淘寶也弄了一個和npm同樣的鏡像庫，http://npm.taobao.org/，它和官方的npm每隔10分鐘同步一次。安裝方式：
指令：【npm install -g cnpm --registry=https://registry.npm.taobao.org】
安裝好了cnpm後，直接執行：cnpm install 包名
好比：cnpm install bower -g 就能夠了。-g只是爲了把包安裝在全局路徑下。若是不全局安裝，也能夠在當前目錄中安裝，不用-g就能夠了。
注意：cnpm的下載路徑按照上述指令安裝的話，默認就是從taobao的地址下載，和經過nrm切換npm的下載源到taobao，此時npm和cnpm的下載源是相同的，下載速度也是一致的。
5. NRM
nrm就是npm registry manager 也就是npm的鏡像源管理工具，有時候國外資源太慢，那麼咱們能夠用這個來切換下載的鏡像源。
咱們只要經過這個命令: 【npm install -g nrm 】就能夠實現安裝。
注意：-g能夠直接放到install的後面，咱們之後也最好這樣用，由於這樣用，咱們能夠在cmd中上下箭頭切換最近命令的時候，容易修改，更方便操做。安裝完成後，咱們就可使用了。
命令：【nrm ls 】用於展現全部可切換的鏡像地址
命令：【nrm use taobao】 咱們這樣就能夠直接切換到taobao上了，和上述的cnpm就一致了。固然也能夠按照上面羅列的其餘內容進行切換。
6. WebPack
WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。
Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個（或多個）瀏覽器可識別的JavaScript文件。
7. Gulp/Grunt
Grunt和Gulp的工做方式是：在一個配置文件中，指明對某些文件進行相似編譯，組合，壓縮等任務的具體步驟，工具以後能夠自動替你完成這些任務。
8. Git/SVN
代碼、文件等版本管理工具。
二. 安裝步驟(兩套安裝方案)
方案一：嚴格按照順序進行安裝配置
(一). 安裝NVM的詳細步驟
(1). 在C盤目錄下建一個Develop文件夾，該文件用來存放各類與開發相關的配置。
(2). 在Develop文件夾中新建nvm文件夾，並將下載的nvm五個文件拷貝進去。
下載地址：https://github.com/coreybutler/nvm-windows/releases
注意：下載免安裝版本的，不要下載exe安裝程序。
(3). cmd命令測試是否安裝成功。
輸入指令：【nvm -v 】， 發現並不能用。緣由是尚未配置環境變量。
(4). 配置環境變量
NVM_HOME=C:\Develop\nvm
PATH=%NVM_HOME%;
如圖所示：
而後經過命令測試：
發現：並無成功，緣由是 nvm 的根目錄下缺乏一個 配置文件setting.txt。
(5). 動態生成配置文件
（有現成的能夠直接拷貝進去，這裏介紹一種動態生成的方式）。
雙擊：install.cmd命令，而後把當前路徑拷貝進去，點擊回車，會自動在當前目錄下生成 setting.txt文件。
從新cmd 輸入指令【nvm -v】,發現大功告成。
下面咱們測試一下nodejs環境，指令【nvm list】，發現並無安裝。
(二). 安裝Node.js
(1). 直接輸入指令【nvm install latest】，安裝最新版本的node。
特別注意：備註： 若是你的電腦系統是32 位的，那麼在下載nodejs版本的時候，必定要指明 32 如：【nvm install 5.11.0 32 】 這樣在32位的電腦系統中，纔可使用，默認是64位的。
這個時候發現一個現象，下載完最新的nodejs版後，自動去下載最新的npm了，這個現象很正常，在每一個版本的nodejs中，都會自帶npm，爲了統一塊兒見，咱們安裝一個全局的npm工具，這個操做頗有必要，由於咱們須要安裝一些全局的其餘包，不會由於切換node版本形成原來下載過的包不可用。
爲了後面演示切換方便，咱們這裏再安裝另一個node的版本 指令【node install 6.2.0】。
一樣的現象，安裝完node後，會自動下載該版本的node對應npm包。
(2). 配置node的環境變量
【這裏先補充一個知識點：nvm切換node版本的原理，會在nvm的同級目錄下生成一個nodejs的快捷方式，當前使用哪一個版本的node，該快捷方式就會執行nvm文件夾裏的對應版本的node】
基於以上原理，配置nodejs環境變量的時候，指向的是該快捷方式，這樣不管怎麼切換node版本，環境變量都不須要改，均可以直接對應。
A：配置NVM文件夾下的setting.txt配置文件。
B：配置系統環境變量。
(3) . 查看已經安裝的node版本，並選擇指定版原本使用。
查看已經安裝的node版本，指令【node list】
選擇8.5.0版本進行使用，指令 【node use 8.5.0】
再輸入該命令以前，觀察一個現象，Develop目錄下只有nvm一個文件夾。
執行該命令。
發現Develop目錄下多了一個nodejs的快捷方式【正是經過該快捷方式來映射nvm文件夾裏對應的node版本，同時node的環境變量也是對應該快捷方式】
再次查看使用版本【nvm list】，發現8.5.0正在使用中
(三). 設置npm全局的下載路徑，而且安裝全局的
咱們在前面提到，每安裝一個node版本，都會安裝與其對應的npm包，在這裏咱們切換node版本，而後查看對應的npm版原本測試一下。
既然咱們已經裝了多個不一樣版本的npm了（每一個版本的node對應一個版本的npm），那麼咱們爲何還要安裝一個全局的npm包呢？
【首先咱們先補充一個知識：經過npm下載下來的其餘程序包都是存放在" node_modules "文件夾下，而每一個node下的npm都對應一個" node_modules "文件夾，但咱們再實際開發中，一般須要下載一些程序包，這些程序包要是全局的，不能由於切換node版本而致使該程序包不可用】
因此咱們下面的思路藉助已有的npm，來下載安裝一個全局的npm。
(1). 配置NPM的全局安裝路徑
進入cmd命令，輸入【 npm config set prefix "C:\Develop\npm" 】回車，這是在配置npm的全局安裝路徑，而後在用戶文件夾下會生成一個.npmrc的文件，用記事本打開後能夠看到以下內容：
用記事本打開：並新增全局npm緩存的配置路徑，以下圖。
(2). 經過命令【npm install -g npm】，下載全局的npm包 (下載不下來，先放到後面)
(3) . 配置npm的環境變量
(4). 安裝nrm
經過命令： 【npm install -g nrm】全局安裝nrm
【nrm ls】，展現全部鏡像的地址。
切換npm的下載源頭。 【nrm use taobao】
從新全局安裝npm， 【npm install -g npm】
特別注意：在這裏下載完後，不管node版本怎麼切換，npm的版本始終是全局的npm的 ： 5.4.2版本
特別注意：經過nrm的指令 【nrm use taobao】，將npm的下載源頭切換到taobao，此時實際上和下面要安裝cnpm下載是一個道理的，說白了，切換後的npm，就沒有必要安裝cnpm了。
這裏再補充一種方式，來切換npm的下載路徑（能夠不用安裝nrm）
【 npm config set registry https://registry.npm.taobao.org】，該指令與前面「配置npm的全局安裝路徑相似」，都是操控的 .npmrc文件。
（四）全局安裝cnpm
指令【npm install -g cnpm --registry=https://registry.npm.taoba0.org】
查看安裝是否成功【cnpm -v】
方案二. 直接官網下載NodeJS安裝包，簡單粗暴型
1. 官網下載Node.js的msi安裝包，直接下一步安裝。
下載地址：http://nodejs.cn/
安裝過程很是簡單，直接下一步、下一步、一路到底。
建議：安裝路徑根據本身的須要適當改一下。
特別注意：選擇安裝項的這一步，要不npm和add path(自動配置環境變量)，這兩個選項給勾上。
2. 校驗安裝成果。
A： 發現nodejs和npm能夠正常使用
B： 發如今用戶變量和系統變量的path中各自多了一條記錄。
C： 測試全局下載【npm install -g bootstarp】。將下載到該路徑下：C:\Users\Administrator\AppData\Roaming\npm\node_modules
3. 該種安裝方式總結。
不利於nodejs的版本管理，沒法自動切換或更新nodejs的版本。
全局下載路徑須要本身從新配置，默認的路徑，有點坑爹，很差找。
默認是沒有安裝nrm或cnpm的，須要本身從新切換下載源，默認是國外的。
最後建議： 生命在於折騰，建議採用方案一的方式進行配置，對每一步的做用作到心中有數。
三. npm或cnpm使用
這裏以cnpm的指令來介紹，npm的使用只需將指令中的cnpm改成npm便可。【手動將npm的下載源切換到taobao，實際上和cnpm同樣了】
1. 將npm更新到最新版本： 【npm install -g npm】
2. 將cnpm更新到最新版本：【cnpm install -g cnpm】
3. 安裝其它程序包： 【cnpm install xxx】 會在當前路徑上生成一個"node-modules"，並將xx程序下載到該文件夾下。
eg ： 新建一個文件夾，在該文件夾下打開cmd命令，輸入指令： 【cnpm install bootstrap 】
刪除其它程序包： 【cnpm uninstall xxx】
4. 安裝其它程序到全局npm路徑下： 【cnpm install -g xx】
刪除其它全局程序包：【cnpm uninstall -g xx】
5. 補充知識點：項目依賴
A: 普通項目依賴：
【npm init】：生成一個package.json文件，用來記錄項目須要依賴哪些東西。
【npm install xx --save】：對應的是 package.json 文件 dependencies，該節點表示發佈以後還須要依賴的東西。（eg：JQuery，發佈以後，仍然須要依賴JQuery庫）
【npm install xx --save-dev】：對應的是package.json 文件 devDependencies，該節點表示開發階段須要依賴的東西。（eg：grunt、bable相似的工具類 ，只在開發階段使用）
【npm install】：默認還原的是package.json下dependencies和devDependencies兩個節點下的全部依賴庫。
B：全局依賴：特指你要安裝一個工具包，系統中任何位置均可能用到，這種狀況下一版要全局安裝。
指令：【cnpm install -g xx】
6. 全局npm版本更新
【npm install -g npm】，時間有點長，大約須要兩分鐘
四. 使用以上配置包，快速配置
看了上面的方案一的配置步驟，雖然步驟比較詳細，可是受網速等一系列因素，對應一個新手而已，沒有一兩個小時，是很難配置成功的。
方案二簡單粗暴的安裝，不便於多版本的控制，不靈活。
因此這裏我將提供我我的的已經下載配置好的程序包供廣大網友使用，只需配置環境變量便可，省去了煩人的下載步驟。
下載地址：http://pan.baidu.com/s/1o8uUMgU
壓縮文件中包括：【Develop文件夾】 【.nmprc文件】
Develop包括：【nvm 1.1.6】、【nodejs 8.5.0】、【nodejs 6.2.0】、【全局的npm 5.4.2】、【全局的nrm】、【全局的cnpm】
注意：這裏的.npmrc裏已經默認把npm的下載源頭切換到了國內的taobao了，同cnpm同樣了。
快速配置步驟：
(1). 解壓壓縮包：將Develop文件夾移動到C盤的根目錄，將.nmprc移動到C盤→用戶→Administrator(也多是其餘用戶名)。
(2). 配置環境變量
NVM_HOME=C:\Develop\nvm
NVM_SYMLINK=C:\Develop\nodejs
NPM_HOME=C:\Develop\npm
PATH=%NVM_HOME%;%NVM_SYMLINK%;%NPM_HOME%
注意：在配置path的時候，先後注意要有分號。
(3). 經過指令測試是否成功。（前先後後，分鐘足以搞定）
PS： 後臺技術系列