Code Is Never Die ！

一、Node.js 簡介

1.什么是 Node.js

Node.js? is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環境，

Node.js 的官網地址： https://nodejs.org/zh-cn/

2. Node.js 中的 JavaScript 運行環境

在這里插入圖片描述

3. Node.js 可以做什么

Node.js 作為一個 JavaScript 的運行環境，僅僅提供了基礎的功能和 API，然而，基于 Node.js 提供的這些基礎能，很多強大的工具和框架如雨后春筍，層出不窮，所以學會了 Node.js ，可以讓前端程式員勝任更多的作業和崗位：

① 基于 Express 框架（http://www.expressjs.com.cn/），可以快速構建 Web 應用

② 基于 Electron 框架（https://electronjs.org/），可以構建跨平臺的桌面應用

③ 基于 restify 框架（http://restify.com/），可以快速構建 API 介面專案

④ 讀寫和操作資料庫、創建實用的命令列工具輔助前端開發、etc…

總之：Node.js 是大前端時代的“大寶劍”，有了 Node.js 這個超級 buff 的加持，前端程式員的行業競爭力會越來越強！

4.Node.js 怎么學

瀏覽器中的 JavaScript 學習路徑：

JavaScript 基礎語法 + 瀏覽器內置 API（DOM + BOM） + 第三方庫（jQuery、art-template 等）

Node.js 的學習路徑：

JavaScript 基礎語法 + Node.js 內置 API 模塊（fs、path、http等）+ 第三方 API 模塊（express、mysql 等）

5. Node.js 環境的安裝

如果希望通過 Node.js 來運行 Javascript 代碼，則必須在計算機上安裝 Node.js 環境才行，

安裝包可以從 Node.js 的官網首頁直接下載，進入到 Node.js 的官網首頁（https://nodejs.org/en/），點擊綠色的按鈕，下載所需的版本后，雙擊直接安裝即可，

6. Node.js 環境的安裝

1 .區分 LTS 版本和 Current 版本的不同

① LTS 為長期穩定版，對于追求穩定性的企業級專案來說，推薦安裝 LTS 版本的 Node.js，

② Current 為新特性嘗鮮版，對熱衷于嘗試新特性的用戶來說，推薦安裝 Current 版本的 Node.js，但是，Current 版本中可能存在隱藏的 Bug 或安全性漏洞，因此不推薦在企業級專案中使用 Current 版本的 Node.js，

7. 查看已安裝的 Node.js 的版本號

打開終端，在終端輸入命令 node –v 后，按下回車鍵，即可查看已安裝的 Node.js 的版本號，

Windows 系統快速打開終端的方式：

使用快捷鍵（Windows徽標鍵 + R）打開運行面板，輸入 cmd 后直接回車，即可打開終端 [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-g1C5ZZqQ-1627089709481)(images/image-20201116185731339.png)]

8. 什么是終端

終端（英文：Terminal）是專門為開發人員設計的，用于實作人機互動的一種方式，

作為一名合格的程式員，我們有必要識記一些常用的終端命令，來輔助我們更好的操作與使用計算機，

9. 在 Node.js 環境中執行 JavaScript 代碼

1. 終端中的快捷鍵

在 Windows 的 powershell 或 cmd 終端中，我們可以通過如下快捷鍵，來提高終端的操作效率：

① 使用 ↑ 鍵，可以快速定位到上一次執行的命令

② 使用 tab 鍵，能夠快速補全路徑

③ 使用 esc 鍵，能夠快速清空當前已輸入的命令

④ 輸入 cls 命令，可以清空終端

fs 檔案系統模塊

1.什么是 fs 檔案系統模塊

fs 模塊是 Node.js 官方提供的、用來操作檔案的模塊，它提供了一系列的方法和屬性，用來滿足用戶對檔案的操作需求，

例如：

? fs.readFile() 方法，用來讀取指定檔案中的內容

? fs.writeFile() 方法，用來向指定的檔案中寫入內容

如果要在 JavaScript 代碼中，使用 fs 模塊來操作檔案，則需要使用如下的方式先匯入它：

const fs  = require('fs')

2.讀取指定檔案中的內容

