免费一区二区三区,欧美日韩专区,自拍偷拍一区二区三区

JSX 環境搭建

JSX 在大家一般認知里面，它是屬于 React 的一部分。其實 Facebook 公司會把 JSX 定義為一種純粹的語言擴展。而這個 JSX 也是可以被其他組件體系去使用的。

甚至我們可以把它單獨作為一種，快捷創建 HTML 標簽的方式去使用。

建立項目

那么我們就從最基礎的開始，首先我們需要創建一個新的項目目錄：

mkdir jsx-component

初始化 NPM

在你們喜歡的目錄下創建這個項目文件夾。建立好文件夾之后，我們就可以進入到這個目錄里面并且初始化 npm。

npm init

執行以上命令之后，會出現一些項目配置的選項問題，如果有需要可以自行填寫。不過我們也可以直接一直按回車，然后有需要的同學可以后面自己打開 package.json 自行修改。

安裝 webpack

Wepack 很多同學應該都了解過，它可以幫助我們把一個普通的 JavaScript 文件變成一個能把不同的 import 和 require 的文件給打包到一起。

所以我們需要安裝 webpack ，當然我們也可以直接使用 npx 直接使用 webpack，也可以全局安裝 webpack-cli。

那么這里我們就使用全局安裝 webpack-cli：

npm install -g webpack webpack-cli

安裝完畢之后，我們可以通過輸入下面的一條命令來檢測一下安裝好的 webpack 版本。如果執行后沒有報錯，并且出來了一個版本號，證明我們已經安裝成功了。

webpack --version

安裝 Babel

因為 JSX 它是一個 babel 的插件，所以我們需要依次安裝 webpack，babel-loader, babel 和 babel 的 plugin。

這里使用 Babel 還有一個用處，它可以把一個新版本的 JavaScript 編譯成一個老版本的 JavaScript，這樣我們的代碼就可以在更多老版本的瀏覽器中運行。

安裝 Babel 我們只需要執行以下的命令即可。

npm install --save-dev webpack babel-loader

這里我們需要注意的是，我們需要加上 --save-dev，這樣我們就會把 babel 加入到我們的開發依賴中。

使用JSX 建立組件 Parser（解析器）開發的示例

執行完畢后，我們應該會看到上面圖中的消息。

為了驗證我們是正確安裝好了，我們可以打開我們項目目錄下的 package.json。

{
"name": "jsx-component",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-loader": "^8.1.0",
"webpack": "^5.4.0"
}
}

好，我們可以看到在 devDependencies 下方，確實是有我們剛剛安裝的兩個包。還是擔心的同學，可以再和 package.json 確認一下眼神哈。

使用JSX 建立組件 Parser（解析器）開發的示例

配置 webpack

到這里我們就需要配置一下 webpack。配置 webpack 我們需要創建一個 webpack.config.js 配置文件。

在我們項目的根目錄創建一個 webpack.config.js 文件。

首先 webpack config 它是一個 nodejs 的模塊，所以我們需要用 module.exports 來寫它的設置。而這個是早期 nodejs 工具常見的一種配置方法，它用一個 JavaScript 文件去做它的配置，這樣它在這個配置里面就可以加入一些邏輯。

module.exports = {}

Webpack 最基本的一個東西，就是需要設置一個 entry (設置它的入口文件)。這里我們就設置一個 main.js 即可。

module.exports = {
entry: "./main.js"
}

這個時候，我們就可以先在我們的根目錄下創建一個 main.js 的文件了。在里面我們先加入一個簡單的 for 循環。

// main.js 文件內容
for (let i of [1, 2, 3]) {
console.log(i);
}

這樣 webpack 的基本配置就配置好了，我們在根目錄下執行一下 webpack 來打包一下 main.js 的文件來看看。需要執行下面的這行命令進行打包：

webpack

使用JSX 建立組件 Parser（解析器）開發的示例

執行完畢之后，我們就可以在命令行界面中看到上面這樣的一段提示。

注意細節的同學，肯定要舉手問到，同學同學！你的命令行中報錯啦！黃色部分確實有給我們一個警告，但是不要緊，這個我們接下的配置會修復它的。

這個時候我們會發現，在我們的根目錄中生成了一個新的文件夾 dist。這個就是 webpack 打包默認生成的文件夾，我們所有打包好的 JavaScript 和資源都會被默認放入這個文件夾當中。

