本文主要介绍 dhtmlxSuite 的DHTMLX Optimus 。

DHTMLX Optimus 是一个面向组件的框架，用于构建基于 DHTMLX 的应用程序。该框架旨在简化应用程序构建过程，即：

• 有助于以单一、结构化、直观的方式组织应用程序代码；
• 提供用于在应用程序部分和外部环境（服务器、外部服务等）之间交换数据和事件的工具；
• 可以自动调整应用程序组件的生命周期（例如，释放未使用的内存等）。

每个模块描述 UI 的一部分（单个视图），可以使用模块内部的普通 DHTMLX 代码来初始化单个组件。顶级模块可以组合多个视图，应用程序本身可以用作视图。

该框架提供了一个公共事件总线，以允许视图和一些其他帮助程序之间进行通信，以完成常见的 DHTMLX 任务。

怎么开始

开始使用 DHTMLX Optimus 框架的最佳方式是创建一个简单的应用程序。

运行环境

首先，应该为项目配置环境，可以使用从GitHub配置设置的现成项目。要在本地服务器上运行项目，请使用：

npm install
npm start

在其他情况下，可以通过npm包管理器将 DHTMLX Optimus 添加到项目中。为此，在项目目录中运行以下命令：

• 安装“dhx-optimus”：
• data: object——可选，由 DELETE-request 发送到服务器的数据

npm i dhx-optimus

• 安装“dhx-optimus-store”状态管理器：

npm i dhx-optimus-store

DHTMLX Optimus 需要绍 dhtmlxSuite最新版本 库的文件作为依赖项。因此，需要添加 DHTMLX Suite 的 js/css 文件以提供 DHTMLX Optimus 的正确工作。

创建应用程序

在本地服务器上运行项目并在浏览器中打开//localhost:8080/后，将看到以下结果：

看一下如何创建演示应用程序的：

• 1.首先，我们在src文件夹中创建了一个新的index.html文件，并定义了一个容器来在那里渲染我们的应用程序：

dhtmlxOptimus guide

• 2.接下来，我们创建了一个index.js文件 - 应用程序的入口点。

import "./assets/css/index.css"; // import css styles
import { App } from "dhx-optimus";

export class MyApp extends App {}
	

		在这里，创建了呈现应用程序的 MyApp 类。MyApp 类继承自“dhx-optimus”库中包含的 App 类。
	

• 3.之后，我们添加了第一个视图。为此，我们在views文件夹中创建了TopLayout.js文件。

建议在具有视图 => TopLayout.js 的文件的名称开头使用大写字母。

import { View } from "dhx-optimus";

export class TopLayout extends View {
    init() {
        return `
	

		Hello Optimus!
	
`;
    }
}

创建了 TopLayout 类，该类继承自“dhx-optimus”库中包含的 View 类。为了创建初始视图，在init()方法中返回了一个 HTML 元素。

• 4.然后，为了渲染刚刚创建的视图，我们将视图包含在index.js文件中，并通过show()方法渲染它：

import "./assets/css/index.css";

import { App } from "dhx-optimus";
import { TopLayout } from "./views/TopLayout";

export class MyApp extends App {
    init() {
        this.show(null, TopLayout); 
    }
}

• 5.最后，我们通过使用以下代码更新index.html文件的代码来初始化我们的应用程序：

dhtmlxOptimus guide

这里的一切都很简单：

• 从 CDN 中包含了一个免费版本的 DHTMLX。必须包含 DHTMLX Suite 的文件作为 DHTMLX Optimus 正确工作的依赖项；
• 已经包含了app.js和app.css文件来配置 webpack；
• 已经通过将容器的 ID 作为参数的render()方法初始化了应用程序。

要了解在专业级别使用 DHTMLX Optimus 进行开发的原则，请按照分步指南进行操作。该指南适用于 JavaScript 和 DHTMLX 领域的经验丰富的用户和初学者。

更多关于dhtmlxSuite价格详情，可前往慧都网咨询。

dhtmlxSuit| 下载试用

dhtmlxSuit是一个用于构建跨浏览器Web应用和移动应用的强大JavaScript UI库。