整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
現(xiàn)在視頻業(yè)務(wù)越來(lái)越流行了，播放器也比較多，作為前端工程師如何打造一個(gè)屬于自己的播放器呢？最快最有效的方式是基于開(kāi)源播放器深度定制，至于選擇哪個(gè)開(kāi)源播放器仁者見(jiàn)仁智者見(jiàn)智，可以參考開(kāi)源播放器列表(https://www.awesomes.cn/subject/videos)選擇適合自己業(yè)務(wù)的播放器。
我們的播放器選擇了排名第一的video.js播放器，截至目前該播放器在Github擁有13,991 star, 4,059 fork，流行程度可見(jiàn)一斑。為了讓大家更多的了解它，我們細(xì)數(shù)下優(yōu)點(diǎn)：
免費(fèi)開(kāi)源
這個(gè)意味著什么就不多說(shuō)了，附上項(xiàng)目地址(https://github.com/videojs/video.js)
兼容主流瀏覽器
在國(guó)內(nèi)的前端開(kāi)發(fā)環(huán)境往往需要支持到低級(jí)版本的IE瀏覽器，然后隨著Flash的退化，很多公司沒(méi)有配備Flash開(kāi)發(fā)工程師，video.js提供了流暢的Flash播放器，而且在UI層面做到了和video的效果，實(shí)屬難得，比如全屏。
UI自定義
不管開(kāi)源項(xiàng)目在UI方面做的如何漂亮，對(duì)于各具特色的業(yè)務(wù)來(lái)說(shuō)都要自定義UI，一個(gè)方便簡(jiǎn)單的自定義方式顯得格外重要，更何況它還自帶了編譯工具，只能用一個(gè)”贊“字形容。具體怎么實(shí)現(xiàn)的，這里先簡(jiǎn)單描述下是使用JavaScript（es6）構(gòu)建對(duì)象，通過(guò)Less編寫(xiě)樣式規(guī)則，最后借助Grunt編譯。
靈活插件機(jī)制
video.js提供一個(gè)插件定義的接口，使插件開(kāi)發(fā)簡(jiǎn)單易行。而且社區(qū)論壇也提供了一些好用的插件供開(kāi)發(fā)者使用。附插件列表
比較完善的文檔
完善的文檔對(duì)于一個(gè)穩(wěn)定的開(kāi)源項(xiàng)目是多么的重要，video.js提供了教程、API文檔、插件、示例、論壇等。官方地址
項(xiàng)目熱度
開(kāi)源作者對(duì)項(xiàng)目的維護(hù)比較積極，提出的問(wèn)題也能很快給予響應(yīng)。開(kāi)發(fā)者在使用過(guò)程中出現(xiàn)問(wèn)題算是有一定保障。
書(shū)歸正傳，要想更自由的駕馭video.js，必然要了解內(nèi)部原理。本文的宗旨就是通過(guò)核心代碼演示講解源碼運(yùn)行機(jī)制，如果有興趣，不要離開(kāi)，我們馬上開(kāi)始了……
由于源碼量較大，很多同學(xué)不知道從何入手，我們先來(lái)說(shuō)下它的組織結(jié)構(gòu)。
其中control-bar，menu，popup，slider，tech，tracks，utils是目錄，其他是文件。video.js是個(gè)非常優(yōu)秀的面向?qū)ο蟮牡湫停械腢I都是通過(guò)JavaScript對(duì)象組織實(shí)現(xiàn)的。
video.js是個(gè)入口文件，看源碼可以從這個(gè)文件開(kāi)始。
setup.js處理播放器的配置安裝即data-setup屬性。
poster-image.js處理播放器貼片。
plugins.js實(shí)現(xiàn)了插件機(jī)制。
player.js構(gòu)造了播放器類也是video.js的核心。
modal-dialog.js處理彈層相關(guān)。
media-error.js定義了各種錯(cuò)誤描述，如果想理解video.js對(duì)各語(yǔ)言的支持，這個(gè)文件是必看的，它是橋梁。
loading-spinner.js實(shí)現(xiàn)了播放器加載的標(biāo)志，如果不喜歡默認(rèn)加載圖標(biāo)在這里修改吧。
fullscreen-api.js實(shí)現(xiàn)各個(gè)瀏覽器的全屏方案。
extend.js是對(duì)node 繼承 and babel's 繼承的整合。
event-target.js 是event類和原生事件的兼容處理。
error-display.js 主要處理展示錯(cuò)誤的樣式設(shè)置。
component.js 是video.js框架中最重要的類，是所有類的基類，也是實(shí)現(xiàn)組件化的基石。
close-button.js 是對(duì)關(guān)閉按鈕的封裝，功能比較單一。
clickable-component.js 如果想實(shí)現(xiàn)一個(gè)支持點(diǎn)擊事件和鍵盤(pán)事件具備交互功能的組件可以繼承該類，它幫你做了細(xì)致的處理。
button.js 如果想實(shí)現(xiàn)一個(gè)按鈕了解下這個(gè)類是必要的。
big-play-button.js 這個(gè)按鈕是視頻還未播放時(shí)顯示的按鈕，官方將此按鈕放置在播放器左上角。
utils目錄顧名思義是一些常用的功能性類和函數(shù)。
tracks目錄處理的是音軌、字幕之類的功能。
tech目錄也是非常核心的類，包括對(duì)video封裝、flash的支持。
slider目錄主要是UI層面可拖動(dòng)組件的實(shí)現(xiàn)，如進(jìn)度條，音量條都是繼承的此類。
popup目錄包含了對(duì)彈層相關(guān)的類。
menu目錄包含了對(duì)菜單UI的實(shí)現(xiàn)。
control-bar目錄是非常核心的UI類的集合了，播放器下方的控制器都在此目錄中。
通過(guò)對(duì)組織結(jié)構(gòu)的描述，大家可以，想了解video.js的哪一部分內(nèi)容可以快速入手。如果還想更深入的了解如何正確使用這些類，請(qǐng)繼續(xù)閱讀繼承關(guān)系一節(jié)。
video.js是JavaScript面向?qū)ο髮?shí)現(xiàn)很經(jīng)典的案例，你一定會(huì)好奇在頁(yè)面上一個(gè)DOM節(jié)點(diǎn)加上data-setup屬性簡(jiǎn)單配置就能生成一個(gè)復(fù)雜的播放器，然而在代碼中看不到對(duì)應(yīng)的HTML”模板“。其實(shí)這都要?dú)w功于”繼承“關(guān)系以及作者巧妙的構(gòu)思。
在組織結(jié)構(gòu)一節(jié)有提到，所有類的基類都是Component類，在基類中有個(gè)createEl方法這個(gè)就是JavaScript對(duì)象和DOM進(jìn)行關(guān)聯(lián)的方法。在具體的類中也可以重寫(xiě)該方法自定義DOM內(nèi)容，然后父類和子類的DOM關(guān)系也因JavaScript對(duì)象的繼承關(guān)系被組織起來(lái)。
為了方便大家查閱video.js所有的繼承關(guān)系，整理了兩個(gè)圖表，一個(gè)是完整版，一個(gè)是核心版。
完整版
核心板
video.js源碼代碼量比較大，我們要了解它的運(yùn)行機(jī)制，首先確定它的主線是video.js文件的videojs方法，videojs方法調(diào)用player.js的Player類，Player繼承component.js文件的Component類，最后播放器成功運(yùn)行。
我們來(lái)看下videojs方法的代碼、Player的構(gòu)造函數(shù)、Component的構(gòu)造函數(shù)，通過(guò)對(duì)代碼的講解基本整個(gè)運(yùn)行機(jī)制就有了基本的了解，注意里面用到的所有方法和其他類對(duì)象參照組織結(jié)構(gòu)一節(jié)細(xì)細(xì)閱讀就可以掌握更多的運(yùn)行細(xì)節(jié)。
videojs方法
Player的構(gòu)造函數(shù)
Component的構(gòu)造函數(shù)
這里通過(guò)主線把基本的流程演示一下，輪廓出來(lái)了，更多細(xì)節(jié)還請(qǐng)繼續(xù)閱讀。
一個(gè)完善和強(qiáng)大的框架都會(huì)繼承插件運(yùn)行功能，給更多的開(kāi)發(fā)者參與開(kāi)發(fā)的機(jī)會(huì)進(jìn)而實(shí)現(xiàn)框架功能的補(bǔ)充和延伸。我們來(lái)看下video.js的插件是如何運(yùn)作的。
插件的定義
如果之前用過(guò)video.js插件的同學(xué)或者看過(guò)插件源碼，一定有看到有這句話videojs.plugin= pluginName，我們來(lái)看下源碼：
不難看出，原理就是將插件（函數(shù)）掛載到Player對(duì)象的原型上，接下來(lái)看下是怎么執(zhí)行的。
插件的運(yùn)行
在Player的構(gòu)造函數(shù)里判斷是否有插件這個(gè)配置，如果有則遍歷執(zhí)行。
在繼承關(guān)系一節(jié)中有提到video.js的所有DOM生成都不是采用的傳統(tǒng)模板的方式，都是通過(guò)JavaScript對(duì)象的繼承關(guān)系來(lái)實(shí)現(xiàn)的。
在Component基類中有個(gè)createEl方法，在這里可以使用DOM類生成DOM實(shí)例。每個(gè)UI類都會(huì)有一個(gè)el屬性，會(huì)在實(shí)例化的時(shí)候自動(dòng)生成，源代碼在Component的構(gòu)造函數(shù)中：
每個(gè)UI類有一個(gè)children屬性，用于添加子類，子類有可能扔具有children屬性，以此類推，播放器的DOM結(jié)構(gòu)就是通過(guò)這樣的JavaScript對(duì)象結(jié)構(gòu)實(shí)現(xiàn)的。
在Player的構(gòu)造函數(shù)里有一句代碼this.initChildren();啟動(dòng)了UI的實(shí)例化。這個(gè)方法是在Component基類中定義的，我們來(lái)看下：
通過(guò)這段代碼不難看出大概的意思是通過(guò)initChildren獲取children屬性，然后遍歷通過(guò)addChild將子類實(shí)例化，實(shí)例化的過(guò)程會(huì)自動(dòng)重復(fù)上述過(guò)程從而達(dá)到了”繼承“的效果。不得不為作者的構(gòu)思點(diǎn)贊。如果你要問(wèn)并沒(méi)看到DOM是怎么關(guān)聯(lián)起來(lái)的，請(qǐng)繼續(xù)看addChild方法的源碼：
這段代碼的大意就是提取子類的名稱，然后獲取類并實(shí)例化，最后通過(guò)最關(guān)鍵的一句話this.contentEl().insertBefore(component.el(), refNode);完成了父類和子類的DOM關(guān)聯(lián)。相信inserBefore大家并不陌生吧，原生的DOM操作方法。
至此，video.js的精華部分都描述完了，不知道大家是否有收獲。這里簡(jiǎn)單的總結(jié)一些閱讀video.js框架源碼的心得：
找準(zhǔn)播放器實(shí)現(xiàn)的主線流程，方便我們有條理的閱讀代碼
了解框架代碼的組織結(jié)構(gòu)，有的放矢的研究相關(guān)功能的代碼
理解類與類的繼承關(guān)系，方便自己構(gòu)造插件或者修改源碼的時(shí)候知道從哪個(gè)類繼承
理解播放器的運(yùn)行原理，有利于基于Component構(gòu)造一個(gè)新類的實(shí)現(xiàn)
理解插件的運(yùn)行機(jī)制，學(xué)會(huì)自己構(gòu)造插件還是有必要的
理解UI的實(shí)現(xiàn)原理，就知道自己如何為播放器添加視覺(jué)層面的東西了
看看我的源碼解讀吧，能幫一點(diǎn)是一點(diǎn)，哈哈
1272208556@qq.com
1、HTML + CSS + UI
2、Javascript
3、HTML5CORE + AJAX + Jquery
4、Bootstrap,Angular JS + 其他框架
1、HTML + CSS3BASIC + PRO + UI + PRO + CSS3CORE + PRO
======================================================
1、Internet
1、什么是Internet
是全球性計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò),是由若干終端(PC,移動(dòng)端)以及特殊的傳輸介質(zhì)而組成的一個(gè)網(wǎng)絡(luò)結(jié)構(gòu)
PC:Personal Computer
2、提供的服務(wù)
信息共享
Telnet : 遠(yuǎn)程連接
Email : 電子郵件
WWW : 萬(wàn)維網(wǎng) www.baidu.com
BBS : 電子公告板 ，論壇
FTP : 上傳和下載服務(wù)
3、實(shí)現(xiàn)技術(shù)
1、分組交換原理:數(shù)據(jù)通過(guò)數(shù)據(jù)包進(jìn)行傳遞，到達(dá)目的地后，對(duì)數(shù)據(jù)包進(jìn)行重組
2、TCP/IP 協(xié)議簇
2、WEB
1、什么是WEB
就是 WWW（World Wide Web）
w3c : www consortium 萬(wàn)維網(wǎng)聯(lián)盟
2、能干什么
能夠?qū)⒏黝惖男畔⒑头?wù)進(jìn)行連接，提供圖形用戶界面
信息:文字、圖片、音頻、視頻
服務(wù):Telnet, FTP , Mail , HTTP ...
3、萬(wàn)維網(wǎng)就是無(wú)數(shù)的文檔集合（網(wǎng)頁(yè)文檔）,文檔會(huì)駐留在世界（互聯(lián)網(wǎng)）的任何一個(gè)角落
3、WEB的工作原理
WEB是基于Internet的多媒體信息服務(wù)系統(tǒng)
1、基于 瀏覽器 / 服務(wù)器 模式
B / S : Browser / Server
在服務(wù)器上，主要以網(wǎng)頁(yè)的形式發(fā)布多媒體信息
2、由WEB服務(wù)器、瀏覽器、通信協(xié)議組成
3、WEB 相關(guān)技術(shù)
1、服務(wù)器端技術(shù)（后臺(tái)）
PHP,JSP,ASP 。。。 。。。
2、客戶端技術(shù)(前端技術(shù))
HTML,
CSS,
Javascript
=========================================================
1、HTML 入門(mén)
1、什么是HTML
HTML(Hyper Text Markup Language),超級(jí)文本標(biāo)記語(yǔ)言
超文本:
a
標(biāo)記 : 超文本都是由標(biāo)記組成的
<a>
語(yǔ)言 : 包含自己獨(dú)特的語(yǔ)法
HTML最終由瀏覽器負(fù)責(zé)解釋
HTML總可以嵌入一些腳本語(yǔ)言編寫(xiě)的程序段:Javascript,VBScript
2、HTML版本
超級(jí)文本標(biāo)記語(yǔ)言（第一版）
HTML2.0
HTML3.2
HTML4.0
HTML4.01
XHTML1.0
HTML5
3、標(biāo)簽(標(biāo)記)
1、標(biāo)簽語(yǔ)法
1、必須使用尖括號(hào)擴(kuò)起來(lái)
<a>,<div> ...
<A>,<a>
2、有封閉類型的標(biāo)簽，也有非封閉類型的標(biāo)簽
1、封閉類型
也稱作雙標(biāo)記，則必須成對(duì)出現(xiàn)
<標(biāo)記>文本內(nèi)容</標(biāo)記>
不同的標(biāo)記，決定了"文本內(nèi)容"的不同表現(xiàn)形式
eg:<a></a>,<p></p>,<div></div>
2、非封閉類型
也稱作單標(biāo)記、空標(biāo)記
<標(biāo)記>
或者
<標(biāo)記/>
eg:
<hr>,<br>,<img>
3、元素
標(biāo)記就是元素，元素也稱為標(biāo)記
4、元素嵌套(標(biāo)簽嵌套)
標(biāo)簽之間相互嵌套，形成復(fù)雜的語(yǔ)法結(jié)構(gòu)
<body>
<p>
<a></a>
</p>
</body>
5、屬性
屬性是出現(xiàn)在開(kāi)始標(biāo)記中的內(nèi)容,作用是修飾元素
<p 屬性名="屬性值"></p>
<p 屬性名='屬性值'></p>
<p 屬性名=屬性值></p>
標(biāo)準(zhǔn)屬性:每個(gè)元素都會(huì)具備的通用屬性
id : 定義每個(gè)標(biāo)簽的唯一標(biāo)識(shí)
title:提示文本
class:樣式相關(guān)，類樣式
style:樣式相關(guān)，行內(nèi)樣式
操作1：定義一對(duì)p標(biāo)簽，id屬性設(shè)置為program
<p id="program"></p>
多屬性:
<p 屬性1="值" 屬性2="值"></p>
注意：多屬性之間，排名不分先后
2、創(chuàng)建HTML文檔
開(kāi)發(fā)工具:任何一個(gè)文字編輯軟件都可以開(kāi)發(fā)HTML
EditPlus ： 超級(jí)記事本
運(yùn)行環(huán)境:任何一個(gè)瀏覽器都能運(yùn)行HTML
Google Chrome,Mozilla Firefox,Microsoft IE,Safari,Opera
超文本文件(HTML文檔):
是一個(gè)以.html或.htm結(jié)尾的文檔
3、文檔結(jié)構(gòu)
1、文檔類型聲明
聲明使用的html版本和風(fēng)格
<!doctype html>
2、html頁(yè)面
1、文檔根元素
每個(gè)文檔有且僅有一對(duì)根元素 , html
2、在根元素的內(nèi)部，包含兩對(duì)子元素
1、head : 頁(yè)面的頭部?jī)?nèi)容
定義頁(yè)面全局信息
包含:
<title></title> : 網(wǎng)頁(yè)標(biāo)題
<meta />:聲明元數(shù)據(jù)(編碼,關(guān)鍵字,描述)
<style></style>:聲明內(nèi)部樣式表
<link />:引入外部樣式表
<script></script>:定義或引入腳本文件
2、body : 頁(yè)面的主體內(nèi)容
任何一個(gè)標(biāo)簽，都可能會(huì)出現(xiàn)在body中
3、head元素
1、聲明網(wǎng)頁(yè)標(biāo)題
<title></title>
2、定義網(wǎng)頁(yè)文本編碼格式
默認(rèn):ISO-8859-1,只支持英文以及英文狀態(tài)下的標(biāo)點(diǎn)符號(hào)
utf-8:支持中英文,標(biāo)點(diǎn)符號(hào)
<meta charset="utf-8" />
3、... ...
4、body元素
屬性:
text : 文本的顏色
bgcolor : 背景顏色
練習(xí)1:
1、為body添加兩個(gè)屬性，text，bgcolor
2、文本顏色 : 紅色(red)
背景顏色 : 銀色(silver)
3、在body中隨意寫(xiě)上一段文本，觀察頁(yè)面顯示效果
5、文本標(biāo)記
1、特殊的文本
轉(zhuǎn)義字符:
空格:
< : < less than
> : > greater than
版權(quán)標(biāo)識(shí):©
2、文本標(biāo)記
1、文本樣式
<b>...</b> : 加粗文本
<i>...</i> : 斜體文本
<u>...</u> : 下劃線
<s>...</s> : 刪除線
<sup>...</sup> : 上標(biāo)
<sub>...</sub> : 下標(biāo)
2、標(biāo)題元素
1-6級(jí)6個(gè)標(biāo)題
<hn></hn> n:1-6
一級(jí)最大
六級(jí)最小
3、段落元素
提供了結(jié)構(gòu)化文本的表現(xiàn)方式
語(yǔ)法:<p></p>
注意：
1、每對(duì)p標(biāo)簽單獨(dú)成一個(gè)段落
2、段落與其他元素有垂直空白，段落間距
常用屬性:
align : 水平對(duì)齊方式
取值:left center right
4、換行元素
在代碼的任何位置處，實(shí)現(xiàn)回車的效果
<br />
5、水平線
又叫分割線
<hr />
屬性:
1、size : 水平線的粗細(xì)，通常以像素(px)為單位
2、width: 寬度
3、align: 水平線的水平對(duì)齊方式
4、color: 顏色
6、分區(qū)元素
目的：為元素進(jìn)行分組，多數(shù)用在布局中
塊分區(qū)元素:<div></div> 層
行內(nèi)分區(qū)元素:<span></span>
注意：
div ：主要用在布局上
span：修改其內(nèi)部?jī)?nèi)容的樣式
7、預(yù)格式化
保留源文檔中的空格和回車
<pre>
文本內(nèi)容
</pre>
3、注釋
可以寫(xiě)在html源碼中，但不被瀏覽器解釋的文本
語(yǔ)法:
<!-- 注釋內(nèi)容 -->
4、行內(nèi)元素與塊級(jí)元素
塊級(jí)元素:默認(rèn)情況下，塊級(jí)元素獨(dú)占一行，元素的前后都會(huì)自動(dòng)換行 div,hn,hr,p
塊級(jí)元素作用:布局
行內(nèi)元素:默認(rèn)情況，多個(gè)元素位于同一行，不會(huì)換行
span,文本標(biāo)記... ...
行內(nèi)元素作用:修改內(nèi)部?jī)?nèi)容的樣式
文：https://mp.weixin.qq.com/s/yUoVBTmdMt8knxlRn2mGVA
學(xué)習(xí)前端過(guò)程中，最基本和經(jīng)常的操作就是：搜索和檢查。
1.1 搜索
1.1.1 工具：Chrome 瀏覽器
1.1.2 讓 Chrome 瀏覽器可以登錄國(guó)外網(wǎng)站（特別重要的一步）
1.2 檢查
后邊無(wú)論學(xué) HTML、CSS、JS 還是 Ajax 等，這個(gè)檢查的動(dòng)作都是最經(jīng)常用到的動(dòng)作。
1. 在瀏覽器中的任何網(wǎng)頁(yè)上，鼠標(biāo)右鍵，然后彈出的選項(xiàng)中選擇“檢查”；
2. 會(huì)出現(xiàn)我們本頁(yè)面的相關(guān)代碼——DOM 樹(shù)（Document Object Model 文檔對(duì)象模型）；
3. 通過(guò)點(diǎn)擊代碼框左上角圖標(biāo)，可以實(shí)時(shí)查看網(wǎng)頁(yè)內(nèi)任意模塊對(duì)應(yīng)的代碼（鼠標(biāo)放在任意地方，代碼框里就會(huì)顯示與之對(duì)應(yīng)的代碼）；
4. 按建盤(pán)上 Esc 鍵，或直接點(diǎn)擊代碼框的 Console，就可以打開(kāi) Console ；
Git 中文使用文檔——作為參考手冊(cè)，需要時(shí)翻翻（https://git-scm.com/book/zh/v2）
2.1 安裝方式
谷歌搜索安裝（點(diǎn)擊 DOWNLOAD 后，直接下一步）——注：macOS 系統(tǒng)在安裝了 Xcode 后會(huì)自帶 Git 。
2.2 注意事項(xiàng)
針對(duì) windows 用戶，Git 最好直接安裝在 C 盤(pán)。因?yàn)?windows下這些軟件總會(huì)出現(xiàn)些莫名的小問(wèn)題，直接安裝在 C 盤(pán)會(huì)支持的相對(duì)好一些。
2.3 安裝完成
安裝完成后，里邊會(huì)相應(yīng)附帶有 Git Bash 。可以打開(kāi) Git Bash 客戶端（蘋(píng)果電腦用戶打開(kāi)自有終端），初次使用需要輸入相關(guān)命令行（先照做，后邊文章會(huì)具體談到）：
git config --global user.name xxx →方便產(chǎn)品經(jīng)理找你（xxx 是輸入我們自己的用戶名） git config --global user.email yyy →方便產(chǎn)品經(jīng)理找你（yyy 是輸入你的郵箱） git config --global push.default simple git config --global core.quotepath false →防止文件名變成數(shù)字 git config --global core.editor "vim" →使用 vim 編輯提交信息
2.4 外觀設(shè)置
（針對(duì) windows 用戶）設(shè)置一下 Git Bash 客戶端的外觀。
2.4.1 將操作界面設(shè)置成透明，方便操作、觀察變化
2.4.2 將界面滾動(dòng)條設(shè)置在右側(cè)
2.4.3 設(shè)置編碼方式
3.1 安裝方式
谷歌搜索安裝（點(diǎn)擊 DOWNLOAD 后，直接下一步）；
3.2 注意事項(xiàng)
針對(duì) windows 用戶，Node.js 最好直接安裝在 C 盤(pán)。因?yàn)?windows 下這些軟件總會(huì)出現(xiàn)些莫名的小問(wèn)題，直接安裝在 C 盤(pán)會(huì)支持的相對(duì)好一些。
3.3 安裝完成
裝了 Node.js 之后我們就可以在 Git Bash 里面使用 node 和 npm 這兩個(gè)命令了（下載安裝 Node.js 后，其附帶了 npm），打開(kāi) Git Bash 試試看：
3.3.1 查看 node 和 npm 在電腦的哪個(gè)位置
which node which npm
3.3.2 查看 node 和 npm 的版本號(hào)
node -v npm -v 或 node --version npm --version
3.3.3 試著用 npm 做一個(gè)命令行的翻譯工具（這個(gè)小工具的名字叫做 fanyi）
npm i -g fanyi
3.3.4 加載完成后，輸入
fanyi hello
相關(guān)中文解釋就會(huì)出來(lái)，還會(huì)給你發(fā)音。
??注意：
3.3.5 試著用 node 做個(gè)算數(shù)
node
回車后便進(jìn)入了 node 運(yùn)行環(huán)境，這時(shí)候我們就可以用 node 寫(xiě) JS 了：
1+2
4.1 安裝方式
谷歌搜索安裝（點(diǎn)擊 DOWNLOAD 后，直接下一步）。
4.2 編輯器的選擇
推薦 Sublime Text 和 VC 。
4.3 Emmet 語(yǔ)法
針對(duì)代碼編輯器，會(huì)引入一個(gè)名詞： Emmet 語(yǔ)法 。目前所有的前端編輯器都支持 Emmet 。提高代碼錄入效率。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
