本文主要介紹 dhtmlxSuite 的DHTMLX Optimus 。

DHTMLX Optimus 是一個(gè)面向組件的框架，用于構(gòu)建基于 DHTMLX 的應(yīng)用程序。該框架旨在簡化應(yīng)用程序構(gòu)建過程，即：

• 有助于以單一、結(jié)構(gòu)化、直觀的方式組織應(yīng)用程序代碼；
• 提供用于在應(yīng)用程序部分和外部環(huán)境（服務(wù)器、外部服務(wù)等）之間交換數(shù)據(jù)和事件的工具；
• 可以自動調(diào)整應(yīng)用程序組件的生命周期（例如，釋放未使用的內(nèi)存等）。

每個(gè)模塊描述 UI 的一部分（單個(gè)視圖），可以使用模塊內(nèi)部的普通 DHTMLX 代碼來初始化單個(gè)組件。頂級模塊可以組合多個(gè)視圖，應(yīng)用程序本身可以用作視圖。

該框架提供了一個(gè)公共事件總線，以允許視圖和一些其他幫助程序之間進(jìn)行通信，以完成常見的 DHTMLX 任務(wù)。

怎么開始

開始使用 DHTMLX Optimus 框架的最佳方式是創(chuàng)建一個(gè)簡單的應(yīng)用程序。

運(yùn)行環(huán)境

首先，應(yīng)該為項(xiàng)目配置環(huán)境，可以使用從GitHub配置設(shè)置的現(xiàn)成項(xiàng)目。要在本地服務(wù)器上運(yùn)行項(xiàng)目，請使用：

npm install
npm start

在其他情況下，可以通過npm包管理器將 DHTMLX Optimus 添加到項(xiàng)目中。為此，在項(xiàng)目目錄中運(yùn)行以下命令：

• 安裝“dhx-optimus”：
• data: object——可選，由 DELETE-request 發(fā)送到服務(wù)器的數(shù)據(jù)

npm i dhx-optimus

• 安裝“dhx-optimus-store”狀態(tài)管理器：

npm i dhx-optimus-store

DHTMLX Optimus 需要紹 dhtmlxSuite最新版本 庫的文件作為依賴項(xiàng)。因此，需要添加 DHTMLX Suite 的 js/css 文件以提供 DHTMLX Optimus 的正確工作。

創(chuàng)建應(yīng)用程序

在本地服務(wù)器上運(yùn)行項(xiàng)目并在瀏覽器中打開//localhost:8080/后，將看到以下結(jié)果：

看一下如何創(chuàng)建演示應(yīng)用程序的：

• 1.首先，我們在src文件夾中創(chuàng)建了一個(gè)新的index.html文件，并定義了一個(gè)容器來在那里渲染我們的應(yīng)用程序：

dhtmlxOptimus guide

• 2.接下來，我們創(chuàng)建了一個(gè)index.js文件 - 應(yīng)用程序的入口點(diǎn)。

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

export class MyApp extends App {}
	

		在這里，創(chuàng)建了呈現(xiàn)應(yīng)用程序的 MyApp 類。MyApp 類繼承自“dhx-optimus”庫中包含的 App 類。
	

• 3.之后，我們添加了第一個(gè)視圖。為此，我們在views文件夾中創(chuàng)建了TopLayout.js文件。

建議在具有視圖 => TopLayout.js 的文件的名稱開頭使用大寫字母。

import { View } from "dhx-optimus";

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

		Hello Optimus!
	
`;
    }
}

創(chuàng)建了 TopLayout 類，該類繼承自“dhx-optimus”庫中包含的 View 類。為了創(chuàng)建初始視圖，在init()方法中返回了一個(gè) HTML 元素。

• 4.然后，為了渲染剛剛創(chuàng)建的視圖，我們將視圖包含在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文件的代碼來初始化我們的應(yīng)用程序：

dhtmlxOptimus guide

這里的一切都很簡單：

• 從 CDN 中包含了一個(gè)免費(fèi)版本的 DHTMLX。必須包含 DHTMLX Suite 的文件作為 DHTMLX Optimus 正確工作的依賴項(xiàng)；
• 已經(jīng)包含了app.js和app.css文件來配置 webpack；
• 已經(jīng)通過將容器的 ID 作為參數(shù)的render()方法初始化了應(yīng)用程序。

要了解在專業(yè)級別使用 DHTMLX Optimus 進(jìn)行開發(fā)的原則，請按照分步指南進(jìn)行操作。該指南適用于 JavaScript 和 DHTMLX 領(lǐng)域的經(jīng)驗(yàn)豐富的用戶和初學(xué)者。

更多關(guān)于dhtmlxSuite價(jià)格詳情，可前往慧都網(wǎng)咨詢。

dhtmlxSuit| 下載試用

dhtmlxSuit是一個(gè)用于構(gòu)建跨瀏覽器Web應(yīng)用和移動應(yīng)用的強(qiáng)大JavaScript UI庫。