Node.js 學習筆記：構建 Web 服務

例3. 構建 Web 服務器

這部分示例將致力于用 Node.js 模擬一個類似于 Apache 的 Web 服務器，處理瀏覽器端的請求，將相關的頁面響應給瀏覽器。首先，我們要在code目錄下執行mkdir 03_webSever命令來創建用于存放這一組示例的目錄。然后執行以下步驟：

在code/03_webSever目錄下執行mkdir www命令，創建網站目錄，然后在其中創建index.htm和login.htm兩個 HTML 文件以及一個名為style.css的 CSS 文件：

1、index.htm:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>首頁</title>
</head>
<body>
<h1>你好,nodejs！</h1>
<p> <a href="login.htm">請登錄！</a> </p>
</body>
</html>

2、login.htm:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>登錄頁面</title>
</head>
<body>
<h1>你已經登錄。。。</h1>
<p> <a href="index.htm">回首頁！</a> </p>
</body>
</html>

3、style.css:

body { 
background: gray; 
}

2、在code/03_webSever目錄下執行touch 03-webServer.js命令，創建腳本文件，并輸入如下代碼：

const http = require('http')
const fs = require('fs')
const server = http.createServer()

server.on('request', function(req, res) {
const webRoot = './www'
const url = req.url
if ( url === '/' ) {
url = '/index.htm'
}

fs.readFile(webRoot+url, function(err, data) {
if ( err !== null ) {
console.error('錯誤信息：' + err.message)
return res.end('<h1>404 頁面沒找到！</h1>')
}
res.end(data)
})
})

server.listen(8080, function(){
console.log('請訪問http://localhost:8080/，按Ctrl+C終止服務！')
})

3、保存所有文件后，在code/03_webSever目錄下執行node 03-webServer.js命令，然后打開瀏覽器并訪問http://localhost:8080/，就會看到如下頁面：

示例4. 使用art-template模版引擎生成網頁

這一部分本示例將以生成個人信息頁面為例，演示在服務器端基于 Node.js 使用art-template模板引擎來生成網頁。為此，我們需要在code目錄下執行mkdir 04_templatingEngine命令來創建用于存放這一組示例的目錄。

1. 單模版渲染

首先來示范一下如何使用art-template模版引擎的渲染單一模版文件，請跟著以下步驟來構建示例：

在code/04_templatingEngine目錄下執行npm install art-template --save命令，安裝將art-template包安裝到當前示例項目中。
在code/04_templatingEngine目錄下執行touch singleTpl.htm命令，創建一個模版文件，并在其中輸入以下代碼：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>{{ name }}的個人信息</title>
</head>
<body>
<h1>{{ name }}的個人信息</h1>
<table>
<tr><td>姓名：</td><td>{{ name }}</td></tr>
<tr><td>年齡：</td><td>{{ age }}</td></tr>
<tr><td>性別：</td><td>{{ sex }}</td></tr>
<tr>
<td>愛好：</td>
<td>{{ each items }} {{ $value }} {{ /each }}</td>
</tr>
</table>
</body>
</html>

3、在code/04_templatingEngine目錄下執行touch 04-useTemplating_engine.js命令，創建一個腳本文件，具體如下：

const http = require('http')
const fs = require('fs')
const template = require('art-template')

class human {
constructor(name, age, sex, items=[])
{
this.name = name
this.age = age
this.sex = sex
this.items = items
}
}

const server = http.createServer()

server.on('request', function(req, res){
const url = req.url
let boy = null
if ( url === '/' ) {
boy = new human('凌杰', '37', '男', ['看書', '看電影','旅游'])
} else if ( url === '/wang' ) {
boy = new human('蔓兒', '25', '女', ['看書', '看電影','寫作'])
}

if ( boy === null ) {
return res.end('<h1>404 頁面沒找到！</h1>')
}

fs.readFile('./singleTpl.htm', function(err, data){
if ( err !== null ) {
return res.end('<h1>404 沒找到模版文件！</h1>')
}

const strHtml = template.render(data.toString(), {
name : boy.name,
age : boy.age,
sex : boy.sex,
items: boy.items
})

res.end(strHtml)
})
})