1. fs.readFile() 的語法格式

使用 fs.readFile() 方法，可以讀取指定檔案中的內容，語法格式如下：

fs.readFile(path[,options],callback)

引數解讀：

? 引數1：必選引數，字串，表示檔案的路徑，

? 引數2：可選引數，表示以什么編碼格式來讀取檔案，

? 引數3：必選引數，檔案讀取完成后，通過回呼函式拿到讀取的結果，

2. fs.readFile() 的示例代碼

以 utf8 的編碼格式，讀取指定檔案的內容，并列印 err 和 dataStr 的值：

const fs = require('fs')
fs.readFile('./files/11.txt',"utf8",function(err,dataStr){
     console.log(err)
     console.log('-----')
     console.log(dataStr)
})

3. 判斷檔案是否讀取成功

可以判斷 err 物件是否為 null，從而知曉檔案讀取的結果：

const fs = require('fs')

fs.readFile('./files/11.txt', 'utf8', function(err, dataStr) {
  if (err) {
    return console.log('讀取檔案失敗！' + err.message)
  }
  console.log('讀取檔案成功！' + dataStr)
})

3.向指定的檔案中寫入內容

1. fs.writeFile() 的語法格式

使用 fs.writeFile() 方法，可以向指定的檔案中寫入內容，語法格式如下：

fs.writeFile(file,data[,options],callback)

引數解讀：

? 引數1：必選引數，需要指定一個檔案路徑的字串，表示檔案的存放路徑，

? 引數2：必選引數，表示要寫入的內容，

? 引數3：可選引數，表示以什么格式寫入檔案內容，默認值是 utf8，

? 引數4：必選引數，檔案寫入完成后的回呼函式，

2. fs.writeFile() 的示例代碼

向指定的檔案路徑中，寫入檔案內容：

const fs = require('fs')

fs.writeFile('./files/2.txt', 'Hello Node.js', function(err) {
   console.log(err)
})

3. 判斷檔案是否寫入成功

可以判斷 err 物件是否為 null，從而知曉檔案寫入的結果：

const fs = require('fs')

fs.writeFile('./files/2.txt', 'Hello Node.js', function(err) {
   if (err) {
    return console.log('檔案寫入失敗！' + err.message)
  }
  console.log('檔案寫入成功！')
})

4.練習 - 考試成績整理

使用 fs 檔案系統模塊，將素材目錄下成績.txt檔案中的考試資料，整理到成績-ok.txt檔案中，

整理前，成績.txt檔案中的資料格式如下

小紅=99 小白=88 小黃=77 小黑=66 小綠=55

整理完成之后，希望得到的成績-ok.txt檔案中的資料格式如下：

小紅：99
小白：88
小黃：77
小黑：66
小綠：55

核心實作步驟

① 匯入需要的 fs 檔案系統模塊

② 使用 fs.readFile() 方法，讀取素材目錄下的成績.txt 檔案

③ 判斷檔案是否讀取失敗

④ 檔案讀取成功后，處理成績資料

⑤ 將處理完成的成績資料，呼叫 fs.writeFile() 方法，寫入到新檔案成績-ok.txt 中

代碼如下:

// 1. 匯入 fs 模塊
const fs = require('fs')

// 2. 呼叫 fs.readFile() 讀取檔案的內容
fs.readFile('../素材/成績.txt', 'utf8', function(err, dataStr) {
  // 3. 判斷是否讀取成功
  if (err) {
    return console.log('讀取檔案失敗！' + err.message)
  }
  // console.log('讀取檔案成功！' + dataStr)

  // 4.1 先把成績的資料，按照空格進行分割
  const arrOld = dataStr.split(' ')
  // 4.2 回圈分割后的陣列，對每一項資料，進行字串的替換操作
  const arrNew = []
  arrOld.forEach(item => {
    arrNew.push(item.replace('=', '：'))
  })
  // 4.3 把新陣列中的每一項，進行合并，得到一個新的字串
  const newStr = arrNew.join('\r\n')

  // 5. 呼叫 fs.writeFile() 方法，把處理完畢的成績，寫入到新檔案中
  fs.writeFile('./files/成績-ok.txt', newStr, function(err) {
    if (err) {
      return console.log('寫入檔案失敗！' + err.message)
    }
    console.log('成績寫入成功！')
  })
})

5.fs 模塊 - 路徑動態拼接的問題

在使用 fs 模塊操作檔案時，如果提供的操作路徑是以 ./ 或 …/ 開頭的相對路徑時，很容易出現路徑動態拼接錯誤的問題，

原因：代碼在運行的時候，會以執行 node 命令時所處的目錄，動態拼接出被操作檔案的完整路徑，

解決方案：在使用 fs 模塊操作檔案時，直接提供完整的路徑，不要提供 ./ 或 …/ 開頭的相對路徑，從而防止路徑動態拼接的問題，
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-eG1Vg71a-1627089709489)(images/image-20201116192808447.png)]

path 路徑模塊

1. 什么是 path 路徑模塊

path 模塊是 Node.js 官方提供的、用來處理路徑的模塊，它提供了一系列的方法和屬性，用來滿足用戶對路徑的處理

需求，

例如：

? path.join() 方法，用來將多個路徑片段拼接成一個完整的路徑字串

? path.basename() 方法，用來從路徑字串中，將檔案名決議出來

如果要在 JavaScript 代碼中，使用 path 模塊來處理路徑，則需要使用如下的方式先匯入它：

const path = require('path')

2. 路徑拼接

1. path.join() 的語法格式

使用 path.join()

path.join([...paths])

引數解讀：

? …paths 路徑片段的序列

? 回傳值:

2. path.join() 的代碼示例

使用 path.join() 方法，可以把多個路徑片段拼接為完整的路徑字串：

 const pathStr = path.join('/a', '/b/c', '../../', './d', 'e')
 console.log(pathStr)  // \a\b\d\e

const pathStr2= fs.readFile(__dirname + '/files/1.txt')
console.log(pathStr2)

注意：今后凡是涉及到路徑拼接的操作，都要使用 path.join() 方法進行處理，不要直接使用 + 進行字串的拼接，

3.獲取路徑中的檔案名

1. path.basename() 的語法格式

使用 path.basename() 方法，可以獲取路徑中的最后一部分，經常通過這個方法獲取路徑中的檔案名，語法格式如下：

path.basename(path[,ext])

引數解讀：

? path 必選引數，表示一個路徑的字串

? ext 可選引數，表示檔案擴展名

? 回傳: 表示路徑中的最后一部分

2. path.basename() 的代碼示例

使用 path.basename() 方法，可以從一個檔案路徑中，獲取到檔案的名稱部分：

const path = require('path')

// 定義檔案的存放路徑
const fpath = '/a/b/c/index.html'

 const fullName = path.basename(fpath)
 console.log(fullName)

const nameWithoutExt = path.basename(fpath, '.html')
console.log(nameWithoutExt)

4. 獲取路徑中的檔案擴展名

1. path.extname() 的語法格式

使用 path.extname() 方法，可以獲取路徑中的擴展名部分，語法格式如下:

path.extname(path)

引數解讀：

? path 必選引數，表示一個路徑的字串

? 回傳: 回傳得到的擴展名字串

2. path.extname() 的代碼示例

使用 path.extname() 方法，可以獲取路徑中的擴展名部分：

const path = require('path')

// 這是檔案的存放路徑
const fpath = '/a/b/c/index.html'

const fext = path.extname(fpath)
console.log(fext)

綜合案例 - 時鐘案例

1. 案例要實作的功能

將素材目錄下的 index.html 頁面，

拆分成三個檔案，分別是：

? index.css

? index.js

? index.html

并且將拆分出來的 3 個檔案，存放到 clock 目錄中
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-rgnyAOKM-1627089709494)(images/image-20201117181312904.png)]

2.案例的實作步驟

① 創建兩個正則運算式，分別用來匹配

② 使用 fs 模塊，讀取需要被處理的 HTML 檔案

③ 自定義 resolveCSS 方法，來寫入 index.css 樣式檔案

④ 自定義 resolveJS 方法，來寫入 index.js 腳本檔案

⑤ 自定義 resolveHTML 方法，來寫入 index.html 檔案

3. 步驟1 - 匯入需要的模塊并創建正則運算式

// 1.1 匯入 fs 模塊
const fs = require('fs')
// 1.2 匯入 path 模塊
const path = require('path')

// 1.3 定義正則運算式，分別匹配 <style></style> 和 <script></script> 標簽
const regStyle = /<style>[\s\S]*<\/style>/
const regScript = /<script>[\s\S]*<\/script>/

4. 步驟2 - 使用 fs 模塊讀取需要被處理的 html 檔案

// 2.1 呼叫 fs.readFile() 方法讀取檔案
fs.readFile(path.join(__dirname, '../素材/index.html'), 'utf8', function(err, dataStr) {
  // 2.2 讀取 HTML 檔案失敗
  if (err) return console.log('讀取HTML檔案失敗！' + err.message)
  // 2.3 讀取檔案成功后，呼叫對應的三個方法，分別拆解出 css, js, html 檔案
  resolveCSS(dataStr)
  resolveJS(dataStr)
  resolveHTML(dataStr)
})

5.步驟3 – 自定義 resolveCSS 方法

// 3.1 定義處理 css 樣式的方法
function resolveCSS(htmlStr) {
  // 3.2 使用正則提取需要的內容
  const r1 = regStyle.exec(htmlStr)
  // 3.3 將提取出來的樣式字串，進行字串的 replace 替換操作
  const newCSS = r1[0].replace('<style>', '').replace('</style>', '')
  // 3.4 呼叫 fs.writeFile() 方法，將提取的樣式，寫入到 clock 目錄中 index.css 的檔案里面
  fs.writeFile(path.join(__dirname, './clock/index.css'), newCSS, function(err) {
    if (err) return console.log('寫入 CSS 樣式失敗！' + err.message)
    console.log('寫入樣式檔案成功！')
  })
}

6. 步驟4 – 自定義 resolveJS 方法

// 4.1 定義處理 js 腳本的方法
function resolveJS(htmlStr) {
  // 4.2 通過正則，提取對應的 <script></script> 標簽內容
  const r2 = regScript.exec(htmlStr)
  // 4.3 將提取出來的內容，做進一步的處理
  const newJS = r2[0].replace('<script>', '').replace('</script>', '')
  // 4.4 將處理的結果，寫入到 clock 目錄中的 index.js 檔案里面
  fs.writeFile(path.join(__dirname, './clock/index.js'), newJS, function(err) {
    if (err) return console.log('寫入 JavaScript 腳本失敗！' + err.message)
    console.log('寫入 JS 腳本成功！')
  })
}

7. 步驟5 – 自定義 resolveHTML 方法

// 5.1 定義處理 HTML 結構的方法
function resolveHTML(htmlStr) {
  // 5.2 將字串呼叫 replace 方法，把內嵌的 style 和 script 標簽，替換為外聯的 link 和 script 標簽
  const newHTML = htmlStr.replace(regStyle, '<link rel="stylesheet" href="./index.css" />').replace(regScript, '<script src="./index.js"></script>')
  // 5.3 寫入 index.html 這個檔案
  fs.writeFile(path.join(__dirname, './clock/index.html'), newHTML, function(err) {
    if (err) return console.log('寫入 HTML 檔案失敗！' + err.message)
    console.log('寫入 HTML 頁面成功！')
  })
}

8.案例的兩個注意點

① fs.writeFile() 方法只能用來創建檔案，不能用來創建路徑

② 重復呼叫 fs.writeFile() 寫入同一個檔案，新寫入的內容會覆寫之前的舊內容

9.完整實體代碼

// 1.1 匯入 fs 模塊
const fs = require('fs')
// 1.2 匯入 path 模塊
const path = require('path')

// 1.3 定義正則運算式，分別匹配 <style></style> 和 <script></script> 標簽
const regStyle = /<style>[\s\S]*<\/style>/
const regScript = /<script>[\s\S]*<\/script>/

// 2.1 呼叫 fs.readFile() 方法讀取檔案
fs.readFile(path.join(__dirname, '../素材/index.html'), 'utf8', function(err, dataStr) {
  // 2.2 讀取 HTML 檔案失敗
  if (err) return console.log('讀取HTML檔案失敗！' + err.message)
  // 2.3 讀取檔案成功后，呼叫對應的三個方法，分別拆解出 css, js, html 檔案
  resolveCSS(dataStr)
  resolveJS(dataStr)
  resolveHTML(dataStr)
})

// 3.1 定義處理 css 樣式的方法
function resolveCSS(htmlStr) {
  // 3.2 使用正則提取需要的內容
  const r1 = regStyle.exec(htmlStr)
  // 3.3 將提取出來的樣式字串，進行字串的 replace 替換操作
  const newCSS = r1[0].replace('<style>', '').replace('</style>', '')
  // 3.4 呼叫 fs.writeFile() 方法，將提取的樣式，寫入到 clock 目錄中 index.css 的檔案里面
  fs.writeFile(path.join(__dirname, './clock/index.css'), newCSS, function(err) {
    if (err) return console.log('寫入 CSS 樣式失敗！' + err.message)
    console.log('寫入樣式檔案成功！')
  })
}

// 4.1 定義處理 js 腳本的方法
function resolveJS(htmlStr) {
  // 4.2 通過正則，提取對應的 <script></script> 標簽內容
  const r2 = regScript.exec(htmlStr)
  // 4.3 將提取出來的內容，做進一步的處理
  const newJS = r2[0].replace('<script>', '').replace('</script>', '')
  // 4.4 將處理的結果，寫入到 clock 目錄中的 index.js 檔案里面
  fs.writeFile(path.join(__dirname, './clock/index.js'), newJS, function(err) {
    if (err) return console.log('寫入 JavaScript 腳本失敗！' + err.message)
    console.log('寫入 JS 腳本成功！')
  })
}

// 5.1 定義處理 HTML 結構的方法
function resolveHTML(htmlStr) {
  // 5.2 將字串呼叫 replace 方法，把內嵌的 style 和 script 標簽，替換為外聯的 link 和 script 標簽
  const newHTML = htmlStr.replace(regStyle, '<link rel="stylesheet" href="./index.css" />').replace(regScript, '<script src="./index.js"></script>')
  // 5.3 寫入 index.html 這個檔案
  fs.writeFile(path.join(__dirname, './clock/index.html'), newHTML, function(err) {
    if (err) return console.log('寫入 HTML 檔案失敗！' + err.message)
    console.log('寫入 HTML 頁面成功！')
  })
}

PS: 博主博客主頁(Rainux)，精彩繼續，歡迎來訪！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290105.html

標籤：其他

上一篇：【自我修煉】大疆技術總監對于大學生學習機器人工程師路線建議 ( 大一篇)

下一篇：html引入外部js失效不起作用的解決辦法

入手Node最好的文章---第一部分

一、Node.js 簡介

1.什么是 Node.js

2. Node.js 中的 JavaScript 運行環境

3. Node.js 可以做什么

4.Node.js 怎么學

5. Node.js 環境的安裝

6. Node.js 環境的安裝

7. 查看已安裝的 Node.js 的版本號

8. 什么是終端

9. 在 Node.js 環境中執行 JavaScript 代碼

fs 檔案系統模塊

1.什么是 fs 檔案系統模塊

2.讀取指定檔案中的內容

3.向指定的檔案中寫入內容

4.練習 - 考試成績整理

5.fs 模塊 - 路徑動態拼接的問題

path 路徑模塊

1. 什么是 path 路徑模塊

2. 路徑拼接

3.獲取路徑中的檔案名

4. 獲取路徑中的檔案擴展名

綜合案例 - 時鐘案例

1. 案例要實作的功能

2.案例的實作步驟

3. 步驟1 - 匯入需要的模塊并創建正則運算式

4. 步驟2 - 使用 fs 模塊讀取需要被處理的 html 檔案

5.步驟3 – 自定義 resolveCSS 方法

6. 步驟4 – 自定義 resolveJS 方法

7. 步驟5 – 自定義 resolveHTML 方法

8.案例的兩個注意點

9.完整實體代碼