让Node.js引领你在文件操作和路径处理上游刃有余——时钟案例教你如何使用fs和path模块

狗蛋的博客之旅

已于 2023-05-21 09:36:22 修改

阅读量138

点赞数

分类专栏： Node.js 文章标签： html css javascript

于 2022-09-20 15:45:01 首次发布

本文链接：https://blog.csdn.net/weixin_43263566/article/details/126954305

版权

Node.js 专栏收录该内容

11 篇文章 5 订阅

订阅专栏

1、案例要实现的功能

将素材目录下的 index.html 页面，拆分成三个文件，分别是： index.css index.js index.html 并且将拆分出来的 3 个文件，存放到 clock 目录中。

index.html（素材的文件）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>index首页</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      background-image: linear-gradient(to bottom right, red, gold);
    }

    .box {
      width: 400px;
      height: 250px;
      background-color: rgba(255, 255, 255, 0.6);
      border-radius: 6px;
      position: absolute;
      left: 50%;
      top: 40%;
      transform: translate(-50%, -50%);
      box-shadow: 1px 1px 10px #fff;
      text-shadow: 0px 1px 30px white;

      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 70px;
      user-select: none;
      padding: 0 20px;

      /* 盒子投影 */
      -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, .2)));
    }
  </style>
</head>

<body>
  <div class="box">
    <div id="HH">00</div>
    <div>:</div>
    <div id="mm">00</div>
    <div>:</div>
    <div id="ss">00</div>
  </div>

  <script>
    window.onload = function () {
      // 定时器，每隔 1 秒执行 1 次
      setInterval(() => {
        var dt = new Date()
        var HH = dt.getHours()
        var mm = dt.getMinutes()
        var ss = dt.getSeconds()

        // 为页面上的元素赋值
        document.querySelector('#HH').innerHTML = padZero(HH)
        document.querySelector('#mm').innerHTML = padZero(mm)
        document.querySelector('#ss').innerHTML = padZero(ss)
      }, 1000)
    }

    // 补零函数
    function padZero(n) {
      return n > 9 ? n : '0' + n
    }
  </script>
</body>

</html>

2、案例的实现步骤

创建两个正则表达式，分别用来匹配 <style> 和 <script> 标签
使用 fs 模块，读取需要被处理的 HTML 文件
自定义 resolveCSS 方法，来写入 index.css 样式文件
自定义 resolveJS 方法，来写入 index.js 脚本文件
自定义 resolveHTML 方法，来写入 index.html 文件

3、代码实现

// 步骤1 - 导入需要的模块并创建正则表达式

// 1.1 导入 fs 文件系统模块
const fs = require('fs')
// 1.2 导入 paht 路径处理模块
const path = require('path')

// 1.3 匹配<style></style> 标签的正则
//  其中 \s 表示空白字符：\S 表示非空白字符  *表示匹配任意次
// <\/style> 中的 \ 是转义 / 避免与正则的 \\ 冲突
const regStyle = /<style>[\s\S]*<\/style>/
// 1.4 匹配<script></script> 标签的正则
const regScript = /<script>[\s\S]*<\/script>/

// 步骤2 - 使用 fs 模块读取需要被处理的 html 文件

// 2.1 读取需要被处理的 HTML 文件
fs.readFile(path.join(__dirname, './素材/index.html'), 'utf-8', (err, dataStr) => {
  // 2.2 读取 HTML 文件失败
  if (err) {
    return console.log('读取 HTML 文件失败!', err.message);
  }
  console.log('读取 HTML 文件成功!');
  // 2.3 读取 HTML 文件成功后,调用对应的方法，拆解出 css、js 和 html 文件
  resolveCSS(dataStr)
  resolveJS(dataStr)
  resolveHTML(dataStr)
})

// 步骤3 – 自定义 resolveCSS 方法

// 3.1 处理 css 样式
function resolveCSS(htmlStr) {
  // 3.2 使用正则提取页面中的 <style></style> 标签
  /* 
  exec() 方法是一个正则表达式方法。
  exec() 方法用于检索字符串中的正则表达式的匹配。
  该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。 
  */
  const r1 = regStyle.exec(htmlStr)
  // 3.3 将提取出来的样式字符串，做进一步处理
  // str.replace("需要替换的字符串"，"新字符串")
  const newCSS = r1[0].replace('<style>', '').replace('</style>', '')
  // 3.4 将提取出来的 css 样式，写入到 index.css 文件中
  fs.writeFile(path.join(__dirname, './colck/index.css'), newCSS, err => {
    if (err) return console.log('写入 CSS 失败!', err.message);
    console.log('写入 CSS 样式成功!');
  })
}

// 步骤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 将提取出来的 js 脚本，写入 index.js 文件中
  fs.writeFile(path.join(__dirname, './colck/index.js'), newJS, err => {
    if (err) return console.log('写入 JS 失败!', err.message);
    console.log('写入 JS 脚本成功!');
  })
}

// 步骤5 – 自定义 resolveHTML 方法
function resolveHTML(htmlStr) {
  // 5.1 使用字符串 replace 方法，把内嵌的 <style> 和 <script> 标签，替换为为联的<link> 和 <script> 标签
  const newHTML = htmlStr
    .replace(regStyle, '<link rel="stylesheet" href="./index.css"/>')
    .replace(regScript, '<script src="./index.js"></script>')
  // 5.2 将替换完成之后的 html 代码，写入到 index.html 文件中
  fs.writeFile(path.join(__dirname, './colck/index.html'), newHTML, err => {
    if (err) return console.log('写入 HTML 页面失败!', err.message);
    console.log('写入 HTML 页面成功!');
  })
}

// . 案例的两个注意点
// ① fs.writeFile() 方法只能用来创建文件，不能用来创建路径
// ② 重复调用 fs.writeFile() 写入同一个文件，新写入的内容会覆盖之前的旧内容