這里我們就會發現，這個 dist 文件夾里面有一個打包好的 main.js 的文件，這個就是我們寫的 main.js，通過 webpack 被打包好的版本。

然后我們打開它，就會看到它被 babel 編譯過后的 JavaScript 代碼。我們會發現我們短短的幾行代碼被加入了很多的東西，這些其實我們都不用管，那都是 Webpack 的 “喵喵力量”。

使用JSX 建立組件 Parser（解析器）開發的示例

在代碼的最后面，還是能看到我們編寫的 for 循環的，只是被改造了一下，但是它的作用是一致的。

安裝 Babel-loader

接下來我們來安裝 babel-loader，其實 babel-loader 并沒有直接依賴 babel 的，所以我們才需要另外安裝 @babel/core 和 @babel/preset-env。我們只需要執行下面的命令行來安裝：

npm install --save-dev @babel/core @babel/preset-env

使用JSX 建立組件 Parser（解析器）開發的示例

最終的結果就如上圖一樣，證明安裝成功了。這個時候我們就需要在 webpack.config.js 中配置上，讓我們打包的時候用上 babel-loader。

在我們上面配置好的 webpack.config.js 的 entry 后面添加一個選項叫做 module。

然后模塊中我們還可以加入一個 rules，這個就是我們構建的時候所使用的規則。而 rules 是一個數組類型的配置，這里面的每一個規則是由一個 test 和一個 use 組成的。

test:

test 的值是一個正則表達式，用于匹配我們需要使用這個規則的文件。這里我們需要把所有的 JavaScript 文件給匹配上，所以我們使用 /\.js/ 即可。

use: loader:

只需要加入我們的 babel-loader 的名字即可

options:

presets:

這里是 loader 的選項，這里我們需要加入 @babel/preset-env

最后我們的配置文件就會是這個樣子：

module.exports = {
entry: './main.js',
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
};

這樣配置好之后，我們就可以來跑一下 babel 來試一試會是怎么樣的。與剛才一樣，我們只需要在命令行執行 webpack 即可。

使用JSX 建立組件 Parser（解析器）開發的示例

如果我們的配置文件沒有寫錯，我們就應該會看到上面圖中的結果。

然后我們進入 dist 文件夾，打開我們編譯后的 main.js，看一下我們這次使用了 babel-loader 之后的編譯結果。

使用JSX 建立組件 Parser（解析器）開發的示例

編譯后的結果，我們會發現 for of 的循環被編譯成了一個普通的 for 循環。這個也可以證明我們的 babel-loader 起效了，正確把我們新版本的 JavaScript 語法轉成能兼容舊版瀏覽器的 JavaScript 語法。

到了這里我們已經把 JSX 所需的環境給安裝和搭建完畢了。

模式配置

最后我們還需要在 webpack.config.js 里面添加一個環境配置，不過這個是可加也可不加的，但是我們為了平時開發中的方便。

所以我們需要在 webpack.config.js 中添加一個 mode，這我們使用 development。這個配置表示我們是開發者模式。

一般來說我們在代碼倉庫里面寫的 webpack 配置都會默認加上這個 mode: 'development' 的配置。當我們真正發布的時候，我們就會把它改成 mode: 'production'。

module.exports = {
entry: './main.js',
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
};

改好之后，我們在使用 webpack 編譯一下，看看我們的 main.js 有什么區別。

使用JSX 建立組件 Parser（解析器）開發的示例

顯然我們發現，編譯后的代碼沒有被壓縮成一行了。這樣我們就可以調試 webpack 生成的代碼了。這里我們可以注意到，我們在 main.js 中的代碼被轉成字符串，并且被放入一個 eval() 的函數里面。那么我們就可以在調試的時候把它作為一個單獨的文件去使用了，并且可以進行斷點調試。

引入 JSX

萬事俱備，只欠東風了，最后我們需要如何引入 JSX呢？在引入之前，我們來看看，如果就使用現在的配置在我們的 main.js 里面使用 JSX 語法會怎么樣。作為程序員的我們，總得有點冒險精神！

使用JSX 建立組件 Parser（解析器）開發的示例

所以我們在 main.js 里面加入這段代碼：

var a = <div/>

然后大膽地執行 webpack 看看！

使用JSX 建立組件 Parser（解析器）開發的示例

