世俱杯 2025

复杂组件新策略：为何选择 SPA 与模块化开发工具Webix Jet？

翻译|行业资讯|编辑：张蓉|2025-05-20 14:39:02.787|阅读 39 次

概述：Webix 是一套完整的前端开发框架，它允许开发者利用 JavaScript、CSS 和 HTML5 技术，快速构建出富交互性的 Web 应用程序。该框架提供了超过 100 个预制且可高度定制的组件，涵盖了数据表格、图表、表单、布局等各类常见的用户界面元素。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

Webix 是一套完整的前端开发框架，它允许开发者利用 JavaScript、CSS 和 HTML5 技术，快速构建出富交互性的 Web 应用程序。该框架提供了超过 100 个预制且可高度定制的组件，涵盖了数据表格、图表、表单、布局等各类常见的用户界面元素。
Webix制定了复杂组件的新概念，并已推出新组件：文件管理器、文档管理器、查询组件和用户管理器。这些组件均作为完全可配置的 Webix Jet 应用模块从头构建，这使它们既灵活又强大…… 但在代码掌握方面并非易事。不过，一旦理解了这一概念，便将开启无限可能。

让我们深入探讨新组件的技术特性，并了解基于 Jet 框架的方法所带来的全部优势。

Webix正版试用下载

最初为何要这样做

Webix 复杂组件本质上是小型应用程序。尽管它们能够很好地完成主要任务，但针对特定用途进行定制并不容易，因为其公开 API 不太允许深入内部逻辑。但人们确实需要这种灵活性。
正因如此，我们萌生了使用 Webix Jet 将复杂组件创建为迷你应用程序的想法。这一解决方案使复杂组件结构清晰、便于定制且功能扩展灵活。

对终端用户的新特性

 首先，我们并非简单重写代码，而是为终端用户添加了许多新功能。例如，文件管理器 7.2 版本增强了以下功能：
  • 三种模式界面：列表、卡片和双视图
  • 文件预览
  • 文本编辑器
  • 添加文件和文件夹
  • 文件下载与上传
  • 自适应行为，适配移动设备小屏幕
fm
文档管理器甚至更进一步，在简单的文件系统任务范围之外添加了许多功能：
  • 用于存储已删除文件和文件夹的回收站；
  • 将文件标记为收藏；
  • 与其他用户共享文件；
  • 打开最近查看过的文件的功能；
  • 为文件和文件夹添加标签；
  • 按名称和标签搜索；
  • 对文件进行评论；
  • 查看和编辑 Excel 文件。
dm
Query 组件以用户友好的设计和便捷的过滤用户体验应运而生。
query
用户管理器（你听说过吗？）是一款用于管理用户及其访问权限的全新组件：
  • 管理用户访问权限
  • 将访问权限整合为角色
  • 权限和操作审计
user
以下是基于 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: "//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("//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@dpuzeg.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP