国产欧美日韩综合,日本在线精品视频,国产在线观看的

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

翻譯|行業資訊|編輯：張蓉|2025-05-20 14:39:02.787|閱讀 130 次

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

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

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

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

Webix正版試用下載

最初為何要這樣做

Webix 復雜組件本質上是小型應用程序。盡管它們能夠很好地完成主要任務，但針對特定用途進行定制并不容易，因為其公開 API 不太允許深入內部邏輯。但人們確實需要這種靈活性。
正因如此，我們萌生了使用 Webix Jet 將復雜組件創建為迷你應用程序的想法。這一解決方案使復雜組件結構清晰、便于定制且功能擴展靈活。

對終端用戶的新特性

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

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

文檔管理器甚至更進一步，在簡單的文件系統任務范圍之外添加了許多功能：

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

Query 組件以用戶友好的設計和便捷的過濾用戶體驗應運而生。

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

管理用戶訪問權限
將訪問權限整合為角色
權限和操作審計

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

基于 Webix Jet 的結構和面向對象編程（OOP）
使用響應式屬性替代傳統的配置設置和事件系統
使用可自定義的視圖類和服務替代經典的 Webix API
通過重寫（Override）實現自定義

Webix Jet 與界面自定義
Webix Jet 負責整潔的代碼組織和復雜組件的基本架構。其主要特點包括：

將用戶界面（UI）保持在獨立模塊（視圖）中，并通過組合模塊創建所需界面
將應用邏輯保留在特殊模塊（服務）中
無私有內容，組件外的代碼可訪問和修改所有內容

通過經典的面向對象繼承，您可以：
1.用新功能擴展視圖和服務
2.重寫現有功能
3.添加新功能和組件
例如，要修改界面，可找到所需的視圖類并重寫其config方法，使其返回不同的 Webix 配置。以下是向 Query 組件的操作菜單添加新選項的示例：
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等視圖類方法。例如，為上述菜單選項添加操作時，需為其添加處理程序：
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}`);
}
}

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

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

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

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

…… 并且任何方法都可以重新定義。例如，您可以重新定義files方法以用不同的方式加載目錄內容：
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: "//docs.webix.com/filemanager-backend/",
override: new Map([[fileManager.services.Backend, MyBackend]]),
慧都是?家?業數字化解決?案公司，專注于軟件、?油與?業領域，以深?的業務理解和?業經驗，幫助企業實現智能化轉型與持續競爭優勢。
慧都科技作為 Webix 的中國區合作伙伴，Webix 作為前端開發和數據可視化領域的領先技術提供商，通過其強大的 Webix UI Library 等工具，助力企業實現高效的應用開發與數據展示。Webix UI Library 支持多種功能（如數據綁定、動態加載、交互式組件等），提供簡潔高效的代碼編寫方式、靈活的布局設計以及豐富的可視化組件，幫助企業輕松應對各類應用開發需求，顯著提升開發效率并縮短項目周期。

標簽：

本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn

上一篇：燈具照明工廠如何靠MES實現生產提效？下一篇：【直播預告】國產系統也能穩跑的文檔組件Spire，只需幾行代碼輕松搞定文檔生成！