瀏覽器中的javascript的組成部分

 

 

瀏覽器中的javascript的執行環境

 

 

總結：V8引擎負責解析和執行js程式碼 內建API是由執行環境提供的特殊介面，只能在所述的執行環境中被呼叫。   node.js是一個後端執行環境，js可以在node中進行後端開發。  

Node.js簡介

一個基於谷歌V8引擎的js執行環境

 

 

注意：

1. 瀏覽器是js的前端執行環境
2. Node.js是js的後端執行環境
3. Node.js中無法呼叫DOM和BOM等瀏覽器內建API  

Node.js的作用 提供一些基礎的功能和API 基於Express框架，可以快速構建web應用 基於Electron框架，可以構建跨平臺的桌面應該 基於restify框架，可以快速構建API介面專案 讀寫和操作資料庫、建立使用的命令列工具輔助前端開發等   安裝Node.js之後，在終端輸入node -v檢視版本號

fs檔案系統模組

讀取指定檔案中的內容

建立兩個js檔案

 

然後在test.js中寫入測試內容 在上一個js檔案中寫入如下

//1.匯入fs模組 來操作
const fs = require('fs');
//2.呼叫fs.readfile()方法讀取檔案
fs.readFile("test.js", 'utf-8', function (err, datastr) {
    //2.1列印失敗
    console.log(err);
    console.log("--------");
    //3.列印成功程式碼
    console.log(datastr);
})

之後在終端上進行測試

shuchenhao@shuchenhaodeMacBook-Air Node % node 使用readfile方法讀取.js  null -------- console.log("hello node.js sss");  

當讀取不到檔案時

shuchenhao@shuchenhaodeMacBook-Air Node % node 使用readfile方法讀取.js [Error: ENOENT: no such file or directory, open 't.js'] {   errno: -2,   code: 'ENOENT',   syscall: 'open',   path: 't.js' } -------- undefined  

判斷err物件是否為null，從而判斷檔案是否讀取成功

 

const fs = require('fs');
fs.readFile('1.js', 'utf-8', function
 
 (err, datastr) {
    if (err) {
        return console.log('讀取檔案失敗' + err.message);
    }
    console.log('讀取檔案成功' + datastr);
})

終端測試

shuchenhao@shuchenhaodeMacBook-Air Node % node 判斷檔案是否讀取成功.js  讀取檔案成功console.log("hello node.js sss"); shuchenhao@shuchenhaodeMacBook-Air Node % node 判斷檔案是否讀取成功.js 讀取檔案失敗ENOENT: no such file or directory, open '1.js'  

寫入內容

 

//1.匯入fs檔案系統模組
const fs = require('fs');
//2.寫入內容
fs.writeFile('testwrite.js', '測試寫入情況', function (err) {
    console.log(err);

})

如果寫入成功，則輸出err=null 如果寫入失敗，則輸出err等於物件 終端測試結果 shuchenhao@shuchenhaodeMacBook-Air Node % node 檔案寫入內容.js null   輸出檔案

 

判斷是否寫入成功

//1.匯入fs檔案系統模組
const fs = require('fs');
//2.寫入內容
fs.writeFile('testwrite.js', '測試寫入情況', function (err) {
    if (err) {
        return console.log("檔案寫入失敗" + err.message);
    }
    console.log("檔案寫入成功");

})

終端測試結果 shuchenhao@shuchenhaodeMacBook-Air Node % node 檔案寫入內容.js  檔案寫入成功   練習：考試成績管理 核心實現步驟

1. 匯入需要的fs檔案系統模組
2. 使用讀取檔案方法，讀取素材目錄下的成績.txt
3. 判斷改檔案是否讀取成功
4. 檔案讀取成功之後，處理成績資料
5. 將處理完程度額成績資料，呼叫寫入方法，寫入到新檔案中

