??前端技術(shù)的發(fā)展主要還是Javascript推動(dòng)而钞，當(dāng)HTML+CSS+Javascript的發(fā)展到j(luò)Query的時(shí)候，Javascript已經(jīng)從瀏覽器運(yùn)行環(huán)境進(jìn)化到虛擬機(jī)運(yùn)行環(huán)境扶叉，然后向Java看齊，到Google的AI框架也支持Javascript帕膜，其中尤其是ES6的變化辜梳。從此Javascript向正常語言發(fā)展，出現(xiàn)了服務(wù)器端開發(fā)框架Express + Jade（Pug+EJS）泳叠，包括webpack-dev-server都是以Express框架為基礎(chǔ)的輕量級(jí)框架，但同時(shí)瀏覽器端的開發(fā)也在出現(xiàn)不同的開發(fā)技術(shù)茶宵。
??Javascript就有了兩個(gè)運(yùn)行方式危纫，這兩種運(yùn)行方式怎么2in1就成了一個(gè)折騰點(diǎn)。首先是Babel框架用來處理ES6與瀏覽器端語法的兼容乌庶，然后打包成Webpack种蝶，Webpack后開始出現(xiàn)模塊化技術(shù)，HTML組件化瞒大，CSS組件化螃征，開始出現(xiàn)各種Loader與插件處理技術(shù)：HTML-loader，CSS-loader透敌，Vue-loader盯滚。這些模塊技術(shù)催生五花八門的腳本規(guī)范，比如CSS相關(guān)的less等等酗电，這些技術(shù)采用繁碎的配置魄藕，餓了么開發(fā)的cooking框架用開簡(jiǎn)化這種配置（還有webpack-cli，vue-cli等腳手架模塊都是為了簡(jiǎn)化配置而來）撵术，從此前后端分離開發(fā)技術(shù)就日趨成熟了背率。
??本主題就從Javascript標(biāo)準(zhǔn)規(guī)范談起，這個(gè)規(guī)范的實(shí)現(xiàn)是Node.js（不完全支持最新的ES標(biāo)準(zhǔn)），主要內(nèi)容包含：
??1. Node.js的編程模式寝姿；
??2. Node.js的支持的Javascript語法支持交排；
- 說明：
- Node.js的安裝比較簡(jiǎn)單，可以在官網(wǎng)參考不同平臺(tái)下的安裝：
- Window
- Linux：Redhat饵筑，Centos埃篓，Ubuntu，Suse等
- Mac OS X
- Node.js的安裝比較簡(jiǎn)單，可以在官網(wǎng)參考不同平臺(tái)下的安裝：
Node的編程方式
交互式編程
-
交互式編程：
- 編寫一行執(zhí)行一行翻翩，與運(yùn)行環(huán)境交互都许。
-
注意；
- 需要先啟動(dòng)執(zhí)行環(huán)境嫂冻，目前腳本語言基本上都支持交互式編程（號(hào)稱：REPL：Read Eval Print Loop）
啟動(dòng)node環(huán)境
- 安裝好node后胶征，就可以直接執(zhí)行node命令了；
- 查看node的幫助
node --help
- Node.js的虛擬機(jī)的在線幫助
- node命令行幫助顯示桨仿，除了命令行參數(shù)外睛低，node的執(zhí)行還受一些環(huán)境變量影響；
- 啟動(dòng)Node運(yùn)行環(huán)境
- node交互式編程環(huán)境
REPL命令在線幫助
-
REPL的在線內(nèi)部命令都是用.開頭服傍，查看幫助钱雷，使用
.help- 官方文檔說明還支持一些快捷鍵，在幫助中沒有出現(xiàn)吹零，不過不用也罷罩抗。
- Node的REPL聯(lián)線幫助使用
常用的REPL命令
-
退出
.exit
-
保存為js文件
.save a.js
- save指令的使用
- 加載js文件
.load a.js
- load指令的使用
支持的Javascript基本語法
- Node虛擬機(jī)支持基本的Javascript語法：
- 基本語言結(jié)構(gòu)；
- 語法三要素灿椅；
- 函數(shù)與面向過程套蒂；
- 面向?qū)ο螅?/li>
- 異常；
- 內(nèi)置對(duì)象茫蛹；
- 由于Node運(yùn)行環(huán)境不是瀏覽器運(yùn)行環(huán)境操刀，所以與瀏覽器相關(guān)的對(duì)象域操作不支持（在反爬蟲破解中，那種依靠BOM對(duì)象婴洼，字體等反爬的JS腳本破解起來特別麻煩骨坑，需要仿真瀏覽器環(huán)境來完成）
- BOM對(duì)象；
- DOM對(duì)象柬采；
- 內(nèi)置對(duì)象使用例子
REPL獨(dú)特語法支持
交互式多行語句
多行是node運(yùn)行環(huán)境自行判定欢唾；
- 多行語句的演示例子
下劃線變量
- 下劃線在node環(huán)境中具備特殊的用途粉捻，用來保存上一次命令的輸出值匈辱；
- 交互式編程的返回值獲取
非交互式編程
-
非交互式編程兩種方式：
- 使用node直接加載執(zhí)行；
- 在交互式環(huán)境中使用內(nèi)部命令.load加載執(zhí)行亡脸；
-
注意：
- Javascript與python一樣浅碾，直接從文件第一行開始執(zhí)行厦画，不需要main執(zhí)行入口函數(shù)等（區(qū)別于傳統(tǒng)的C與Java程序）根暑；
編寫js文件
- Node遵循的ES標(biāo)準(zhǔn)，腳本文件如下：
var sum = 0;
for(var i = 1; i<=100; i++){
sum += I;
}
console.log("1-100的和是：" + sum);
- 把代碼保存為js文件（我們保存的文件名是：
n01_mode_file.js）
執(zhí)行js文件
-
執(zhí)行命令：
node js文件
- 源代碼編程運(yùn)行
npm工具與第三方模塊
- 正如其他語言一樣徙邻，語言依靠其他模塊（主要包含系統(tǒng)模塊）才能實(shí)現(xiàn)強(qiáng)大的功能排嫌，ES6（ECMAScript 6.0 ）Javascript一樣，也需要模塊庫缰犁，一般模塊庫有：
- 標(biāo)準(zhǔn)模塊庫（隨運(yùn)行環(huán)境自帶的模塊）
- 第三方模塊（需要單獨(dú)安裝）
- Node運(yùn)行環(huán)境提供npm工具專門用來下載第三方模型（類似評(píng)估系統(tǒng)的brew淳地，python的pip，Linux的yum一樣）
- 比如區(qū)塊鏈訪問的javascript訪問模塊就是第三方模塊帅容。
node標(biāo)準(zhǔn)模塊
-
Node.js官方文檔中提供標(biāo)準(zhǔn)模塊的幫助颇象，由于我們只關(guān)注Web前端開發(fā)的部分，所以很多模塊不關(guān)注并徘。地址如下：
http://nodejs.cn/api/
- 算是node.js的標(biāo)準(zhǔn)API
全局安裝
-
全局安裝在在安裝指令中使用-g選項(xiàng)即可
- 安裝指令：
npm install 模塊名 -g
- 安裝指令：
-
全局安裝的位置是下面兩個(gè)目錄之一：
- node的安裝目錄
- /usr/local目錄下
局部本地安裝
- 局部安裝位置遣钳，會(huì)在npm命令執(zhí)行時(shí)的工作目錄下創(chuàng)建（沒有的話）一個(gè)模塊目錄(
./node_modules)安裝。- 安裝指令：
npm install 模塊名
- 安裝指令：
npm的其他功能
- 查看已經(jīng)安裝的模塊
npm list -gnpm listnpm list 模塊名
- 第三方安裝模型查看
-
卸載模塊
npm uninstall 模塊名
-
萬能神器npm的命令行幫助
npm --help- 可以查閱到模塊的全局安裝目錄
- 全局安裝目錄信息查看
- package.json模塊管理文件
- 模塊管理主要通過package.json來管理麦乞，此文件被破壞耍贾，模塊的加載就會(huì)出現(xiàn)問題。
Node支持的語法
瀏覽器Javascript語法的支持
- 從基本語法來說路幸，瀏覽器Javascript與服務(wù)器Javascript支持的是相同的語法標(biāo)準(zhǔn)；
瀏覽器對(duì)象的訪問
- 因?yàn)樵趎ode運(yùn)行環(huán)境中缺少瀏覽器環(huán)境付翁，所以瀏覽器中的BOM對(duì)象與DOM對(duì)象都無法訪問简肴。
- 注意：瀏覽器JS需要依賴html文件執(zhí)行與加載，這一點(diǎn)與Node運(yùn)行的js是不同的百侧。Node執(zhí)行js腳本砰识，但無法識(shí)別與執(zhí)行html文件。
內(nèi)置對(duì)象
- Javascript標(biāo)準(zhǔn)內(nèi)置對(duì)象佣渴，Node.js都支持辫狼；比如Date等。但是Node運(yùn)行環(huán)境支持更多的內(nèi)置對(duì)象或者類辛润，比如：
- Buffer類
- Stream類
require與標(biāo)準(zhǔn)模塊
-
引入標(biāo)準(zhǔn)模塊與第三方模塊使用require函數(shù)膨处。
- Vue對(duì)象也可以通過服務(wù)器腳本加載執(zhí)行；
require函數(shù)的定義
require(id)
- 參數(shù)說明：
- id：模塊名或者模塊路徑
- 返回：加載的模塊內(nèi)容
import與ES實(shí)現(xiàn)標(biāo)準(zhǔn)
- ES6按照J(rèn)ava的方式，希望使用import引入模塊真椿，但實(shí)際早期使用require鹃答，在新的標(biāo)準(zhǔn)中引入import；
ES6標(biāo)準(zhǔn)發(fā)布后突硝，module成為標(biāo)準(zhǔn)测摔，標(biāo)準(zhǔn)的使用是以export指令導(dǎo)出接口，以import引入模塊解恰，但是在我們一貫的node模塊中锋八，我們采用的是CommonJS規(guī)范，使用require引入模塊护盈，使用module.exports導(dǎo)出接口挟纱。
ES6在2015年6月正式發(fā)布，所以ES6也有一個(gè)別稱ES2015黄琼；
在ES6之前樊销，也可以使用import / export，這依賴一個(gè)項(xiàng)目：babel脏款，他b把import/export轉(zhuǎn)換為require/export围苫。
-
注意：
- 因?yàn)樯厦嫠枋龅木壒剩琲mport與require還是存在差異撤师；
下面是使用net模塊剂府，創(chuàng)建一個(gè)服務(wù)器監(jiān)聽的例子：
const net = require("net");
// console.log(net);
// 創(chuàng)建服務(wù)器對(duì)象，綁定了一個(gè)connection事件
var server = new net.Server(
function(c){
console.log("有用戶鏈接：" + c.remoteAddress);
}
);
server.listen(
9999,
function(){
console.log("服務(wù)器已經(jīng)啟動(dòng)剃盾，等待客戶鏈接");
}
)
- 運(yùn)行：
- Javascript也像Java一樣開發(fā)網(wǎng)絡(luò)通信程序
-
啟動(dòng)瀏覽器腺占，在地址欄輸入
http://127.0.0.1:9999就可以訪問這個(gè)socket網(wǎng)絡(luò)服務(wù)了。- 注意：實(shí)際上這個(gè)socket還提供IPC通信（在Window就是管道文件痒谴，在Linux就是Domain套接字衰伯，實(shí)際也是雙工管道文件）
-
注意：
- import的使用與CommonJS存在不兼容的情況，需要特殊的要求积蔚。意鲸；
- javascript基本上具有大部分語言具有的標(biāo)準(zhǔn)庫，包含網(wǎng)絡(luò)尽爆、數(shù)據(jù)庫訪問等怎顾；