server.listen(8080, function(){
console.log('請訪問http://localhost:8080/，按Ctrl+C終止服務！')
})

4、保存所有文件后，在code/04_templatingEngine目錄下執行node 04-useTemplating_engine.js命令，然后打開瀏覽器并訪問http://localhost:8080/wang，就會看到如下頁面：

2. 多模版組合渲染

在同一 Web 應用中，所有的頁面通常都由相同的頭部和底部元素，所以為了減少代碼的冗余，提高重用率，開發者們通常會考慮將重復的部分獨立成一個單獨的模版文件，然后用相互包含的方式組合成頁面。下面就繼續以art-template模板引擎為例來演示一下如何將多個模版組合渲染成單一的 HTML 頁面，其具體步驟如下：

在code/04_templatingEngine目錄下執行touch tpl1.art tpl2.art命令，創建兩個模版文件，然后在這兩個文件中分別輸入以下代碼：

1、tpl1.art :

<header>
<h1>查看個人信息</h1>
<br>
</header>

2、tpl2.art ：

<footer>
<div>
<p>? 2016 owlman.org；本站系純HTML5站點。</p>
</div>
</footer>

2、在code/04_templatingEngine目錄下執行touch multiTpl.htm命令創建用于組合的 HTML 頁面文件，并在其中輸入以下代碼：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>查看個人信息</title>
</head>
<body>
{{ include './tpl1.art' }}
<h2>{{ name }}的個人信息</h2>
<table>
<tr><td>姓名：</td><td>{{ name }}</td></tr>
<tr><td>年齡：</td><td>{{ age }}</td></tr>
<tr><td>性別：</td><td>{{ sex }}</td></tr>
<tr>
<td>愛好：</td>
<td>{{ each items }} {{ $value }} {{ /each }}</td>
</tr>
</table>
{{ include './tpl2.art' }}
</body>
</html>

3、在code/04_templatingEngine目錄下執行

cp 04-useTemplating_engine.js 04-useTemplating_engine2.js命令，將之前的代碼復制一份，并修改如下：

const http = require('http')
const fs = require('fs')
const template = require('art-template')

template.defaults.root = __dirname // 配置模版的查找根目錄

class human {
constructor(name, age, sex, items=[])
{
this.name = name
this.age = age
this.sex = sex
this.items = items
}
}

const server = http.createServer()

server.on('request', function(req, res){
const url = req.url
let boy = null
if ( url === '/' ) {
boy = new human('凌杰', '37', '男', ['看書', '看電影','旅游'])
} else if ( url === '/wang' ) {
boy = new human('蔓兒', '25', '女', ['看書', '看電影','寫作'])
}

if ( boy === null ) {
return res.end('<h1>404 頁面沒找到！</h1>')
}

fs.readFile('./multiTpl.htm', function(err, data){ // 修改了要讀取的模版文件
if ( err !== null ) {
return res.end('<h1>404 沒找到模版文件！</h1>')
}

const strHtml = template.render(data.toString(), {
name : boy.name,
age : boy.age,
sex : boy.sex,
items: boy.items
})

res.end(strHtml)
})
})

server.listen(8080, function(){
console.log('請訪問http://localhost:8080/，按Ctrl+C終止服務！')
})

4、保存所有文件后，在code/04_templatingEngine目錄下執行node 04-useTemplating_engine2.js命令，然后打開瀏覽器并訪問http://localhost:8080，就會看到如下頁面：

3. 多模版繼承渲染

當然，如果重復的元素只有頭部和尾部的話，有時候使用模版繼承語法來渲染頁面會是一個更好的選擇，下面就來繼續演示一下art-template模板引擎的繼承語法來渲染 HTML 頁面，其具體步驟如下：

