1.JavaScript 模塊化規範
-
瀏覽器環境html
- AMD
- Asynchronous Module Definition
- RequireJS
- CMD
- Common Module Definition
- SeaJS
-
Node 環境前端
- CommonJS
- Node.js
- CommonJS 是一個社區,該社區爲 JavaScript 沒有觸及到的領域指定了不少的規範(社區制定的)
- JavaScript 模塊化、IO操做、網絡編程、二進制操做
-
ECMAScript(任何環境均可以)node
- ECMAScript 六、ECMAScript 2015
- ECMAScript Module 定義規範
export
關鍵字用於導出接口
import
關鍵字用於加載模塊接口
- 在最新版的 Node 中,對 ES6 中模塊系統尚未支持,可是能夠經過
babel
等相關工具轉換使用
-
UMDc++
- Universal Module Definition 通用模塊定義規範
- UMD 不是任何模塊規範,也不是模塊加載器
- 一個模塊既兼容 AMD 、CMD、CommonJS、 ECMAScript 6 那這個模塊就是一個 UMD 模塊
- 目的是爲了在任何模塊加載器中均可以直接加載
- 通常是作一些先後端模塊共用的,不涉及具體環境依賴的API,例如
underscore
、moment
就是一個典型的例子
2.Node.js 介紹
如下簡稱 Node。git
劃時代意義的 Node ,開啓了大前端時代 node 讓前端進入了工業自動化時代 node 還讓原來的小前端能夠有機會踏入後端開發領域,使用 JavaScript 語言進行服務器編程 總而言之:學習了 Node ,就開啓了前端工程師的 全棧開發 之旅github

2.1 客戶端和服務器

2.2 幾個問題
-
什麼是 JavaScriptweb
- 一種運行在瀏覽器端的腳本語言。
- JavaScript + DOM + BOM
- ECMAScript + W3C
- ECMAScript + BOM + DOM
- BOM和DOM等都是瀏覽器環境提供的接口API,供 JavaScript 語言來調用。
-
JavaScript 和 ECMAScript 是什麼關係ajax
- ECMAScript 是 JavaScript 語言的標準規範
- var、if-else、for、Object、Array、String。。。
- JavaScript 是 ECMAScript 標準規範的一個實現
-
瀏覽器和 JavaScript 是什麼關係數據庫
- JavaScript 是運行在瀏覽器環境中的
- 寄宿關係
- 瀏覽器就是 JavaScript 的一個執行環境
-
瀏覽器中的 JavaScript 能夠作什麼npm
-
從功能角度 瀏覽器中的 JavaScript 和其它語言有什麼差異
- 弱類型
- 瀏覽器中的 JavaScript 專一於處理 GUI 編程(圖形界面)
- 文件操做
- HTML5中有一個 FileReader(只能讀取用戶經過file類型的input標籤選擇的文件)
- 瀏覽器中的 JavaScript 沒有主動操做文件的權限
- 網絡IO
- 接收網絡中傳輸過來的數據,處理網絡中傳輸過來的數據,發對方發送響應
-
ECMAScript 只能夠運行在瀏覽器中嗎
- JavaScript 不只僅能夠運行在瀏覽器環境中
- 也能夠運行在別的環境、平臺
2.3 什麼是Node
Node官方網站
-
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
- NodeJS 是一個構建與 Chrome V8 JavaScript 解析引擎之上的一個運行時環境
- Chrome V8 開源的
- Chrome V8 引擎在全部瀏覽器的 JavaScript 解析引擎中是最快的
- 維基百科 - JavaScript引擎
-
Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.
- event-driven:事件驅動
- non-blocking I/O model:非阻塞IO模型
- lightweight and efficient:輕量和高效
- Node 自己知識提供了一些系統級別操做API
-
Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
- package ecosystem, npm:包管理系統 npm
- largest ecosystem of open source libraries in the world.
- 目前世界上最大的開源庫生態系統
- 50W + 就比如 Sublime編輯器同樣,自己只提供很簡單的功能
- 大部分都須要依靠社區中的插件、包來開發我們的應用程序
- 若是英語好,佔優點
- npm 兩層含義:
- 第一是一用來託管基於Node開發的包的
- 第二是一個命令行工具,能夠用來下載npm網站上託管的Node包
- 有了 npm,就會成爲徹底傻瓜式的開發
- 直接拿來解決你的問題就能夠了,能讓你更加專一於業務的處理
-
Node 是基於 Chrome V8 解析引擎之上構建的一個 JavaScript 運行時環境,或者說平臺
- 在 Node 中,可使用 JavaScript 語言進行編程吧
- Node 能解析和執行 JavaScript(ECMAScript) 代碼
- Node 是一個平臺,讓 JavaScript 能夠脫離瀏覽器環境運行
- Node 自身使用 c++ 語言寫出了不少系統級別相關的 API,暴露了一些 JavaScript 環境 API
- 使用 Node 能夠輕鬆的進行文件系統訪問、HTTP 服務器開發等功能
- 免費開源
2.4 使用 Node 能夠作什麼

