本文主要介紹 dhtmlxSuite 的DHTMLX Optimus 。

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

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

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

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

怎么開始

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

運行環(huán)境

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

npm install
npm start

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

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

npm i dhx-optimus

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

npm i dhx-optimus-store

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

創(chuàng)建應用程序

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

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

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

dhtmlxOptimus guide

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

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

export class MyApp extends App {}
	

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

• 3.之后，我們添加了第一個視圖。為此，我們在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()方法中返回了一個 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文件的代碼來初始化我們的應用程序：

dhtmlxOptimus guide

這里的一切都很簡單：

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

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

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

dhtmlxSuit| 下載試用

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