在code/04_templatingEngine目錄下執行touch baseTpl.art命令，創建父模版文件，然后在該文件中輸入以下代碼：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>{{ name }}的個人信息</title>
</head>
<body>
<header>
<h1>查看個人信息</h1>
<br>
</header>

{{ block 'message' }}
{{ /block }}

<footer>
<div>
<p>? 2016 owlman.org；本站系純HTML5站點。</p>
</div>
</footer>
</body>
</html>

2、在code/04_templatingEngine目錄下執行touch extendTpl.htm命令，創建子模版文件，然后在該文件中輸入以下代碼：

{{ extend 'baseTpl.art' }}

{{ block 'message' }}
<h1>{{ name }}的個人信息</h1>
<table>
<tr><td>姓名：</td><td>{{ name }}</td></tr>
<tr><td>年齡：</td><td>{{ age }}</td></tr>
<tr><td>性別：</td><td>{{ sex }}</td></tr>
<tr>
<td>愛好：</td>
<td>{{ each items }} {{ $value }} {{ /each }}</td>
</tr>
</table>
{{ /block }}

3、在code/04_templatingEngine目錄下執行cp 04-useTemplating_engine.js 04-useTemplating_engine3.js命令，將之前的代碼復制一份，并修改如下：

// 用Node.js生成動態頁面
// 作者：owlman
// 時間：2019年07月12日

const http = require('http')
const fs = require('fs')
const template = require('art-template')

template.defaults.root = __dirname

class human {
constructor(name, age, sex, items=[])
{
this.name = name
this.age = age
this.sex = sex
this.items = items
}
}

const server = http.createServer()

server.on('request', function(req, res) {
const url = req.url
let boy = null
if (url === '/') {
boy = new human('凌杰', '37', '男', ['看書', '看電影','旅游'])
} else if (url === '/wang') {
boy = new human('蔓兒', '25', '女', ['看書', '看電影','寫作'])
}

if (boy === null) {
return res.end('<h1>404 頁面沒找到！</h1>')
}

fs.readFile('./extendTpl.htm', function(err, data) {
if ( err !== null ) {
return res.end('<h1>404 沒找到模版文件！</h1>')
}

const strHtml = template.render(data.toString(), {
name : boy.name,
age : boy.age,
sex : boy.sex,
items: boy.items
})

res.end(strHtml)
})
})

server.listen(8080, function(){
console.log('請訪問http://localhost:8080/，按Ctrl+C終止服務！')
})

4、保存所有文件后，在code/04_templatingEngine目錄下執行node 04-useTemplating_engine3.js命令，然后打開瀏覽器并訪問http://localhost:8080，就會看到與之前相同的頁面。

示例5. Web 表單處理

這一部分示例將致力于演示用 Node.js 處理 Web 表單，我們將會分別示范如何用get和post兩種方法來處理表單的請求。首先，我們要在code目錄下執行mkdir 05_webForm命令來創建用于存放這一組示例的目錄。

1. get 方法

先用一個信息查詢程序來演示一下如何處理使用get方法來發送請求的表單。首先，在code/05_webForm目錄下執行mkdir get_form命令，并執行以下步驟：

在code/05_webForm/get_form目錄下執行npm install art-template命令，將art-template安裝到當前示例項目中。
在code/05_webForm/get_form目錄下執行touch index.htm，創建一個模版文件，具體如下： <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>個人信息查詢</title>
</head>
<body>
<h1>個人信息查詢</h1>
<form action="/query" method="GET">
<label for="message">請輸入要查詢的姓名：</label>
<input type="text" name="qname" />
<input type="submit" value="查詢" />
</form>
<br />
{{ if name }}
<table>
<caption>{{ name }}的個人信息</caption>
<tr><td>姓名：</td><td>{{ name }}</td></tr>
<tr><td>年齡：</td><td>{{ age }}</td></tr>
<tr><td>性別：</td><td>{{ sex }}</td></tr>
<tr>
<td>愛好：</td>
<td>{{ each items }} {{ $value }} {{ /each }}</td>
</tr>
</table>
{{ else if query_error }}
<h2>沒有找到相關信息！</h2>
{{ /if }}
</body>
</html>

