node.js学习（一）

前言

哈喽，CSDN的各位大佬好，最近正在学习一下 node.js,至于为什么要学它，它可以小小的替代后端开发，让前端工程师可以去不用过于学习后端代码（主要是springboot要学习的知识太多了👉 学习的视频是黑马程序员的视频）。

fs 模块 ： 是node.js自带的模块，主要用于对 文件 的的操作。

方法：

• fs.readFile() ，读取指定文件中的内容

fs.readFile(path[,options],callback);// []中的内容可以省略

参数解读：

1. path：必选参数，字符串，表示文件的路径。
2. options：可选参数，表示以什么编码方式来读取文件。
3. callback：必选参数，文件读取完成后，通过回调函数拿到读取的结果。

• callback 中有两个参数：err、data，其中 err：当读取失败时 err 是一个对象，dataStr 是undefined，data：值文件中的数据，options 不设置默认是ascil码.

• fs.writeFile() ，向指定文件写入内容

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

参数解读：

1. file：必选参数，需要指定一个文件路径的字符串，表示文件的存放路径。
2. data：必选参数，表示写入的内容。
3. options：可选参数，表示什么格式写入文件内容,默认为utf8.
4. callback：必选参数，写入完成后的回调函数。

导入模块:

const fs = require("fs");

fs 模块- 路径动态拼接的问题

在使用 fs 模块操作文件时，如果提供的操作路径是 ./或../开头的相对路径时，很容易就拼接错误。原因是：代码在运行时，会以执行 node 命令时所处的目录动态拼接出被操作文件的完整路径。

解决方案：

1. 提供一个完整的文件路径。

//例如：c:\\Users\\用户名\\Desktop\\node\\1.txt

• 但这种方式不利于维护。

2. __dirname： 表示当前文件所在的目录 （不会动态变化）

__dirname + "file/1/txt";

path 路径模块

path 模块是 node.js 内置的用于处理路径问题的模块。

方法：

• path.join():用于将多个路径片段拼接成一个完整的路径字符串

path.join([...paths]);

参数解读：

1. …paths:路径片段的序列
2. 返回值 <string>

• path.basename():用于从路径字符串中，将文件名解析出来。

path.basename(path[,ext]);

参数解读：

1. path:必选参数，表示一个路径的字符串。
2. ext：可选参数，表示文件扩展名。
3. 返回值：<string> 表示路径的最后一部分。

导入模块：

const path = require("path");

获取路径的文件扩展名

path.extname()

path.extname(path);

参数解读：

1. path: 必须按参数， 文件路径字符串
2. 返回值 <string> : 扩展名字符串

案例

将一个包含css和js的html文件分解为单独的html、css、js文件。

代码如下：

const fs = require('fs');

const path = require('path');

//定义匹配正则表达式
const regStyle = /<style>[\s\S]*<\/style>/;
const regScript = /<script>[\s\S]*<\/script>/;

fs.readFile(path.join(__dirname, './file/index.html'), 'utf8', (err, data) => {
    if (err) return console.log(err.message);
    resolveCSS(data);
    resolveScript(data);
    resolveHtml(data);
})

function resolveCSS(htmlStr) {
    const r1 = regStyle.exec(htmlStr);
    const newCSS = r1[0].replace('<style>', '').replace('</style>', '')

    //写文件
    fs.writeFile(path.join(__dirname, './file/index.css'), newCSS, 'utf8', (err) => {
        if (err) return console.log(err.message);
        console.log('写入css成功！');
    })
}

function resolveScript(htmlStr) {
    const r2 = regScript.exec(htmlStr);
    const newScript = r2[0].replace('<script>', '').replace('</script>', '');

    //写文件
    fs.writeFile(path.join(__dirname, './file/index.js'), newScript, 'utf8', (err) => {
        if (err) return console.log(err.message);
        console.log('写入js成功');
    })
}

function resolveHtml(htmlstr) {
    const newHtml = htmlstr.replace(regStyle, '<link rel="stylesheet" href="./index.css"/>').replace(regScript, '<script src="./index.js"></script>');
    fs.writeFile(path.join(__dirname, './file/end.html'), newHtml, 'utf8', (err) => {
        if (err) return console.log(err.message);
        console.log('html写入成功！');
    })
}

且听咱细细说来：

1. 第一步：导入模块。

const fs = require('fs');
const path = require('path');

2. 定义匹配正则表达式，可以匹配到我们想要的代码。
   这里有个小知识：regexp.exec() 参数：string，返回值：一个数组，数组的第一位既是所要求的文本。

//定义匹配正则表达式
const regStyle = /<style>[\s\S]*<\/style>/;
const regScript = /<script>[\s\S]*<\/script>/;

3. 第三步：先读取文件，再找到我们读取的数据data。
   data数据如下：
   

4. 第四步：对数据进行匹配，在分别存入到对应的文件内。

function resolveCSS(htmlStr) {
    const r1 = regStyle.exec(htmlStr);
    const newCSS = r1[0].replace('<style>', '').replace('</style>', '')

    //写文件
    fs.writeFile(path.join(__dirname, './file/index.css'), newCSS, 'utf8', (err) => {
        if (err) return console.log(err.message);
        console.log('写入css成功！');
    })
}

function resolveScript(htmlStr) {
    const r2 = regScript.exec(htmlStr);
    const newScript = r2[0].replace('<script>', '').replace('</script>', '');

    //写文件
    fs.writeFile(path.join(__dirname, './file/index.js'), newScript, 'utf8', (err) => {
        if (err) return console.log(err.message);
        console.log('写入js成功');
    })
}

function resolveHtml(htmlstr) {
    const newHtml = htmlstr.replace(regStyle, '<link rel="stylesheet" href="./index.css"/>').replace(regScript, '<script src="./index.js"></script>');
    fs.writeFile(path.join(__dirname, './file/end.html'), newHtml, 'utf8', (err) => {
        if (err) return console.log(err.message);
        console.log('html写入成功！');
    })
}

大致原理相同，首先我们需要先找到我们所需要处理的数据 htmlStr,匹配之后会得到一个数组（例：r1）,而对于r1来说，我们需要r1[0]得到文本，然后用数组的replace()方法把<style></style> <script></script>替换掉，得到里面的内容，再从新写入到对应的文件内。而html文件则需要把正则表达式的内容替换成相对应的 <link>或者<script>标签。

寄语

第一次写博客，不知道合不合胃口，新人入坑CSDN，希望多多支持一下🔥,通过学习逐渐明白了，代码是用心去写的，永远没有速成的方法。