麻豆免费网,一区二区免费看视频,自拍偷拍第七页

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

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

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

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

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

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

Webix正版試用下載

最初為何要這樣做

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

對(duì)終端用戶(hù)的新特性

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

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

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

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

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

用戶(hù)管理器（你聽(tīng)說(shuō)過(guò)嗎？）是一款用于管理用戶(hù)及其訪(fǎng)問(wèn)權(quán)限的全新組件：

管理用戶(hù)訪(fǎng)問(wèn)權(quán)限
將訪(fǎng)問(wèn)權(quán)限整合為角色
權(quán)限和操作審計(jì)

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

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

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

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

通過(guò)經(jīng)典的面向?qū)ο罄^承，您可以：
1.用新功能擴(kuò)展視圖和服務(wù)
2.重寫(xiě)現(xiàn)有功能
3.添加新功能和組件
例如，要修改界面，可找到所需的視圖類(lèi)并重寫(xiě)其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;
}
}
若要更改組件特定功能的工作方式，需重寫(xiě)init等視圖類(lèi)方法。例如，為上述菜單選項(xiàng)添加操作時(shí)，需為其添加處理程序：
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)聽(tīng)變化
除了寬度、URL 等常規(guī)配置設(shè)置外，基于 Jet 的組件還具備由 Jet 響應(yīng)式狀態(tài)啟用的響應(yīng)式屬性。這一技術(shù)旨在實(shí)現(xiàn)組件各部分之間的直接通信。狀態(tài)屬性可反映任何參數(shù)的值，并在其發(fā)生變化時(shí)發(fā)出通知，以便任何監(jiān)聽(tīng)器可在需要時(shí)對(duì)變化做出反應(yīng)。
與事件和參數(shù)相比，響應(yīng)式狀態(tài)具有以下優(yōu)勢(shì)：

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

您可以直接在組件配置中定義響應(yīng)式屬性：
// the folder with the recently viewed files is initially open
view:"docmanager", id:"dm", source:"recent"
之后，您可以：
訂閱某個(gè)參數(shù)，并在任何時(shí)刻于參數(shù)發(fā)生變化時(shí)運(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ù)，組件將對(duì)該更改作出反應(yīng)
$$("dm").getState().source = "trash";
您可以一次性更改多個(gè)狀態(tài)屬性：
const state = $$("docManager").getState();
state.$batch({
source: "files",
path: "/Music",
mode: "cards"
});
之后無(wú)需刷新組件。響應(yīng)式狀態(tài)的所有監(jiān)聽(tīng)器將自行處理狀態(tài)變化。
重寫(xiě)與服務(wù)：自定義組件邏輯
基于 Jet 的組件不具備傳統(tǒng)的公共 API，因此無(wú)法通過(guò)以往的方式進(jìn)行自定義。相反，組件提供了包含內(nèi)部邏輯方法的服務(wù)模塊。如果需要修改服務(wù)器與客戶(hù)端通信的邏輯，您可以重新定義任何服務(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ù)字化解決?案公司，專(zhuān)注于軟件、?油與?業(yè)領(lǐng)域，以深?的業(yè)務(wù)理解和?業(yè)經(jīng)驗(yàn)，幫助企業(yè)實(shí)現(xiàn)智能化轉(zhuǎn)型與持續(xù)競(jìng)爭(zhēng)優(yōu)勢(shì)。
慧都科技作為 Webix 的中國(guó)區(qū)合作伙伴，Webix 作為前端開(kāi)發(fā)和數(shù)據(jù)可視化領(lǐng)域的領(lǐng)先技術(shù)提供商，通過(guò)其強(qiáng)大的 Webix UI Library 等工具，助力企業(yè)實(shí)現(xiàn)高效的應(yīng)用開(kāi)發(fā)與數(shù)據(jù)展示。Webix UI Library 支持多種功能（如數(shù)據(jù)綁定、動(dòng)態(tài)加載、交互式組件等），提供簡(jiǎn)潔高效的代碼編寫(xiě)方式、靈活的布局設(shè)計(jì)以及豐富的可視化組件，幫助企業(yè)輕松應(yīng)對(duì)各類(lèi)應(yīng)用開(kāi)發(fā)需求，顯著提升開(kāi)發(fā)效率并縮短項(xiàng)目周期。

標(biāo)簽：

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

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