Js文件操作详解

一、创建JS文件

在进行JS文件操作之前，我们必须得先创建一个JS文件，这可以通过多种方式实现。

第一种方式是通过Windows资源管理器或Finder（MacOS系统预装文件管理器）直接右键新建文件，注意文件后缀必须为".js"。这种方式最为简单，但我们还有更加灵活的方式。

第二种方式是通过代码动态创建JS文件。通过我们熟悉的File API，我们可以在浏览器中动态创建一个新的JS文件，并向其中写入内容。以下是创建JS文件的示例代码：

const file = new File(["console.log('Hello World!')"], "hello.js", {
  type: "text/javascript",
});

以上代码创建了一个名为"hello.js"的文件，向其中写入了代码"console.log('Hello World!')"，并声明了文件类型为"text/javascript"。

二、读取JS文件内容

在创建JS文件之后，我们可以通过各种方法来读取JS文件中的内容。常见的有通过AJAX进行异步读取，使用Node.js的fs模块进行文件读取，或者在浏览器中使用FileReader API进行文件读取。

1. AJAX异步读取

使用AJAX进行异步读取JS文件的方式可以实现无需刷新页面，实时获取文件内容的效果。

const xhr = new XMLHttpRequest();
xhr.open("GET", "./hello.js", true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === xhr.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error(xhr.responseText);
    }
  }
};
xhr.send();

以上代码通过AJAX异步请求获取当前目录下的"hello.js"文件，并在获取成功之后将文件内容打印到控制台中。

2. Node.js fs模块读取

使用Node.js的fs模块进行JS文件读取的方式可以实现在服务器端快速获取文件内容的效果。

const fs = require("fs");
fs.readFile("./hello.js", "utf-8", (err, data) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log(data);
});

以上代码通过Node.js的fs模块读取当前目录下的"hello.js"文件，并在读取成功之后将文件内容打印到控制台中。

3. FileReader API读取

在浏览器中使用FileReader API进行文件读取的方式可以实现客户端实时获取文件内容的效果。

const file = document.getElementById("file");
file.addEventListener("change", (e) => {
  const reader = new FileReader();
  reader.readAsText(e.target.files[0]);
  reader.onload = () => {
    console.log(reader.result);
  };
});

以上代码通过监听文件表单的change事件，获取用户上传的文件，并使用FileReader API读取文件内容，并在读取成功之后将文件内容打印到控制台中。

三、修改JS文件内容

在读取JS文件之后，我们可以通过各种方法对JS文件中的内容进行修改。常见的有直接使用编辑器进行编辑，使用Node.js的fs模块进行文件写入，或者在浏览器中使用Blob API进行文件写入。

1. 编辑器修改

直接使用编辑器进行修改是最为直观、简便的方式，但需要在编辑器中开启JS文件，并手动进行编辑。

2. Node.js fs模块写入

使用Node.js的fs模块进行JS文件写入的方式可以实现在服务器端快速修改文件内容的效果。

const fs = require("fs");
fs.writeFile("./hello.js", "console.log('Hello China!')", (err) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log("File Updated!");
});

以上代码通过Node.js的fs模块将当前目录下的"hello.js"文件内容修改为"console.log('Hello China!')"，并在修改成功之后在控制台中打印"File Updated!"。

3. Blob API写入

在浏览器中使用Blob API进行文件写入的方式可以实现客户端实时更新文件内容的效果。

const content = "console.log('Hello China!')";
const blob = new Blob([content], { type: "text/javascript" });
const url = URL.createObjectURL(blob);

const link = document.createElement("a");
link.href = url;
link.download = "hello.js";

document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);

以上代码通过使用Blob API将字符串"console.log('Hello China!')"保存为一个Blob对象，并创建一个标签，设置其href属性为blob对象的URL并设置其download属性为"hello.js"。最后将标签添加到文档中，并在其上调用click()方法进行下载。注意，使用完之后，需要立即通过URL.revokeObjectURL()方法释放该Blob对象的URL。

const fs = require("fs");
fs.unlink("./hello.js", (err) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log("File Deleted!");
});

const file = new File([], "hello.js");
const url = URL.createObjectURL(file);

const link = document.createElement("a");
link.href = url;
link.download = "hello.js";

document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);

以上代码通过使用File API创建一个空文件对象，使用其URL来创建一个标签，并通过该标签模拟文件下载的操作来达到文件删除的目的。注意，使用完之后，需要立即通过URL.revokeObjectURL()方法释放该文件对象的URL。