- 高性能的網站服務器
- 實時多人遊戲後臺服務器
- 簡單易用的命名行應用程序
- gulp、less、bower、fis、http-server
- ant、ruby、.net nuget
- 高大上的桌面應用程序
- 使用 Web 技術 做爲解決方案
- electron Linus + Max + Windows
- 底層的物聯網開發
- 移動開發
- Ionic 安卓 IOS
- 使用 Web 技術做爲解決方案
2.5 Node 的特色
- Single Thread:單線程
- event-driven:事件驅動
- non-blocking I/O model:非阻塞IO模型
- 文件IO、網絡IO 基本上都是異步的
- 因此在 Node 中會看到各類各樣的花式回調
- Node 採用的是 事件驅動和非阻塞IO模型 使它自己很是的輕量級和高效。
- 開源免費、跨平臺
2.6 爲何要學習 Node
- Node 打破了過去 JavaScript 只能在瀏覽器中運行的局面
- 先後端編程環境統一,大大下降了先後端語言切換的代價
- 全棧開發工程師
- 前端 + 後端
2.7 總結
Node 是基於 Chrome V8
引擎,一個 JavaScript 運行時環境。 Node 能夠解析和執行 JavaScript(ECMAScript) 腳本代碼, 並且提供了不少系統級別的API(文件讀寫、進程管理、網絡通訊)。
Node 不是一個新的語言,並且一個運行時環境,相似於瀏覽器環境或者說平臺, 能夠用來解析和執行 JavaScript 語言代碼。
JavaScript 長久以來一直被限制在瀏覽器的沙箱中運行, 它的能力取決於瀏覽器中間層提供的支持多少。 Node 將高性能的 V8 帶到了服務器端,使 JavaScript 也能夠開發出實時高性能的服務器。 在 Node 中,再也不與CSS樣式表,DOM樹打交道, 能夠隨意的訪問本地文件,搭建 WebSocket 服務器,鏈接數據庫等系統級底層操做。 Node 不處理 UI,只關心數據
,不管是本地數據仍是網絡數據。 先後端編程統一,大大下降了先後端編程切換的代碼。
對於前端工程師而言,本身熟悉的 JavaScript 現在居然能夠在另外一個地方大放異彩, 不談其餘緣由,僅僅由於好奇,也值得去關注和探究它。
JavaScript 全棧開發工程師,JavaScript 語言的責任已經愈來愈重了。
2.8 Node 學習資源推薦
3.安裝與配置 Node 開發環境
3.1 普通方式安裝
- 下載地址:
https://nodejs.org/en/download/
- 下一步下一步便可
3.2 使用 nvm
安裝和管理多個 node 版本
- nvm node version management
- nvm 是一個命令行程序,能夠很是方便的安裝和管理多個 Node 版本
- 下載地址:
https://github.com/coreybutler/nvm-windows
3.3 如何驗證是否有Node環境
打開終端,輸入 node -v
:
$ node -v
$ vx.x.x
若是能看到輸出一個版本號,例如 v6.8.1
的文本,說明當前計算機有 Node環境。
4.快速體驗
4.1 Hello World
使用 node
命令執行一個 JavaScript
腳本文件:
- 打開任意終端
- 使用
cd
命令切換到要執行的 js 腳本文件所屬的目錄
- 使用
node 文件名
去執行對應的 js 腳本文件
- node 會解析和執行該文件中的代碼,而後將執行結果輸出到終端
當你在終端中輸入 node example.js, 實際上就是使用安裝目錄中的 node.exe 可執行程序, node.exe 程序會自動讀取該文件中的內容, 讀取到該文件內容以後,node 環境開始解析和執行, 若是有 console.log 這樣的代碼,node 會將該輸出打印到控制檯中。
4.2 文件IO:讀寫文件
var fs = require('fs') // 讀取文件 // fs.readFile('./README', function(err, data) { // if (err) { // // return console.log('讀取文件失敗了') // throw err // } // console.log(data.toString()) // }) // 寫入文件 fs.writeFile('./a.txt', 'hello aaa', function (err) { if (err) { throw err } console.log('文件寫入成功') })
4.3 網絡IO:HTTP服務器
var http = require('http') // 1. 建立 HTTP 服務器,獲得一個 服務器實例對象 var server = http.createServer() var money = 0 // 2. 給 Server 對象添加 request 事件處理函數 // 回調函數須要接收兩個參數: // 第一個參數:Request,用來獲取當前客戶端的請求信息 // Request 對象能夠獲取客戶端請求中的 url 請求地址、查詢字符串、post 請求提交的數據等 // 第二個參數:Response 也是一個對象,通常用來給本次請求發送響應數據 server.on('request', function(request, response) { money++ // 告訴客戶端,本次響應的數據是文本類型,utf-8 編碼 response.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' }) response.write('回家過年了,今年賺了:' + money + ' RMB') response.end() }) // 3. 經過 Server 對象的 listen 函數,設置一個監聽的端口號,啓動服務器 server.listen(3000, function() { // 當服務器開啓監聽成功以後,會觸發該回調處理函數 console.log('server is running at port 3000.') })
5.Node 基礎
5.1 Node 中的 JavaScript
-
REPL運行環境
- R:read
- E:Eval
- P:Print
- L:Loop
-
ECMAScript
- Node 對最新的 ECMAScript 語言標準支持的很是好
- 對最新的 ES6 支持了將近 96% 的語法
- Node 除了官方的 ECMAScript 語言規範
- 同時將 console 對象、定時器等函數也移植到 Node 中
-
全局對象
- global
- 相對於瀏覽器中的的全局對象 window
- 全局做用域和模塊做用域的概念
- Console
- process
- Buffer
-
全局函數
- setInterval 和 clearInterval
- setTimeout 和 clearTimeout
- setImmediate 和 clearImmediate
-
模塊內成員
- dirname 和 filename
- require
- exports
- module
5.2 Node 中的模塊系統
- Node 根據
CommonJS
規範實現了本身的一套模塊系統
- 一個單獨的文件就是一個模塊
- 如何定義模塊:
- Node 天生就已經實現了一個模塊系統解決方案
- 默認在Node中運行的 JavaScript 腳本文件,就是一個模塊,並且是私有做用域
- 每個模塊都是一個單獨的做用域
- 每一個文件對外接口是
module.exports
對象
require
方法用於加載模塊
- 執行被加載模塊中的 JavaScript 代碼
- 獲得模塊的
module.exports
接口對象
- 核心模塊和文件模塊
6.調試 Node
一個優秀的開發人員調試能力很重要 任何一個平臺的開發都離不開調試,調試不只僅是工具,更多的是套路
6.1 關於 Debug
所謂的 Debug ,也就是找到並去除缺陷的過程,這些過程呢,其實也是由套路規則可循的,如下是我總結的一些調試經驗:
- 系統化註釋掉或禁用代碼塊:排除法
- 分析網絡數據流,肯定問題是客戶端仍是服務器
- 使用以前能用的輸入,並一點必定地修改輸入,直到問題呈現
- 用版本控制逐次回退,直到問題消失
6.2 Node 中的 Debug
- console.log
- node-inspector
- visual studio code
- 這也是一個編輯器,內部相似於 Webstorm,也集成了一個調試Node代碼的功能
- Webstorm