深圳营销网站建设报价,营销网站制作全包,做云盘网站哪个好,刚刚传来最新消息利用wasm实现读写本地项目的在线编辑器 本篇内容是通过AI-ChatGPT问答和查阅相关文档得到的答案。 起因是看到在线Vscode和RemixIde都实现了在线读取用户电脑文件夹作为项目根目录#xff0c;达成读取、创建、修改、删除该目录下所有文件、文件夹的功能。 而在浏览器中因为安…利用wasm实现读写本地项目的在线编辑器 本篇内容是通过AI-ChatGPT问答和查阅相关文档得到的答案。 起因是看到在线Vscode和RemixIde都实现了在线读取用户电脑文件夹作为项目根目录达成读取、创建、修改、删除该目录下所有文件、文件夹的功能。 而在浏览器中因为安全性问题光凭javascript本身是做不到这么完整的功能最多只能读写单个文件还不是无缝衔接和高兼容性。 其中后者是使用Nodejs开发了Remixd的浏览器插件来实现而前者就是利用近年发展起来的wasm/wasi来实现的。 由于wasm/wasi更具有光明的前途本文也是主要结合AI探索这项功能的基础实现方式。 创建一个新的Rust项目 cargo new --lib wasm-example cd wasm-example在Cargo.toml文件中添加依赖项 [lib] crate-type [cdylib][dependencies] wasm-bindgen 0.2创建一个名为lib.rs的文件并添加以下代码 use std::fs; use wasm_bindgen::prelude::*;#[wasm_bindgen] pub fn read_folder(folder_path: str) - ResultVecString, JsValue {let entries fs::read_dir(folder_path).map_err(|err| JsValue::from_str(format!(Error reading folder: {}, err)))?;let file_names: VecString entries.filter_map(|entry| {entry.ok().and_then(|e| e.file_name().into_string().ok())}).collect();Ok(file_names) }#[wasm_bindgen] pub fn write_file(file_path: str, content: str) - Result(), JsValue {fs::write(file_path, content).map_err(|err| JsValue::from_str(format!(Error writing file: {}, err)))?;Ok(()) }在项目根目录下运行以下命令将Rust代码编译为Wasm模块 wasm-pack build --target web --out-name wasm --out-dir ./static在前端HTML文件中引入生成的Wasm模块并使用JavaScript与Wasm进行交互 body input typefile idfolderInput webkitdirectory directory multiple ul idfileList/ulinput typetext idfileNameInput placeholder文件名 textarea idfileContentInput placeholder文件内容/textarea button idwriteButton写入文件/buttonscriptimport init, {read_folder, write_file} from ./static/wasm.js;async function run() {await init();const folderInput document.getElementById(folderInput);const fileListElement document.getElementById(fileList);folderInput.addEventListener(change, async (event) {const files event.target.files;fileListElement.innerHTML ;for (let i 0; i files.length; i) {const file files[i];const listItem document.createElement(li);listItem.textContent file.name;fileListElement.appendChild(listItem);const fileContent await readFile(file);console.log(fileContent);}});const writeButton document.getElementById(writeButton);writeButton.addEventListener(click, async () {const fileName document.getElementById(fileNameInput).value;const fileContent document.getElementById(fileContentInput).value;await writeFile(fileName, fileContent);});}function readFile(file) {return new Promise((resolve, reject) {const reader new FileReader();reader.onload (e) {resolve(e.target.result);};reader.onerror (e) {reject(e.target.error);};reader.readAsText(file);});}async function writeFile(fileName, fileContent) {try {await write_file(fileName, fileContent);console.log(File written successfully);} catch (error) {console.error(Error writing file:, error);}}run(); /script /body你可以使用JavaScript中的File API来实现以编程方式触发文件夹选择的行为而不是通过点击元素。 以下是一个示例代码演示如何使用JavaScript创建一个元素并通过点击标签来触发文件夹选择 body a href# idfolderLink选择文件夹/a ul idfileList/ul scriptconst folderLink document.getElementById(folderLink);const fileListElement document.getElementById(fileList);folderLink.addEventListener(click, (event) {event.preventDefault();const folderInput document.createElement(input);folderInput.type file;folderInput.webkitdirectory true;folderInput.directory true;folderInput.multiple true;folderInput.addEventListener(change, (event) {const files event.target.files;fileListElement.innerHTML ;for (let i 0; i files.length; i) {const file files[i];const listItem document.createElement(li);listItem.textContent file.name;fileListElement.appendChild(listItem);}});folderInput.click();}); /script /body当用户选择文件夹后会触发change事件我们可以在事件处理程序中获取选择的文件列表并将文件名显示在页面上。