3、在code/05_webForm/get_form目錄下執行touch app.js，創建一個腳本文件，具體如下： const http = require('http')

const fs = require('fs')
const url = require('url')
const template = require('art-template')

class human {
constructor(name, age, sex, items=[])
{
this.name = name
this.age = age
this.sex = sex
this.items = items
}
}

const db = [
new human('凌杰', '37', '男', ['看書', '看電影','旅游']),
new human('蔓兒', '25', '女', ['看書', '看電影','寫作']),
new human('張語', '32', '女', ['看書', '旅游','繪畫'])
]

const server = http.createServer(function(req, res){
const query = url.parse(req.url, true)
let obj = null
let query_error = false
if ( query.pathname === '/' ) {
query_error = false
}
else if (query.pathname === '/query') {
for(let i = 0; i < db.length; ++i) {
if (db[i].name == query.query["qname"]) {
obj = db[i]
}
}
if ( obj === null ) {
query_error = true
}
} else {
return res.end('<h1>404 頁面沒找到！</h1>')
}

fs.readFile('./index.htm', function(err, data){
if ( err !== null ) {
return res.end('<h1>404 沒找到模版文件！</h1>')
}

let strHtml = null
if ( obj !== null ) {
strHtml = template.render(data.toString(), {
name : obj.name,
age : obj.age,
sex : obj.sex,
items: obj.items,
query_error: query_error
})
} else {
strHtml = template.render(data.toString(), {
name : false,
query_error: query_error
})
}
res.end(strHtml)
})
})

server.listen(8080, function() {
console.log('請訪問http://localhost:8080/，按Ctrl+C終止服務！')
})

4、保存所有文件后，在code/05_webForm/get_form目錄下執行node app.js命令，結果如下：

2. post 方法

先來演示如何處理使用post方法來發送請求的表單。首先，在code/05_webForm目錄下執行mkdir post_form命令，并執行以下步驟：

在code/05_webForm/get_form目錄下執行npm install art-template命令，將art-template安裝到當前示例項目中。
在code/05_webForm/post_form目錄下執行touch index.htm，創建一個模版文件，具體如下：

 <!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>個人信息管理</title>
</head>
<body>
<h1>個人信息管理</h1>
<table>
<caption>個人數據表</caption>
<tr><th>姓名</th><th>年齡</th><th>性別</th><th>愛好</th></tr>
{{ each db }}
<tr>
<td>{{ $value.name }} </td>
<td>{{ $value.age }} </td>
<td>{{ $value.sex }} </td>
<td>{{ each $value.items }} {{ $value }} {{ /each }}</td>
</tr>
{{ /each }}
</table>

<form action="/add" method="POST">
<table>
<caption>錄入新人員</caption>
<tr><td>姓名：</td><td><input type="text" name="uname" /></td></tr>
<tr><td>年齡：</td><td><input type="text" name="age"></td></tr>
<tr><td>性別：</td><td><input type="text" name="sex"></td></tr>
<tr><td>愛好：</td><td><input type="text" name="items"></td></tr>
</table>
<input type="submit" value="添加" />
</form>
</body>
</html>

3、在code/05_webForm/post_form目錄下執行touch app.js，創建一個腳本文件，具體如下：

const http = require('http')
const fs = require('fs')
const url = require('url')
const querystring = require('querystring')
const template = require('art-template')

class human {
constructor(name, age, sex, items=[])
{
this.name = name
this.age = age
this.sex = sex
this.items = items
}
}

