復雜組件新策略：為何選擇 SPA 與模塊化開發工具Webix Jet？
翻譯|行業資訊|編輯：張蓉|2025-05-20 14:39:02.787|閱讀
114 次
概述：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: "http://docs.webix.com/filemanager-backend/",
override: new Map([[fileManager.services.Backend, MyBackend]]),
慧都是?家?業數字化解決?案公司，專注于軟件、?油與?業領域，以深?的業務理解和?業經驗，幫助企業實現智能化轉型與持續競爭優勢。
慧都科技作為 Webix 的中國區合作伙伴，Webix 作為前端開發和數據可視化領域的領先技術提供商，通過其強大的 Webix UI Library 等工具，助力企業實現高效的應用開發與數據展示。Webix UI Library 支持多種功能（如數據綁定、動態加載、交互式組件等），提供簡潔高效的代碼編寫方式、靈活的布局設計以及豐富的可視化組件，幫助企業輕松應對各類應用開發需求，顯著提升開發效率并縮短項目周期。
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
金喜正規買球 
16次
相關產品
正式授權
最新文章 
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線