//1.匯入fs
const fs = require('fs');
//2.呼叫讀取
fs.readFile('grade.txt', 'utf-8', function (err, datastr) {
    //3.判斷
    if (err) {
        return console.log('讀取失敗' + err.message);
    }
    // console.log('讀取成功' + datastr);

    //(1)先把成績資料，按照空格進行分割
    const arrold = datastr.split(' ');
    //（2）迴圈分割後的陣列，對每一項資料進行字串替換操作
    const arrnew = [];
    arrold.forEach(item => {
        arrnew.push(item.replace('=', ':'))
    })
    //（3）把新陣列中的每一項，進行合併，得到哦一個新陣列
    const newstr = arrnew.join('\r\n');
    console.log(newstr);
    //5.寫入
    fs.writeFile('grade-new.txt', newstr, function (err) {
        if (err) {
            return console.log('寫入失敗' + err.message);
        }
        console.log('寫入成功');
    })
})

測試結果 shuchenhao@shuchenhaodeMacBook-Air Node % node 整理成績.js 小紅:88 小明:99 小花:98 小剛:97 小劉:96 寫入成功  

 路徑動態拼接的問題

在使用fs模組操作檔案時，如果提供的操作路徑以./或../開頭的相對路徑時，很容易出現路徑動態拼接 錯誤的問題。 原因：程式碼在執行的時候，會以執行node命令時所處的目錄，動態拼接出被操作檔案的完整路徑 解決方案：解決路徑拼接錯誤問題，可以直接提供以一個完整的存放路徑

const fs = require('fs');
fs.readFile(__dirname + "/test.js", 'utf-8', function (err, datastr) {
    if (err) {
        return console.log('讀取失敗' + err.message);
    }
    console.log('讀取成功' + datastr);
})

path路徑模組

用來處理路徑模組 1.路徑拼接

//注意：  ../會抵消前面的路徑
const pathstr = path.join('/a', '/b/c', '../../', './d', 'e');
console.log(pathstr);
//測試
fs.readFile(path.join(__dirname, '/test.js'), 'utf-8', function (err, datastr) {
    if (err) {
        return console.log(err.message);
    }
    console.log(datastr);
})

2.獲取路徑中的檔名

//定義檔案的存放路徑
const fpath = '/a/b/c/index.html';
const fullname = path.basename(fpath);
console.log(fullname);
//不希望拿到副檔名
const namewithoutext = path.basename(fpath, '.html')
console.log(namewithoutext);

3.獲取路徑中的副檔名

const fpath = '/a/b/c/index.html';
const fext = path.extname(fpath);
console.log(fext);

案例：將一個index檔案中的style標籤和script標籤拆分為單獨檔案，然後連結引入

//匯入fs模組，path模組
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 + '/index.html'), 'utf-8', function (err, datastr) {
    if (err) {
        return console.log('讀取檔案失敗' + err.message);
    }
    // console.log('讀取檔案成功');//呼叫第三方方法，拆解出css,js,html
    resolveCSS(datastr);
    resolveJS(datastr);
    resolveHTML(datastr);


});
function resolveCSS(htmlstr) {
    const r1 = regstyle.exec(htmlstr);
    const newCSS = r1[0].replace('<style>', '').replace('</style>', '');
    fs.writeFile(path.join(__dirname + '/anli/index.css'), newCSS, function (err) {
        if (err) {
            return console.log('寫入失敗' + err.message);
        }
        console.log('寫入成功');
    })

}
function resolveJS(htmlstr) {
    const r2 = regscript.exec(htmlstr);
    const newJS = r2[0].replace('<script>', '').replace('</script>', '');
    fs.writeFile(path.join(__dirname + '/anli/index.js'), newJS, function (err) {
        if (err) {
            return console.log('寫入失敗' + err.message);
        }
        console.log('寫入成功');
    })
};
function resolveHTML(htmlstr) {
    const newHTML = htmlstr.replace(regstyle, '<link rel="stylesheet" href = "/anli/index.css" /> ').replace(regscript, '<script src="/anli/index.js"></script>');
    fs.writeFile(path.join(__dirname + '/anli/index.html'), newHTML, function (err) {
        if (err) {
            return console.log('寫入失敗' + err.message);
        }
        console.log('寫入成功');

    })
};

注意點：

• fs.writeFile()方法只能用來建立檔案，不能用來建立路徑
• 重複呼叫fs.writeFile()寫入用一個檔案，新寫入的內容會覆蓋之前的內容