const db = [
new human('凌杰', '37', '男', ['看書', '看電影','旅游']),
new human('蔓兒', '25', '女', ['看書', '看電影','寫作']),
new human('張語', '32', '女', ['看書', '旅游','繪畫'])
]

const server = http.createServer(function(req, res){
const query = url.parse(req.url, true)
if ( query.pathname === '/' ) {
fs.readFile('./index.htm', function(err, data) {
if ( err !== null ) {
return res.end('<h1>404 沒找到模版文件！</h1>')
}

const strHtml = template.render(data.toString(), {
"db": db
})

res.end(strHtml)
})
}
else if ( query.pathname === '/add' ) {
req.on('data', function(chunk) {
const obj = querystring.parse(chunk.toString())
db.push(new human(
obj['uname'],
obj['age'],
obj['sex'],
obj['items'].split('，'),
))
})

res.writeHead(302, {
'location': `/`
})

res.end()
} else {
return res.end('<h1>404 頁面沒找到！</h1>')
}
})

server.listen(8080, function(){
console.log('請訪問http://localhost:8080/，按Ctrl+C終止服務！')
})

4、保存所有文件后，在code/05_webForm/post_form目錄下執行node app.js命令，結果如下：

毒來了，程序員也要學習?。『螞r你的電腦還沒中病毒！

以JavaScript和V8引擎為核心，事件驅動架構和可擴展性開箱即用，Node.js已經快速成為創建Web應用和SaaS產品的新事實標準。許多框架，如Express，Sails和Socket.IO，使程序員能夠只關注業務邏輯，無需考慮其他問題。

當然，Node.js目前的普及度遠低于JavaScript。JavaScript支持許多不同風格的編程方式，包括函數式編程，程序編程和面向對象編程，它允許程序員靈活運用各種編程風格。

但JavaScript是把雙刃劍，JavaScript的多重性質意味著幾乎一切都是可變的。因此，在編寫Node.js代碼時，程序員無法清除對象和范圍突變的概率。因為JavaScript缺少尾調用優化（允許遞歸函數重用堆棧幀進行遞歸調用），所以使用遞歸進行大量迭代是很危險的。除了這些陷阱之外，Node.js是單線程的，因此開發人員必須編寫異步代碼。

下面我將分享編寫高效和可擴展Node.js代碼最重要的10個JavaScript概念：

1、立即調用函數表達式

一個立即調用的函數表達式（IIFE）是一個在創建時可立即執行的函數。它與任何事件或異步執行無關。您可以定義一個IIFE，如下所示：

第一對括號function（）{...}將括號內的代碼轉換為表達式。第二對括號調用表達式生成的函數。IIFE也可以被描述為一個自我調用的匿名函數，最常見的用法是限制通過var或者封裝上下文變量的范圍，以避免名稱沖突。

2、閉包

JavaScript中的閉包是內部函數，即使在外部函數返回控件后也可以訪問其外部函數的作用域。閉包使內部函數的變量為私有，一個簡單例子如下所示：

count變量分配了一個外部函數，外部函數只運行一次，將計數器設置為零并返回內部函數。 _counter變量只能由內部函數訪問，這樣就可以像私有變量一樣運行。

3、Prototype

每個JavaScript函數都有一個用于附加屬性和方法的prototype，此屬性不可枚舉，它允許程序員將方法或成員函數附加到其對象。JavaScript僅通過prototype屬性支持繼承。在繼承對象的情況下，prototype指向父對象，將方法附加到函數的常見方法是使用prototype，如下所示：

4、私有屬性，使用閉包

JavaScript允許程序員使用下劃線前綴定義私有屬性，如上述示例所示。但這可能妨礙用戶直接訪問或修改私有屬性。使用閉包定義私有屬性將解決這個問題，在對象本身上定義需要訪問私有屬性的成員函數，可以使用閉包制作私有屬性，如下所示：