好家伙！果然報錯了。這里的報錯告訴我們，在 = 后面不能使用 “小于號”，但是在正常的 JSX 語法中，這個其實是 HTML 標簽的 “尖括號”，因為沒有 JSX 語法的編譯過程，所以 JavaScript 默認就會認為這個就是 “小于號”。

所以我們要怎么做讓我們的 webpack 編譯過程支持 JSX 語法呢？這里其實就是還需要我們加入一個最關鍵的一個包，而這個包名非常的長，叫做 @babel/plugin-transform-react-jsx。執行以下命令來安裝它：

npm install --save-dev @babel/plugin-transform-react-jsx

安裝好之后，我們還需要在 webpack 配置中給他加入進去。我們需要在 module 里面的 rules 里面的 use 里面加入一個 plugins 的配置，然后在其中加入 ['@babel/plugin-transform-react-jsx']。

然后最終我們的 webpack 配置文件就是這樣的：

module.exports = {
entry: './main.js',
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-react-jsx'],
},
},
},
],
},
};

配置好之后，我們再去執行一下 webpack。這時候我們發現沒有再報錯了。這樣也就證明我們的代碼現在是支持使用 JSX 語法了。

最后我們來圍觀一下，最后編程的效果是怎么樣的。

使用JSX 建立組件 Parser（解析器）開發的示例

我們會發現，在 eval 里面我們加入的 <div/> 被翻譯成一個 React.createElement("div", null) 的函數調用了。

所以接下來我們就一起來看一下，我們應該怎么實現這個 React.createElement，以及我們能否把這個換成我們自己的函數名字。

JSX 基本用法

首先我們來嘗試理解 JSX，JSX 其實它相當于一個純粹在代碼語法上的一種快捷方式。在上一部分的結尾我們看到，JSX語法在被編譯后會出現一個 React.createElement 的調用。

JSX 基礎原理

那么這里我們就先修改在 webpack 中的 JSX 插件，給它一個自定義的創建元素函數名。我們打開 webpack.config.js，在 plugins 的位置，我們把它修改一下。

module.exports = {
entry: './main.js',
mode: 'development',
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [
[
'@babel/plugin-transform-react-jsx',
{ pragma: 'createElement' }
]
],
},
},
},
],
},
};

上面我們只是把原來的 ['@babel/plugin-transform-react-jsx'] 參數改為了 [['@babel/plugin-transform-react-jsx', {pragma: 'createElement'}]]。加入了這個 pragma 參數，我們就可以自定義我們創建元素的函數名。

這么一改，我們的 JSX 就與 React 的框架沒有任何聯系了。我們執行一下 webpack 看一下最終生成的效果，就會發現里面的 React.createElement 就會變成 createElement。

使用JSX 建立組件 Parser（解析器）開發的示例

接下來我們加入一個 HTML 文件來執行我們的 main.js 試試。首先在根目錄創建一個 main.html，然后輸入一下代碼：

<script src="./main.js"></script>

然后我們執行在瀏覽器打開這個 HTML 文件。

使用JSX 建立組件 Parser（解析器）開發的示例

這個時候我們控制臺會給我們拋出一個錯誤，我們的 createElement 未定義。確實我們在 main.js 里面還沒有定義這個函數，所以說它找不到。

所以我們就需要自己編寫一個 createElement 這個函數。我們直接打開根目錄下的 main.js 并且把之前的 for 循環給刪除了，然后加上這段代碼：

function createElement() {
return;
}
let a = <div />;

這里我們就直接返回空，先讓這個函數可以被調用即可。我們用 webpack 重新編譯一次，然后刷新我們的 main.html 頁面。這個時候我們就會發現報錯沒有了，可以正常運行。

實現 createElement 函數

使用JSX 建立組件 Parser（解析器）開發的示例

在我們的編譯后的代碼中，我們可以看到 JSX 的元素在調用 createElement 的時候是傳了兩個參數的。第一個參數是 div，第二個是一個 null。

這里第二個參數為什么是 null 呢？其實第二個參數是用來傳屬性列表的。如果我們在 main.js 里面的 div 中加入一個 id="a" ，我們來看看最后編譯出來會有什么變化。

使用JSX 建立組件 Parser（解析器）開發的示例

我們就會發現第二個參數變成了一個以 Key-Value 的方式存儲的JavaScript 對象。到這里如果我們想一下，其實 JSX 也沒有那么神秘，它只是把我們平時寫的 HTML 通過編譯改寫成了 JavaScript 對象，我們可以認為它是屬于一種 “[[語法糖]]”。

