建站
咨詢
售后
建站咨詢
新聞中心
前言
周末逛github的時(shí)候，發(fā)現(xiàn)我們只需要在github域名上加上1s他就能夠打開(kāi)一個(gè)vscode窗口來(lái)閱讀代碼，比起在github倉(cāng)庫(kù)中查看更加方便
目前成都創(chuàng)新互聯(lián)公司已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、松滋網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
圖片
然后我就想網(wǎng)頁(yè)端vscode能不能打開(kāi)我本地的項(xiàng)目呢，帶著這個(gè)疑惑我打開(kāi)了網(wǎng)頁(yè)版vscode，它居然真的可以打開(kāi)我本地的項(xiàng)目代碼!
圖片
難道又出了新的API讓前端的能力更進(jìn)一步了？打開(kāi)MDN查了一下相關(guān)文檔，發(fā)現(xiàn)了幾個(gè)新的API
showOpenFilePicker
用來(lái)選擇文件
圖片
語(yǔ)法
showOpenFilePicker()參數(shù)
- 「options」：（可選）包含以下屬性
multiple：布爾值，默認(rèn)為false。為true表示允許用戶選擇多個(gè)文件
excludeAcceptAllOption：布爾值，默認(rèn)為false。默認(rèn)情況下，文件選擇器帶有一個(gè)允許用戶選擇所有類型文件的過(guò)濾選項(xiàng)（展開(kāi)于文件類型選項(xiàng)中）。設(shè)置此選項(xiàng)為 true 以使該過(guò)濾選項(xiàng)不可用。
types：表示允許選擇的文件類型的數(shù)組
返回值
返回一個(gè)promise對(duì)象，會(huì)兌現(xiàn)一個(gè)包含 FileSystemFileHandle 對(duì)象的 Array 數(shù)組。
體驗(yàn)
打開(kāi)文件
默認(rèn)只能打開(kāi)一個(gè)文件，可以傳入multiple:true打開(kāi)多個(gè)文件
圖片
showDirectoryPicker
用來(lái)選擇目錄
圖片
語(yǔ)法
屬于瀏覽器全局方法，直接調(diào)用即可
showDirectoryPicker()參數(shù)
- 「options」：（可選）包含以下屬性
multiple：布爾值，默認(rèn)為false。為true表示允許用戶選擇多個(gè)文件
excludeAcceptAllOption：布爾值，默認(rèn)為false。默認(rèn)情況下，文件選擇器帶有一個(gè)允許用戶選擇所有類型文件的過(guò)濾選項(xiàng)（展開(kāi)于文件類型選項(xiàng)中）。設(shè)置此選項(xiàng)為 true 以使該過(guò)濾選項(xiàng)不可用。
types：表示允許選擇的文件類型的數(shù)組
返回值
返回一個(gè)promise對(duì)象，會(huì)兌現(xiàn)一個(gè)包含 FileSystemFileHandle 對(duì)象的 Array 數(shù)組。
體驗(yàn)
打開(kāi)文件
打開(kāi)文件夾
圖片
擴(kuò)展
FileSystemFileHandle
FileSystemFileHandle提供了一些方法可以用來(lái)獲取和操作文件
- getFile：返回一個(gè)Promise對(duì)象，用于獲取文件；
- createSyncAccessHandle：返回一個(gè)FileSystemSyncAccessHandle對(duì)象，用于同步訪問(wèn)文件；
- createWritable：返回一個(gè)Promise對(duì)象，用于創(chuàng)建一個(gè)可寫流，用于寫入文件；
FileSystemDirectoryHandle
FileSystemDirectoryHandle對(duì)象是一個(gè)代表文件系統(tǒng)中的目錄的對(duì)象，它同樣提供了方法來(lái)獲取和操作目錄
- entries：返回一個(gè)AsyncIterable對(duì)象，用于獲取目錄中的所有文件和目錄；
- keys：返回一個(gè)AsyncIterable對(duì)象，用于獲取目錄中的所有文件和目錄的名稱；
- values：返回一個(gè)AsyncIterable對(duì)象，用于獲取目錄中的所有文件和目錄的FileSystemHandle對(duì)象；
- getFileHandle：返回一個(gè)Promise對(duì)象，用于獲取目錄中的文件；
- getDirectoryHandle：返回一個(gè)Promise對(duì)象，用于獲取目錄中的目錄；
- removeEntry：返回一個(gè)Promise對(duì)象，用于刪除目錄中的文件或目錄；
- resolve：返回一個(gè)Promise對(duì)象，用于獲取目錄中的文件或目錄；
entries、keys、values這三個(gè)方法都是用來(lái)獲取目錄中的所有文件和目錄的，它們返回的都是一個(gè)AsyncIterable對(duì)象，我們可以通過(guò)for await...of語(yǔ)法來(lái)遍歷它。
開(kāi)發(fā)編輯器
了解完這些知識(shí)點(diǎn)，我們就可以來(lái)開(kāi)發(fā)一個(gè)簡(jiǎn)陋網(wǎng)頁(yè)版編輯器了，初期只包含打開(kāi)文件、打開(kāi)文件夾、查看文件、切換文件
編輯器大概長(zhǎng)這樣：
圖片
打開(kāi)文件夾
const openDir = async () => {
const res = await window.showDirectoryPicker({});
const detalAction = async (obj: any) => {
if (obj.entries) {
const dirs = obj.entries();
for await (const entry of dirs) {
if (entry[1].entries) {
// 文件夾，遞歸處理
detalAction(entry[1]);
} else {
// 文件
fileList.value.push({
name: entry[0],
path: obj.name,
fileHandle: entry[1],
});
}
}
}
};
await detalAction(res);
showCode(fileList.value[0], 0);
console.log("--fileList--", fileList);
};這里主要是遞歸處理文件夾，返回一個(gè)文件列表
讀取文件內(nèi)容
const showCode = async (item: any, index: number) => {
const file = await item.fileHandle.getFile();
const text = await file.text();
codeText.value = text;
currentIndex.value = index;
};展示文件內(nèi)容
使用highlight.js來(lái)高亮展示代碼
{{ codeText }}
最終效果如下：
圖片
想不到吧，這種功能現(xiàn)在純前端就能夠?qū)崿F(xiàn)了，當(dāng)然還可以做的更復(fù)雜一點(diǎn)，包括修改保存等功能，保存可以使用showSaveFilePickerAPI，它可以寫入文件，同樣是返回一個(gè)promise。感興趣的可以試著完善編輯器的功能。
當(dāng)前標(biāo)題：純前端也可以訪問(wèn)文件系統(tǒng)！
網(wǎng)頁(yè)URL：http://www.5511xx.com/article/cdgihjh.html