5、Module模式

Module模式是JavaScript中最常用的設計模式，用于實現松散耦合，結構良好的代碼。它允許程序員創建公共和私有兩種訪問級別，實現Module模式的一種方式如下所示：

Revealing Module模式類似于Module模式，上述示例使用Revealing Module模式編寫如下：

6、Hoisting

在代碼執行之前，JavaScript將變量和函數聲明移動到其范圍頂部。無論程序員將代碼中的函數和變量聲明放在哪里，它們都將由解釋器移動到其范圍的頂部。這可能是好的，也可能不是。

在執行任何代碼之前先處理變量聲明。具有諷刺意味的是，未聲明的變量在賦予值之前不存在，這將導致所有未聲明的變量成為全局變量，雖然函數聲明已經懸掛，但函數表達式未被懸停。提升變量和函數時，JavaScript具有優先級。優先級從上到下依次是可變分配、函數聲明、變量聲明。為了避免錯誤，程序員應該在每個范圍的開始處聲明變量和函數。

7、Currying

Currying是使函數更靈活的方法。使用curried函數，程序員可以傳遞函數期望的所有參數并獲取結果，或者只傳遞部分參數，并接收等待其余參數。一個簡單例子如下：

原始功能可以直接將參數逐個傳遞給一個單獨的括號，如下所示：

8、apply，call和bind方法

任何JavaScript程序員必須了解apply，call和bind之間的區別。這三個函數是相似的，因為它們的第一個參數始終要給出調用該方法函數的“this”值或上下文。三個之中，call最簡單，它與調用函數上下文相同。以下是一個例子：

apply幾乎和call一樣。唯一的區別是將參數作為數組傳遞，而不是單獨傳遞。數組在JavaScript中更容易操作，為處理函數打開了更多可能性。以下是使用apply和call的示例：

bind方法允許將參數傳遞給函數而不調用。返回一個新的函數，其中的參數在任何其他參數前面都是有界限的。例子如下：

9. Memoization

Memoization是一種優化技術，可以加快函數執行，并在再次發生同一組輸入時返回緩存的結果。JavaScript對象的行為就像關聯數組，使JavaScript易于記憶。例如，我們可以將遞歸階乘函數轉換成一個記憶的階乘函數，如下所示：

10. 方法重載

方法重載允許多個方法具有相同的名稱但不同的參數。編譯器或解釋器根據傳遞的參數數量確定要調用的函數。JavaScript不直接支持方法重載。但是你可以像下面所示完成一些事情：

當你足夠了解Node.js，你會發現很多方法可以解決幾乎遇到的所有問題，但一定要采取正確的做法，不然很可能要重寫整個邏輯。本文中的10個JavaScript概念是每個Node.js開發人員應該知道的基礎知識。但只是冰山一角，希望程序員們可以持續學習。

者按：很多人都在尋找一個能夠統一編程語言江湖的“老大哥”，戰火也重來沒有停止過。Jonny Asmar在hackernoon上發表了一篇文章指出，因為Node的存在，JavaScript具備了多功能性，已經有了坐穩“頭把交椅”的勢頭。文章由36氪編譯。

作者寫在前面的話：這篇文章已經引起了大量的反對，因為很多人并不認為JavaScript是編程語言中的勝利者。

盡管我承認，我的標題可能會引起爭議，可能會更加讓人有點擊欲望。但我還是想強調，這篇文章并不是說JS是“最好”的語言。

我只是在文章中簡單地描述了它所覆蓋的領域，以及它能夠讓簡單的前端開發人員做更多事情的方法。

在編程的世界里，有一場曠日持久的戰爭。自從計算機問世以來，科學家們一直在尋找一種完美的編程語言。一個接一個的新語言被創造出來，以適應某種目的。隨著新語言的出現，也會出現新的技術時代，新的技術社區，和大量的開源貢獻。當然還會有不可避免的新的限制。自從在Java應用程序和Flash（我曾經是Flash開發者）在互聯網上長期占據主導地位以來，我們已經看到有各種各樣的語言的涌現，各種各樣的語言毫無理由的消失，因為它們已經毫無用武之地。

