上記は、Vue のソース コードを調べています: 口ひげテンプレート エンジン (9) 単一レイヤーの no-like 結果トークンを DOM 文字列に変換します。トークンを文字列に変換するビジネス ロジックを単純に処理しましたが、最も安価
な中括弧
のみを処理しました。プロジェクトを
開いて、www のindex.html コードを以前のものに戻しましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src = "/xuni/bundle.js"></script>
<script>
let templateStr = `
<div>
{
{#students}}
<ul>
<li>{
{ item.name }}</li>
{
{#item.list}}
<li>{
{ . }}</li>
{
{/item.list}}
</ul>
{
{/students}}
</div>
`;
let data = {
name: "小猫猫",
age: 2,
students: [
{
id: 0,
name: "小明",
list: [
"篮球",
"唱",
"跳"
]
},
{
id: 1,
name: "小红",
list: [
"电子游戏",
"计算机编程"
]
}
]
}
GrManagData.render(templateStr,data);
</script>
</body>
</html>
このループの入れ子構造を扱ってみましょう
そしてプロジェクトを実行してみると、# 記号に問題があることがわかり、これは処理できません。
ここでは明らかに並列構造では処理できず、再帰が必要です。
まず、次のことが考えられます。非常に単純なアイデアです。番号記号を付けずに
renderTemplate を呼び出します。この renderTemplate を再帰的に呼び出すことはできないでしょうか?
アイデアはとてもシンプルですか?
しかし、再帰を書く前に、まず問題を解決する必要があります
たとえば、www の下のindex.html を
次のように変更しました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src = "/xuni/bundle.js"></script>
<script>
let templateStr = `
<div>
我超喜欢我家的{
{name}}，我家{
{name}}也超喜欢我，它今年{
{a.b.c}}岁啦
</div>
`;
let data = {
name: "小猫猫",
a: {
b: {
c: 2
}
}
}
GrManagData.render(templateStr,data);
</script>
</body>
</html>
このように、データ内のaオブジェクト配下のbオブジェクト配下のcオブジェクトを使用して
プロジェクトを実行したところ、
点を認識できずに直接未定義になってしまいました
。
実際、abc によって生成された名前を確認するには、このファイルを印刷することができます。
ここでは、console.log を使用して、その内容を確認します。
そうです、ここで得られたものは確かに abc です
が、現在の文法は次と同等です。
data["a.b.c"]
ここで、js の括弧は直接添字のみをサポートしています。彼は私たちの要点の文法を知らないので、それを見つけるのを手伝ってくれません。したがって、ここに問題があります。実際に、最初に src の下に lookup.js を作成
し
ましょう
。
このようなコード
/*
可以在data中，用连续点符号的形式找到对应键值
*/
export default function lookup(data,keyName) {
}
まず関数を公開します。
この関数には 2 つのパラメータが必要です。1 つ目は合計データです。それを探している場合は、合計データを指定する必要があります。
次に、2 番目のパラメータはフィールド名で、たとえば、
この関数を作成すると、abc はオブジェクトのオブジェクトのオブジェクトを取得できます。
ルックアップの内容をこれに変更します
/*
可以在data中，用连续点符号的形式找到对应键值
*/
export default function lookup(data,keyName) {
//判断keyName字符串中是否有 . 符号
if(keyName.indexOf(".") > 0) {
//将keyName按点拆分成数组
var names = keyName.split('.');
//存一个 指向 data 的临时变量
let temp = data;
//循环遍历 用点拆分开的数组names
for(let i = 0;i < names.length;i++) {
// 一层一层寻找对应字段
temp = temp[names[i]];
}
//将得到的结果返回
return temp;
}
//没有 点符号 就直接将data中的keyName字段返回就ok了
return data[keyName]
}
入ってくると、まず keyName にドット記号があるかどうかを判断し、
入ってきた場合は、文字列分割の分割を使用して配列に分割し、次に
ゼロ時間変数を使用してデータを格納します。
ドット記号で分割した配列をループします。すると、内容は当然 ["a", "b", "c"] となり、ループが行われると内容は abc になり、最初の temp の
値
はデータを指します。最初の添字は a で、 2 回目はデータの下で a を検索します。Temp は現在、データの下で a で、2 番目の添字は b です。これは、3 回目
の a の下で b を検索することです。
b で確立されます。c を見つけるのは
非常に簡単で、最終的に処理されて temp に返されます。
ドット記号がなく、if が入力されない場合は、data の下の keyName 値を直接見つける方が簡単です。
次に、
src の下の renderTemplate.js コードを変更します。
ここではプロジェクトを実行するためにルックアップを導入し、使用します。
データを表示して読み取ることができます。
