xmlplus 是一個JavaScript框架，用於快速開發前後端專案。這篇文章主要介紹了xmlplus元件設計系列之tree，具有一定的參考價值，有興趣的小夥伴們可以參考一下
樹形元件是一種具有層級結構的元件，廣泛應用於各種場景。本章會實作一個簡單的樹形元件，儘管功能有限，但你可以透過擴展它來實現自己所需的樹形元件。
資料來源
字型元件的資料來源可以是JSON 格式的資料對象，也可以是具有XML 結構的資料或其它的具有層級結構的資料。本章將採用具有以下 JSON 格式的資料物件。
var data = {
name: 'My Tree',
children: [
{ name: 'hello' },
{ name: 'world' },
{
name: 'child folder',
children: [
{ name: 'alice' }
]
}
]
};上述資料來源中，name 值會以樹結點的名稱顯示，含 children 的陣列代表節點的子層級。
遞歸結構的設計
由HTML 中的列表元素ul 以及li 組合而成物件具有天然的樹狀結構，我們不妨採用它們作為建構樹狀組件的基本元素。樹狀元件的最外層必然是一個ul 元素，所以我們可以暫時定義樹狀元件如下：
Tree: {
xml: `<ul id='tree'>
<Item id='item'/>
</ul>`
}這裡的未定義的元件Item 是一個需要遞歸定義的子項元件，它會根據提供的資料遞歸地產生子孫物件。下面是一個可能的設計：
Item: {
xml: `<li id='item'>
<p id='content'>
<span id='neme'/><span id='expand'/>
</p>
<ul id='entries'/>
</li>`,
map: { defer: "entries" }
}注意，上面的 neme 物件是用來顯示 name 屬性的。 expand 物件用於展開或關閉子級物件 entries。子級物件 entries 被設定為需要延遲實例化，只有當使用者點擊 expand 物件展開子級時，該物件才會實例化。
資料的載入與渲染
如上一節所述，我們設定了子層級物件 entries 需要延遲實例化。所以，在給子項 Item 提供的資料設定介面不應該立刻對 entries 實例化。下面我們先給出資料介面函數。
Item: {
// css, xml, map 项同上
fun: function (sys, items, opts) {
var data;
function val(value) {
data = value;
sys.neme.text(data.name);
data.children && data.children.length && sys.expand.show().text(" [+]");
}
return { val: val };
}
}該介面函數 val 只是設定了當前節點相關的內容。下面我們來偵聽 expand 物件的點擊事件，並適時地完成元件物件 entries 的實例化。
Item: {
// css, xml, map 项同上
fun: function (sys, items, opts) {
var data, open;
sys.expand.on("click", function () {
open = !open;
sys.expand.text(open ? " [-]" : " [+]");
open ? (sys.entries.show() && load()) : sys.entries.hide();
});
function load() {
if ( sys.entries.children().length == 0 )
for ( var item of data.children )
sys.add.before("Item").value().val(item);
}
function val(value) {
data = value;
sys.neme.text(data.name);
data.children && data.children.length && sys.expand.show().text(" [+]");
}
return { val: val };
}
}上述程式碼中包含一個 open 參數，該參數記錄了目前節點的是否處於展開狀態以供相關的偵聽器使用。
動態新增節點
現在我們對上述元件進行一個小的擴展，使得它支援動態新增樹節點的功能。首先，我們在物件 entries 的子層級新增一個觸發按鈕，並命名為 add。
Item: {
xml: "<li id='item'>
<p id='content'>
<span id='neme'/><span id='expand'/>
</p>
<ul id='entries'>
<li id='add'>+</li>
</ul>
</li>",
map: { defer: "entries" }
}其次，需要偵聽 add 物件的點擊事件，在偵聽器中完成物件的新增。
Item: {
// css, xml, map 项同前
fun: function (sys, items, opts) {
var data, open;
sys.item.on("click", "//*[@id='add']", function () {
var stuff = {name: 'new stuff'};
data.children.push(stuff);
sys.add.before("Item").value().val(stuff);
});
// 其余代码同前
}
}這裡需要注意，對add 物件的偵聽不能採取直接式的偵聽：sys.add.on("click",...)，而應該使用代理程式的方式，否則會報錯。因為其父級屬於延遲實例化的元件，在 entries 物件未實例化之間，add 物件並不可見。
完整的樹狀元件
綜合以上的內容，現在給出一個完整版本的樹狀元件：
Tree: {
css: `#tree { font-family: Menlo, Consolas, monospace; color: #444; }
#tree, #tree ul { padding-left: 1em; line-height: 1.5em; list-style-type: dot; }`,
xml: `<ul id='tree'>
<Item id='item'/>
</ul>`,
fun: function (sys, items, opts) {
return items.item;
}
},
Item: {
css: "#item { cursor: pointer; }",
xml: `<li id='item'>
<p id='content'>
<span id='neme'/><span id='expand'/>
</p>
<ul id='entries'>
<li id='add'>+</li>
</ul>
</li>`,
map: { defer: "entries" },
fun: function (sys, items, opts) {
var data, open;
sys.item.on("click", "//*[@id='add']", function () {
var stuff = {name: 'new stuff'};
data.children.push(stuff);
sys.add.before("Item").value().val(stuff);
});
sys.expand.on("click", function () {
open = !open;
sys.expand.text(open ? " [-]" : " [+]");
open ? (sys.entries.show() && load()) : sys.entries.hide();
});
function load() {
if ( sys.entries.children().length == 1 )
for ( var item of data.children )
sys.add.before("Item").value().val(item);
}
function val(value) {
data = value;
sys.neme.text(data.name);
data.children && data.children.length && sys.expand.show().text(" [+]");
}
return { val: val };
}
}在實際應用中的樹狀元件會比這裡的功能更豐富些，你可以在上述程式碼的基礎上進一步的改進，例如添加些ICON 圖示、讓子項成為可拖曳的等等。但在改進過程中盡量避免程式碼的複雜化，適當地剝離些程式碼出來封裝成組件是非常必要的。
本系列文章是基於 xmlplus 框架。如果你對 xmlplus 沒有太多了解，可以訪問 www.xmlplus.cn。這裡有詳盡的入門文件可供參考。
【相關推薦】
1. 免費js線上影片教學
3. php.cn獨孤九賤（3）－JavaScript影片教學
以上是JavaScript框架（xmlplus）元件的介紹（九）樹（Tree）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