世界正在朝著不同的方向前進……

那些曾經耀眼的新語言現在已經過時了，開發者越來越少，而新的語言也開始制造噪音。

到現在，JavaScript已經有幾十年的歷史了。所以，你可能會想，“它將會到何處去？”這篇文章其實不是關于“JavaScript”語言的。也不會去討論在它之前許多語言的崛起和衰落。同時，也不是關于JavaScript是如何“新鮮有光澤”的。

這篇文章是關于Node的。

真的很有必要，在一開始就區分這一點。因為Node不只是一種語言。而是一個生態系統。

這就是這篇文章的主旨。

不過也不完全是這樣。我不打算詳細講述這個生態系統是世界上有史以來最具創新性的開源合作的推動者。這是另一個的話題。

我要說明的是，Node是如何通過遍歷現代編程的五個關鍵領域，贏得了一場關于完美語言的古老戰爭的。

Web開發

React、Angular、Vue

React、Angular和Vue都是當今最重要的前端框架?？偟膩碚f，Facebook，Google和FOSS社區共同開發出了一種令人興奮的開發交互式用戶界面的高效工具。

因此，現在你在網絡上做的所有事情都是通過一個高度互動、美觀、易用的界面來實現的。這些框架之所以能夠完全實現，完全是因為Node生態系統，你已經知道了。

你看，毫無疑問，JavaScript在前端Web開發中占據了主導地位，但React，Angular和Vue已經將它提升到了一個新的高度。

這是用戶界面的時代。

前端開發人員不再回避構建復雜的單頁面Web應用程序和完整的軟件套件的時代。我曾經是一名Web開發人員，現在我是一名軟件開發人員。

就這樣……JavaScript贏得了Web開發。

移動開發（Mobile）

React Native

這一部分不僅只是闡述Node在Mobile領域的成功，還將提出另一個關鍵問題：

Node是跨平臺的。

這不僅僅是“哦，酷，它也能在我的手機上工作！”，也不僅僅是“哇，我的手機、平板電腦、筆記本電腦和電視都可以使用YouTube！”。

Node跨平臺的方式是最重要的。對于開發者來說，這是一個真正的跨平臺生態系統。那些真正建立起“噢，酷”和“哇”的東西的人都喜歡這個。

React Native只是Node生態系統中開發的框架的一個例子，它以前所未有的方式彌合了前端開發和移動應用開發之間的鴻溝，這是其他任何框架都沒有的。

移動開發的最大壓力一直是Web的拉動。但是，通過React Native和Node生態系統，開發者可以構建一個兼容Web、iOS和Android的應用。沒有其他語言能提供這種多功能性。

就這樣……JavaScript贏得了移動開發。

桌面開發（Desktop）

Electron

當然，并不是所有的事情都發生在Web上。桌面應用程序對于我們當前這個依賴技術的世界的運營中也至關重要。

但是，既然Web現在能夠提供功能齊全的應用程序，為什么我們還要開發桌面軟件，并對其進行不同的處理呢？

實際上，JavaScript趕上桌面端的性能需求，只是個時間問題。

所以，Electron誕生了。

當然，在桌面編程的時候，還有更高效的語言可以使用，但對于我們今天使用的大多數應用程序來說，JavaScript已經足夠了。

多虧了Cheng Zhao和Github，創建了一個能夠改變桌面計算面貌的框架。

Electron不僅讓桌面應用程序的開發變得更加簡單，而且也能兼容Mac, Windows和Linux，它構建的應用可在這三個操作系統上面運行。