但是 JSX 影響了代碼的結構，所以我們一般也不會完全把它叫作語法糖。

接下來我們來寫一些更復雜一些的 JSX，我們給原本的 div 加一些 children 元素。

function createElement() {
return;
}
let a = (
<div id="a">
<span></span>
<span></span>
<span></span>
</div>
);

最后我們執行以下 webpack 打包看看效果。

使用JSX 建立組件 Parser（解析器）開發的示例

在控制臺中，我們可以看到最后編譯出來的結果，是遞歸的調用了 createElement 這個函數。這里其實已經形成了一個樹形的結構。

父級就是第一層的 div 的元素，然后子級就是在后面當參數傳入了第一個 createElement 函數之中。然后因為我們的 span 都是沒有屬性的，所以所有后面的 createElement 的第二個參數都是 null。

根據我們這里看到的一個編譯結果，我們就可以分析出我們的 createElement 函數應有的參數都是什么了。

第一個參數 type —— 就是這個標簽的類型
第二個參數 attribute —— 標簽內的所有屬性與值
剩余的參數都是子屬性 ...children —— 這里我們使用了 JavaScript 之中比較新的語法 ...children 表示把后面所有的參數 (不定個數) 都會變成一個數組賦予給 children 變量

那么我們 createElement 這個函數就可以寫成這樣了：

function createElement(type, attributes, ...children) {
return;
}

函數我們有了，但是這個函數可以做什么呢？其實這個函數可以用來做任何事情，因為這個看起來長的像 DOM API，所以我們完全可以把它做成一個跟 React 沒有關系的實體 DOM。

比如說我們就可以在這個函數中返回這個 type 類型的 element 元素。這里我們把所有傳進來的 attributes 給這個元素加上，并且我們可以給這個元素掛上它的子元素。

創建元素我們可以用 createElement(type)，而加入屬性我們可以使用 setAttribute()，最后掛上子元素就可以使用 appendChild()。

function createElement(type, attributes, ...children) {
// 創建元素
let element = document.createElement(type);
// 掛上屬性
for (let attribute in attributes) {
element.setAttribute(attribute);
}
// 掛上所有子元素
for (let child of children) {
element.appendChild(child);
}
// 最后我們的 element 就是一個節點
// 所以我們可以直接返回
return element;
}

這里我們就實現了 createElement 函數的邏輯。最后我們還需要在頁面上掛載上我們的 DOM 節點。所以我們可以直接掛載在 body 上面。

// 在 main.js 最后加上這段代碼
let a = (
<div id="a">
<span></span>
<span></span>
<span></span>
</div>
);
document.body.appendChild(a);

這里還需要注意的是，我們的 main.html 中沒有加入 body 標簽，沒有 body 元素的話我們是無法掛載到 body 之上的。所以這里我們就需要在 main.html 當中加入 body 元素。

<body></body>
<script src="dist/main.js"></script>

好，這個時候我們就可以 webpack 打包，看一下效果。

使用JSX 建立組件 Parser（解析器）開發的示例

Wonderful! 我們成功的把節點生成并且掛載到 body 之上了。但是如果我們的 div 里面加入一段文字，這個時候就會有一個文本節點被傳入我們的 createElement 函數當中。毋庸置疑，我們的 createElement 函數以目前的邏輯是肯定無法處理文本節點的。

接下來我們就把處理文本節點的邏輯加上，但是在這之前我們先把 div 里面的 span 標簽刪除，換成一段文本 “hello world”。

let a = <div id="a">hello world</div>;

在我們還沒有加入文本節點的邏輯之前，我們先來 webpack 打包一下，看看具體會報什么錯誤。

使用JSX 建立組件 Parser（解析器）開發的示例

首先我們可以看到，在 createElement 函數調用的地方，我們的文本被當成字符串傳入，然后這個參數是接收子節點的，并且在我們的邏輯之中我們使用了 appendChild，這個函數是接收 DOM 節點的。顯然我們的文本字符串不是一個節點，自然就會報錯。

通過這種調試方式我們可以馬上定位到，我們需要在哪里添加邏輯去實現這個功能。這種方式也可以算是一種捷徑吧。

所以接下來我們就回到 main.js，在我們掛上子節點之前，判斷以下 child 的類型，如果它的類型是 “String” 字符串的話，就使用 createTextNode() 來創建一個文本節點，然后再掛載到父元素上。這樣我們就完成了字符節點的處理了。

