snabbdom は diff アルゴリズムと仮想 dom の鼻のレントと見なすことができます
Vue のソース コードはスナッブドムを利用する
この言葉の翻訳はスピードと呼ばれ、
その名前はまだ点心にちなんで名付けられています. その後にドムが続きます. おそらく作者の意味を推測できます. これはおそらく、より高速なドム操作を意味します.
snabbdom の get アドレスは次のとおりです
https://github.com/snabbdom/snabbdom
ここでの紹介では
、全体的な概念についても簡単に説明しています。
ポイントは、この仮想 dom ライブラリのコア ソース コードはわずか 200 行のコードであり、コードは非常に単純化され、高度に最適化されているということです.
この 200 行のコードとその中のアルゴリズムのアイデアは、インタビュアーがよく聞きたがるものなので、熟達度は依然として非常に重要です
snabbdom は実際には TS によって記述されており、コンパイルされた JavaScript のバージョンは get では入手できません。
ここで src ディレクトリに移動して
、多くのファイルがまだ ts で終わっていることを確認してください。
しかし、これはまだ少し面倒です. 実際には、直接渡すことができます
npm i -D snabbdom
snabbdom の JavaScript バージョンへのダウンロード
get here で snabbdom のクローンを作成することはお勧めしません。これは、get のクローン バージョンがまだ TypeScript バージョンであるか、js バージョンにコンパイルする必要があるためです。
では、環境を構築しましょう.
コンピューターにフォルダーを作成して開き、
ターミナルでこのディレクトリを開き、次のように入力します
npm init
したがって、基本的な package.json 依存関係を作成し
、ターミナルに入力します
npm i -S snabbdom
インストール後
、新しくリリースされた node_modules を開いて
以下の src を開くと、
実際に Ts のソース コードが入っていることがわかります
が、実際にはビルドに js のソース コードもあります。
、そして誰もがここに気付くでしょう. .d.ts があり、これは ts が js に残した保存されたタイプのファイルです
snabbdom は dom ライブラリです. 簡単に言うとインターフェースを持っています.
任意の html タグを書くことができますが, ノード環境では実行できません.
次に、webpack と webpack-dev-server の開発環境が必要です
webpack は構築ツールです webpack-dev-server は、ポート上でプログラムを実行できるようにするためのツールです
ただし、webpack は 5 と共にインストールする必要があるという事実に誰もが注意を払う必要があります。4 をインストールすると、エクスポートを読み取ることができなくなります。
端末でそのようなコードを実行します
npm i -D webpack@5 webpack-cli@3 webpack-dev-server@3
プロジェクトのルートディレクトリに webpack.config.js を作成します.
参照コードは次のとおりです.
//通过node获取到当前文件的位置
const path = require('path')
module.exports = {
//设置当前入口文件
entry: './src/index.js',
//出口配置
output: {
//设置打包后文件的名字
filename: 'bundle.js',
//设置虚拟打包 文件并不会真正打包到项目中 而是出现在指定端口上
publicPath: 'xuni'
},
devServer: {
port: 8080,
contentBase: 'www'
}
}
ここでは、エントリを src の下の index.js ファイルとして指定しているため、まだ作成していません。
ルートディレクトリの下に src というディレクトリを作成し
、src の下に index.js というファイルを作成します
まずコンテンツが作成されます
次に、ここで contentBase を 3w ディレクトリとして指定しました
ルートディレクトリに www というフォルダを作成し
、プロジェクト内に index.html というファイルを作成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>你好!!!</h1>
</body>
</html>
比較的基本的なhtml構造のコードです
次に、プロジェクトのルート ディレクトリにある package.json を開き
、スクリプトの下にコマンドを追加します。
"serve": "webpack-dev-server"
それでは、初めてターミナルでパッケージ化して実行してみましょう
npm run serve
OK、プロジェクトが実行中です
次に、指定した 8080 ポート
http://localhost:8080/ にアクセスしようとする
と、html コードの効果が出てきます。
したがって、webpack 構成は仮想パッケージ化されているため、プロジェクトでパッケージを確認できません。
次に、 webpack.config.js 構成で
ポートを指定し、パッケージ化されたファイルのフォルダー名を xuni として指定するため、http://localhost:8080/xuni/bundle.js を介してパッケージ化されたバックエンド ファイルにアクセスできます。bundle.js と呼ばれ、自分で設定します。
次に、このパッケージ化されたファイルを www の下の index.html に導入します。
<script src="/xuni/bundle.js"></script>
次に、src の下の index.js にコードを書いてテストしましょう。
alert(123);
その後、再度ポートにアクセスする
と、このプロンプトがポップアップして成功を示し、
エントリ ファイル index.js のスクリプトを正常にパッケージ化して実行しました。
このように、環境は基本的に大丈夫です.良いニュースは、
実行したい純粋な js スクリプトが ts を必要としないため、ローダー、特に ts をインストールする必要がないことであり、
非常に便利です。
次に、
https://github.com/snabbdom/snabbdom
でこの場所を見つけ
、このコードを src エントリ ファイル index.js でテストします。
次に、コンテナの ID を持つ要素が www ディレクトリの下の index.html に追加されていることを確認します。
これは、この js コードがコンテナの ID を持つボックスを見つけるように非常に明確に記述されているためです。
次に、プロジェクト ポートにアクセスします。
このインターフェイスが表示されたら、成功を意味します。