雖然Windows仍然是當今最普及的操作系統，Mac的穩定增長已經持續了15年，越來越多的開發者每天都在使用Linux。此外，像樹莓派這樣的小玩具也會讓Linux出現在許多以前只有windows或Mac的家庭中。我認為你可以理解為什么跨操作系統的開發會具有巨大的優勢……而這僅僅是個開始。

截止到現在，Node生態系統已經能夠完全覆蓋Web開發、移動開發和桌面開發。提供了一個能夠在這些所有的平臺建立相同用戶界面的技能組合。

就這樣……JavaScript贏得了桌面開發。

后端開發

ExpressJS

我不想在這里介紹NPM（節點包管理器）上提供的無數軟件包，這些包可以方便后端開發，因此，我只會提到Express sjs，有一個簡單但深刻的理由：

Node是為后端而構建的。

而且，Node生態系統中的JavaScript已經成為了一種多用途的工具，已經被用于開發自己的服務器應用程序。在Node創建之前，JavaScript基本上只支持瀏覽器。它不需要執行復雜的服務器端操作，如數據庫讀取、圖像轉換或壓縮。但現在它可以……

而且，正如以上幾個例子一樣，這種對代碼共享和重用顯著的簡化也產生了一些明顯的副作用。

其中一個副作用就是服務器端渲染。

你get到了嗎？

服務器端

渲染

這兩件事有什么共同點？

傳統意義上來說，沒什么。但“前端”（JavaScript）或“后端”（PHP、Java、Python、Ruby等）的開發通常是由兩個完全獨立的團隊來維護。

兩個團隊的人非常不同。

但現在不再是了！

感謝Node，我們現在能夠在用戶的瀏覽器需要渲染一件東西之前，在服務器端組裝復雜的用戶界面。這就是為什么現在Web如此時髦的原因。因為Node已經消除了后端和前端之間的界限。

就這樣……JavaScript贏得了后端開發。

游戲開發

Unity 3D

我把這個放到了最后，因為它并不是真正的“Node”，而是JavaScript的東西，我想稍微寬泛一些：

JavaScript的成功不是因為它優于其他語言。它的成功是一個直接的結果，它對幾乎每個社區都能夠適應。

JavaScript開發者并非純粹主義者。

我們喜歡我們的語言（不是），版本分散、依賴于轉譯、跨平臺、前沿、不斷發展，以及以前沒有語言的地方。

就像游戲開發！

當Unity 3D首次推出基于JavaScript的“UnityScript”作為游戲開發工具的時候，我當時就意識到，JavaScript將會做一些非常酷的事情。這是該公司首次進軍非Web開發領域。

這是一個明確的跡象，表明JavaScript可以做的不僅僅是打開“飛出”菜單，在頁面上調整字體大小。它可以做更多的事情，讓你給這篇文章或者一張圖片點贊。它可以處理沉浸式的跨平臺游戲體驗。那些曾經被限制在Chrome、Firefox和Internet Exploder的開發者，突然之間也成了一名游戲開發者。

雖然Unity最近宣布他們將不在支持UnityScript，但我還是要說：

就這樣……JavaScript贏得了游戲開發。

好吧，也許不是。

結語

我不知道這個征服會在什么時候停止，但Node正在瘋狂爆發。它正在顛覆一個又一個的發展難題，為一個軟件開發的世界鋪平了道路，在這個世界里，一種語言可以統治所有。我確實覺得我需要重申一下——以防被忽視：

在任何一個領域，JavaScript都不是最佳語言。

JavaScript的優勢在于它的多功能性。它來自開放式的社區，它采用了這種無分類、多態的腳本語言，并將其轉變為當今最強大的開發生態系統。

如果你有不同的看法，歡迎在留言區互動。

編譯組出品。編輯：郝鵬程

在線咨詢

上一篇：web前端培訓機構不用著急選，先了解一下HTML5的發展史最靠譜
下一篇：前端程序員實現在線預覽pdf、word、xls、ppt等文件，超實用！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商