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!");
});

以上代碼通過Node.js的fs模塊刪除當前目錄下的”hello.js”文件，並在刪除成功之後在控制台中列印”File Deleted!”。

3. File API刪除

在瀏覽器中使用File API進行文件刪除的方式可以實現客戶端實時刪除文件的效果。


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。

原創文章，作者：TZVRP，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/318100.html