欧美日韩精品一区二区免费高清,国产一二三,日本成a人片在线播放

復(fù)雜組件新策略：為何選擇 SPA 與模塊化開發(fā)工具Webix Jet？

翻譯|行業(yè)資訊|編輯：張蓉|2025-05-20 14:39:02.787|閱讀 114 次

概述：Webix?是一套完整的前端開發(fā)框架，它允許開發(fā)者利用 JavaScript、CSS 和 HTML5 技術(shù)，快速構(gòu)建出富交互性的 Web 應(yīng)用程序。該框架提供了超過 100 個預(yù)制且可高度定制的組件，涵蓋了數(shù)據(jù)表格、圖表、表單、布局等各類常見的用戶界面元素。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

Webix 是一套完整的前端開發(fā)框架，它允許開發(fā)者利用 JavaScript、CSS 和 HTML5 技術(shù)，快速構(gòu)建出富交互性的 Web 應(yīng)用程序。該框架提供了超過 100 個預(yù)制且可高度定制的組件，涵蓋了數(shù)據(jù)表格、圖表、表單、布局等各類常見的用戶界面元素。
Webix制定了復(fù)雜組件的新概念，并已推出新組件：文件管理器、文檔管理器、查詢組件和用戶管理器。這些組件均作為完全可配置的 Webix Jet 應(yīng)用模塊從頭構(gòu)建，這使它們既靈活又強(qiáng)大…… 但在代碼掌握方面并非易事。不過，一旦理解了這一概念，便將開啟無限可能。

讓我們深入探討新組件的技術(shù)特性，并了解基于 Jet 框架的方法所帶來的全部優(yōu)勢。

Webix正版試用下載

最初為何要這樣做

Webix 復(fù)雜組件本質(zhì)上是小型應(yīng)用程序。盡管它們能夠很好地完成主要任務(wù)，但針對特定用途進(jìn)行定制并不容易，因?yàn)槠涔_ API 不太允許深入內(nèi)部邏輯。但人們確實(shí)需要這種靈活性。
正因如此，我們萌生了使用 Webix Jet 將復(fù)雜組件創(chuàng)建為迷你應(yīng)用程序的想法。這一解決方案使復(fù)雜組件結(jié)構(gòu)清晰、便于定制且功能擴(kuò)展靈活。

對終端用戶的新特性

首先，我們并非簡單重寫代碼，而是為終端用戶添加了許多新功能。例如，文件管理器 7.2 版本增強(qiáng)了以下功能：

三種模式界面：列表、卡片和雙視圖
文件預(yù)覽
文本編輯器
添加文件和文件夾
文件下載與上傳
自適應(yīng)行為，適配移動設(shè)備小屏幕

文檔管理器甚至更進(jìn)一步，在簡單的文件系統(tǒng)任務(wù)范圍之外添加了許多功能：

用于存儲已刪除文件和文件夾的回收站；
將文件標(biāo)記為收藏；
與其他用戶共享文件；
打開最近查看過的文件的功能；
為文件和文件夾添加標(biāo)簽；
按名稱和標(biāo)簽搜索；
對文件進(jìn)行評論；
查看和編輯 Excel 文件。

Query 組件以用戶友好的設(shè)計(jì)和便捷的過濾用戶體驗(yàn)應(yīng)運(yùn)而生。

用戶管理器（你聽說過嗎？）是一款用于管理用戶及其訪問權(quán)限的全新組件：

管理用戶訪問權(quán)限
將訪問權(quán)限整合為角色
權(quán)限和操作審計(jì)

以下是基于 Jet 的組件為終端用戶提供的現(xiàn)成功能。開發(fā)人員可輕松添加范圍外的任何功能。
對開發(fā)人員的新特性
對于有經(jīng)驗(yàn)的 Webix 用戶來說，基于 Jet 的組件可能顯得有些非傳統(tǒng)。它們的構(gòu)建方式不同，需要開發(fā)人員采用不同的方法。盡管每個組件都有其特定功能，但它們都有以下共同點(diǎn)：

基于 Webix Jet 的結(jié)構(gòu)和面向?qū)ο缶幊蹋∣OP）
使用響應(yīng)式屬性替代傳統(tǒng)的配置設(shè)置和事件系統(tǒng)
使用可自定義的視圖類和服務(wù)替代經(jīng)典的 Webix API
通過重寫（Override）實(shí)現(xiàn)自定義

Webix Jet 與界面自定義
Webix Jet 負(fù)責(zé)整潔的代碼組織和復(fù)雜組件的基本架構(gòu)。其主要特點(diǎn)包括：

將用戶界面（UI）保持在獨(dú)立模塊（視圖）中，并通過組合模塊創(chuàng)建所需界面
將應(yīng)用邏輯保留在特殊模塊（服務(wù)）中
無私有內(nèi)容，組件外的代碼可訪問和修改所有內(nèi)容