function createElement(type, attributes, ...children) {
// 創建元素
let element = document.createElement(type);
// 掛上屬性
for (let name in attributes) {
element.setAttribute(name, attributes[name]);
}
// 掛上所有子元素
for (let child of children) {
if (typeof child === 'string')
child = document.createTextNode(child);
element.appendChild(child);
}
// 最后我們的 element 就是一個節點
// 所以我們可以直接返回
return element;
}
let a = <div id="a">hello world</div>;
document.body.appendChild(a);

我們用這個最新的代碼 webpack 打包之后，就可以在瀏覽器上看到我們的文字被顯示出來了。

到了這里我們編寫的 createElement 已經是一個比較有用的東西了，我們已經可以用它來做一定的 DOM 操作。甚至它可以完全代替我們自己去寫 document.createElement 的這種反復繁瑣的操作了。

這里我們可以驗證以下，我們在 div 當中重新加上我們之前的三個 span，并且在每個 span 中加入文本。11

let a = (
<div id="a">
hello world：
<span>a</span>
<span>b</span>
<span>c</span>
</div>
);

然后我們重新 webpack 打包后，就可以看到確實是可以完整這種 DOM 的操作的。

使用JSX 建立組件 Parser（解析器）開發的示例

現在的代碼已經可以完成一定的組件化的基礎能力。

實現自定義標簽

之前我們都是在用一些，HTML 自帶的標簽。如果我們現在把 div 中的 d 改為大寫 D 會怎么樣呢？

let a = (
<Div id="a">
hello world：
<span>a</span>
<span>b</span>
<span>c</span>
</Div>
);

使用JSX 建立組件 Parser（解析器）開發的示例

果不其然，就是會報錯的。不過我們找到了問題根源的關鍵，這里我們發現當我們把 div 改為 Div 的時候，傳入我們 createElement 的 div 從字符串 ‘div' 變成了一個 Div 類。

當然我們的 JavaScript 中并沒有定義 Div 類，這里自然就會報 Div 未定義的錯誤。知道問題的所在，我們就可以去解決它，首先我們需要先解決未定義的問題，所以我們先建立一個 Div 的類。

// 在 createElment 函數之后加入
class Div {}

然后我們就需要在 createElement 里面做類型判斷，如果我們遇到的 type 是字符類型，就按原來的方式處理。如果我們遇到是其他情況，我們就實例化傳過來的 type。

function createElement(type, attributes, ...children) {
// 創建元素
let element;
if (typeof type === 'string') {
element = document.createElement(type);
} else {
element = new type();
}
// 掛上屬性
for (let name in attributes) {
element.setAttribute(name, attributes[name]);
}
// 掛上所有子元素
for (let child of children) {
if (typeof child === 'string') child = document.createTextNode(child);
element.appendChild(child);
}
// 最后我們的 element 就是一個節點
// 所以我們可以直接返回
return element;
}

這里我們還有一個問題，我們有什么辦法可以讓自定義標簽像我們普通 HTML 標簽一樣操作呢？在最新版的 DOM 標準里面是有辦法的，我們只需要去注冊一下我們自定義標簽的名稱和類型。

但是我們現行比較安全的瀏覽版本里面，還是不太建議這樣去做的。所以在使用我們的自定義 element 的時候，還是建議我們自己去寫一個接口。

首先我們是需要建立標簽類，這個類能讓任何標簽像我們之前普通 HTML 標簽的元素一樣最后掛載到我們的 DOM 樹上。

它會包含以下方法：

mountTo() —— 創建一個元素節點，用于后面掛載到 parent 父級節點上
setAttribute() —— 給元素掛上所有它的屬性
appendChild() —— 給元素掛上所有它的子元素

首先我們來簡單實現以下我們 Div 類中的 mountTo 方法，這里我們還需要給他加入 setAttribute 和 appendChild 方法，因為在我們的 createElement 中有掛載屬性子元素的邏輯，如果沒有這兩個方法就會報錯。但是這個時候我們先不去實現這兩個方法的邏輯，方法內容留空即可。

class Div {
setAttribute() {}
appendChild() {}
mountTo(parent) {
this.root = document.createElement('div');
parent.appendChild(this.root);
}
}