通過經(jīng)典的面向?qū)ο罄^承，您可以：
1.用新功能擴(kuò)展視圖和服務(wù)
2.重寫現(xiàn)有功能
3.添加新功能和組件
例如，要修改界面，可找到所需的視圖類并重寫其config方法，使其返回不同的 Webix 配置。以下是向 Query 組件的操作菜單添加新選項(xiàng)的示例：
class ActionsPopupView extends query.views.actions {
config() {
; const ui = super.config();

const list = ui.body;
list.data.push({ id: "custom", value: "Custom option" });
list.yCount = 5;

return ui;
}
}
若要更改組件特定功能的工作方式，需重寫init等視圖類方法。例如，為上述菜單選項(xiàng)添加操作時，需為其添加處理程序：
class ActionsPopupView extends query.views.actions {
config() {
...
}
init(){
super.init();

  this.on(this.app, "action", (id, item) => {
if (id === "log") this.LogFilter(item);
});
}

LogFilter(item){
  console.log(`Filter ID: ${item}`);
}
}

響應(yīng)式狀態(tài)：如何更改屬性并監(jiān)聽變化
除了寬度、URL 等常規(guī)配置設(shè)置外，基于 Jet 的組件還具備由 Jet 響應(yīng)式狀態(tài)啟用的響應(yīng)式屬性。這一技術(shù)旨在實(shí)現(xiàn)組件各部分之間的直接通信。狀態(tài)屬性可反映任何參數(shù)的值，并在其發(fā)生變化時發(fā)出通知，以便任何監(jiān)聽器可在需要時對變化做出反應(yīng)。
與事件和參數(shù)相比，響應(yīng)式狀態(tài)具有以下優(yōu)勢：

避免對配置參數(shù)進(jìn)行繁瑣的當(dāng)前值檢查
不會造成事件總線混亂（如果過度依賴應(yīng)用范圍的事件，遲早會出現(xiàn)這種情況）
監(jiān)聽器無需在參數(shù)變化時立即存在，可在創(chuàng)建后對變化做出反應(yīng)

您可以直接在組件配置中定義響應(yīng)式屬性：
// the folder with the recently viewed files is initially open
view:"docmanager", id:"dm", source:"recent"
之后，您可以：
訂閱某個參數(shù)，并在任何時刻于參數(shù)發(fā)生變化時運(yùn)行自定義邏輯
{ view: "docmanager",
url: "http://docs.webix.com/docmanager-backend/",
on: {
onInit: app => {
  const state = app.getState();
state.$observe("source", (v,o) => {
  /* custom logic here */
});
},
}
}

更改參數(shù)，組件將對該更改作出反應(yīng)
$$("dm").getState().source = "trash";
您可以一次性更改多個狀態(tài)屬性：
const state = $$("docManager").getState();
state.$batch({
source: "files",
path: "/Music",
mode: "cards"
});
之后無需刷新組件。響應(yīng)式狀態(tài)的所有監(jiān)聽器將自行處理狀態(tài)變化。
重寫與服務(wù)：自定義組件邏輯
基于 Jet 的組件不具備傳統(tǒng)的公共 API，因此無法通過以往的方式進(jìn)行自定義。相反，組件提供了包含內(nèi)部邏輯方法的服務(wù)模塊。如果需要修改服務(wù)器與客戶端通信的邏輯，您可以重新定義任何服務(wù)（例如 Backend 服務(wù)）。
任何方法均可直接調(diào)用，例如：
// get all files and folders from the root of the file system
$$("filemanager").getService("backend").files("/").then(files => {
...
});

…… 并且任何方法都可以重新定義。例如，您可以重新定義files方法以用不同的方式加載目錄內(nèi)容：
class MyBackend extends fileManager.services.Backend {
; // you can use calls to real backend server
files(id) {
return webix.ajax("http://docs.webix.com/filemanager-backend/files", { id })
; .then((data) => data.json());
}

// ... other methods
}
webix.ui({
view: "filemanager",
  url: "http://docs.webix.com/filemanager-backend/",
  override: new Map([[fileManager.services.Backend, MyBackend]]),
慧都是?家?業(yè)數(shù)字化解決?案公司，專注于軟件、?油與?業(yè)領(lǐng)域，以深?的業(yè)務(wù)理解和?業(yè)經(jīng)驗(yàn)，幫助企業(yè)實(shí)現(xiàn)智能化轉(zhuǎn)型與持續(xù)競爭優(yōu)勢。
慧都科技作為 Webix 的中國區(qū)合作伙伴，Webix 作為前端開發(fā)和數(shù)據(jù)可視化領(lǐng)域的領(lǐng)先技術(shù)提供商，通過其強(qiáng)大的 Webix UI Library 等工具，助力企業(yè)實(shí)現(xiàn)高效的應(yīng)用開發(fā)與數(shù)據(jù)展示。Webix UI Library 支持多種功能（如數(shù)據(jù)綁定、動態(tài)加載、交互式組件等），提供簡潔高效的代碼編寫方式、靈活的布局設(shè)計(jì)以及豐富的可視化組件，幫助企業(yè)輕松應(yīng)對各類應(yīng)用開發(fā)需求，顯著提升開發(fā)效率并縮短項(xiàng)目周期。

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn

上一篇：燈具照明工廠如何靠MES實(shí)現(xiàn)生產(chǎn)提效？下一篇：【直播預(yù)告】國產(chǎn)系統(tǒng)也能穩(wěn)跑的文檔組件Spire，只需幾行代碼輕松搞定文檔生成！