這里面其實很簡單首先給類中的 root 屬性創建成一個 div 元素節點，然后把這個節點掛載到這個元素的父級。這個 parent 是以參數傳入進來的。

然后我們就可以把我們原來的 body.appendChild 的代碼改為使用 mountTo 方法來掛載我們的自定義元素類。

// document.body.appendChild(a);
a.mountTo(document.body);

用現在的代碼，我們 webpack 打包看一下效果：

使用JSX 建立組件 Parser（解析器）開發的示例

我們可以看到我們的 Div 自定義元素是有正確的被掛載到 body 之上。但是 Div 中的 span 標簽都是沒有被掛載上去的。如果我們想它與普通的 div 一樣去工作的話，我們就需要去實現我們的 setAttribute 和 appendChild 邏輯。

接下來我們就一起來嘗試完成剩余的實現邏輯。在開始寫 setAttribute 和 appendChild 之前，我們需要先給我們的 Div 類加入一個構造函數 constructor。在這里個里面我們就可以把元素創建好，并且代理到 root 上。

constructor() {
this.root = document.createElement('div');
}

然后的 setAttribute 方法其實也很簡單，就是直接使用 this.root 然后調用 DOM API 中的 setAttribute 就可以了。而 appendChild 也是同理。最后我們的代碼就是如下：

class Div {
// 構造函數
// 創建 DOM 節點
constructor() {
this.root = document.createElement('div');
}
// 掛載元素的屬性
setAttribute(name, attribute) {
this.root.setAttribute(name, attribute);
}
// 掛載元素子元素
appendChild(child) {
this.root.appendChild(child);
}
// 掛載當前元素
mountTo(parent) {
parent.appendChild(this.root);
}
}

我們 webpack 打包一下看看效果：

使用JSX 建立組件 Parser（解析器）開發的示例

我們可以看到，div 和 span 都被成功掛載到 body 上。也證明我們自制的 div 也能正常工作了。

這里還有一個問題，因為我們最后調用的是 a.mountTo()，如果我們的變量 a 不是一個自定義的元素，而是我們普通的 HTML 元素，這個時候他們身上是不會有 mountTo 這個方法的。

所以這里我們還需要給普通的元素加上一個 Wrapper 類，讓他們可以保持我們元素類的標準格式。也是所謂的標準接口。

我們先寫一個 ElementWrapper 類，這個類的內容其實與我們的 Div 是基本一致的。唯有兩個區別

在創建 DOM 節點的時候，可以通過傳當前元素名 type 到我們的構造函數，并且用這個 type 去建立我們的 DOM 節點
appendChild 就不能直接使用 this.root.appendChild，因為所有普通的標簽都被改為我們的自定義類，所以 appendChild 的邏輯需要改為 child.mountTo(this.root)

class ElementWrapper {
// 構造函數
// 創建 DOM 節點
constructor(type) {
this.root = document.createElement(type);
}
// 掛載元素的屬性
setAttribute(name, attribute) {
this.root.setAttribute(name, attribute);
}
// 掛載元素子元素
appendChild(child) {
child.mountTo(this.root);
}
// 掛載當前元素
mountTo(parent) {
parent.appendChild(this.root);
}
}
class Div {
// 構造函數
// 創建 DOM 節點
constructor() {
this.root = document.createElement('div');
}
// 掛載元素的屬性
setAttribute(name, attribute) {
this.root.setAttribute(name, attribute);
}
// 掛載元素子元素
appendChild(child) {
child.mountTo(this.root);
}
// 掛載當前元素
mountTo(parent) {
parent.appendChild(this.root);
}
}

這里我們還有一個問題，就是遇到文本節點的時候，是沒有轉換成我們的自定義類的。所以我們還需要寫一個給文本節點，叫做 TextWrapper。

class TextWrapper {
// 構造函數
// 創建 DOM 節點
constructor(content) {
this.root = document.createTextNode(content);
}
// 掛載元素的屬性
setAttribute(name, attribute) {
this.root.setAttribute(name, attribute);
}
// 掛載元素子元素
appendChild(child) {
child.mountTo(this.root);
}
// 掛載當前元素
mountTo(parent) {
parent.appendChild(this.root);
}
}

有了這些元素類接口后，我們就可以改寫我們 createElement 里面的邏輯。把我們原本的 document.createElement 和 document.createTextNode 都替換成實例化 new ElementWrapper(type) 和 new TextWrapper(content)即可。