ThingJS开发使用感受

封面来源于网络。


一、前言

1. 背景 

出于为了实现有关厂区的数字孪生项目,断断续续使用ThingJS平台开发一年左右,做一个使用感受的总结。

2. 业务场景

  • 开发一个基于厂区的数字孪生项目,基于ThingJS低代码开发的页面分为div3d、div2d结构;
  • div3d是3D场景展示的HTML节点,3D场景可以通过动画来模拟现实,并展示对应数据信息;
  • div2d是2D图层展示的HTML节点,基于业务需要实现的数据和图表展示、功能操作等,其中功能操作可联动3D场景;

二、开发流程

1. 场景建模

使用「森园区」或「模模搭」,具有现成模型,建模需求不大,可以使用内置建模搭建场景;需要还原实际园区场景需要依靠 3D建模师 提供模型。

2. 低代码开发

具体可参考官方示例(需结合官方在线开发参考手册)

三、优缺点

优点

  1. 整合功能开发;
  2. 固定方法便捷引用;
  3. 0基础建模人员,可快速搭建简易建模;

缺点(偏开发方面)

a. 文件引入方式

THING.Utils.dynamicLoad(['/static/vendor/twitter-bootstrap/3.3.7/css/bootstrap.min.css','/static/vendor/twitter-bootstrap/3.3.7/js/bootstrap.min.js','/static/vendor/moment/moment.js'// ......
],function () {// 加载场景代码 var app = new THING.App({url: 'https://www.thingjs.com/static/models/factory',  // 场景地址background: '#000000',env: 'Seaside',});// 加载场景后执行app.on('load', function (ev) {// 创建提示initThingJsTip(`制作项目过程中,平台支持上传页面资源, js 和 css 可以通过 dynamicLoad 进行引用`);});})

官网示例给出了上述 引入js和css 的方式,这种方式在具有引入大量文件需求的时候,会增加页面的初始加载时长;

问:这种引入文件的方式为什么会增加页面的初始加载时长?

答:

  • 首先ThingJS低代码项目的运行流程大概是先依次加载文件,在加载3D场景,然后展示出整个项目场景;(THING.Utils.dynamicLoad()方法的参数1是文件地址数组。)
  • 后期的项目业务量会越来越多、越来越复杂,需要加载的JS、CSS文件更多;(笔者所开发的项目按照功能模块来写,至少40个JS文件,每次加载时长在30s~1min多之间。)
  • 开发过程中会有引入第三方插件的需求,随之我们需要加载的文件会越来越多;(dayjs.js、js.cookie.js、bootstrap.min.js......)
开发项目的初始化页面加载时长
开发项目的初始化页面加载时长
个别第三方插件加载时长
个别第三方插件加载时长

b. 2D页面结构添加方式

/*** 利用模板字符串 创建页面元素并添加到div2d中*/
function createButton() {// 使用 bootstrap 样式var template =`<button class="btn btn-default" type="button" style="position:absolute;left:20px;top:20px;z-index:2">当前时间</button>`;var btn = $('#div2d').append($(template));return btn;
}

上述是ThingJS低代码平台开发2d平面图层添加HTML元素节点的方式(即:模版字符串【``】)

也就是说,你所有的HTML节点都要使用模版字符串进行添加;

举例:导航栏、侧窗、弹窗、按钮等......基本所有图层都需要使用模版字符串进行拼接、添加;

(可以参考低代码平台示例中是如何添加2d图层的。)

(这个博客也有提到这种方式)

c. 无法使用CSS预处理器

因为文件引入方式不支持CSS预处理器相关后缀文件引入,所以笔者一般的开发方式是:在VSCode中新建html文件,写好页面结构,依靠Less/Sass进行写样式,然后分别将html结构通过模版字符串添加到div#div2d的节点中、将解析出的CSS文件导入低代码项目中。

d. 无法很好地使用模块化开发

ThingJS不支持目前主流的JS模块化方案;

该博客中有提到 引入js和css 的方式可以作为一个模块化文件引入方案,但是博客中有提到: “如果要实现一个较为庞大复杂的业务场景时,就不太方便了” ,也正是笔者担心的。

因为前期开发获取到ThingJS开发方式的参考极少甚至没有(只能参考ThingJS低代码示例),所以笔者一直在使用的是 引入js和css 的方式,算是全局变量了......(因此也引发了后续编译或混淆后的报错问题......)

主流的JS模块化方案无法使用,可以尝试以下方案:(两种方式笔者都未曾验证是否存在其他问题)

1. 命名空间

使用对象来创建命名空间,将相关功能和变量组织在命名空间下,以避免全局变量的冲突。

使用命名空间的方式,你可以在全局范围内只定义一个对象,然后将模块的功能和变量添加为该对象的属性。

var MyNamespace = {// 模块1module1: { // ... },// 模块2module2: { // ... },// ...
};

2. 模块模式(推荐)

使用函数返回对象的方式创建模块,将模块内部的变量和函数隐藏起来,只暴露需要暴露的接口。

var MyModule = (function() {var privateVariable = '私有变量';function privateFunction() { // 私有函数 }function publicFunction() { // 公有函数 }return { publicFunction: publicFunction };
})();
MyModule.publicFunction(); // 调用公有函数

e. 开发无报错,上线报错

原因:

上线前平台内部的编译工具或混淆器错误地重复定义了同一个变量名。

待解决理由:

项目会因为混淆器定义的变量莫名地报错,每次运行项目无法保证具体哪个功能无法使用。

优化方案:

  1. 尝试更新或更改编译工具或混淆器的配置(第三方平台,无法更新或更改配置)
  2. 全局变量包装在一个自定义的命名空间对象中(未做尝试,无法保证不继续有混淆器重复定义变量的问题)。

缺点:

项目复杂后,无法保证声明的命名空间对象不会被混淆器重复定义同一个变量名。

f. 初始化加载

原因:

  1. (模型方面)当场景内物体过多时也有可能会导致场景加载缓慢,卡顿。
  2. (源码方面)平台没有提供构建工具来处理源代码,所以无法很好的进行文件压缩、代码合并、文件优化等操作。

待解决理由:

项目初始化加载时间过长

优化方案:

创建一个新的项目,将源码使用压缩网站进行压缩,将其复制到新的项目中。

(在老项目中实现功能,然后压缩代码复制到新项目,引用新项目链接)

缺点:

  1. 该优化方案只是优化的方法之一,不能保证优化效果显著,后期项目代码量提升,依旧会影响加载时间;
  2. 开发方式受限,增加开发工作量,并且不能保证压缩后代码不出现问题;

影响加载速度的原因:

  1. 基于平台引入文件的方式,初始化时依次全部加载出来
  2. 资源文件大小和数量
  3. 第三方插件和库
  4. 网络速度和延迟
  5. 服务器性能和响应时间

        ......

四、总结

在编码方面,笔者的编码方式和博客中的描述基本一致:“由于平台提供的代码编码端体验不佳,我们不得不先在本地进行开发,再将相关代码复制到在线平台,而调试修改代码也是如此繁琐”。

个人感觉至少现阶段的ThingJS还是比较适合去做一些简单的业务场景、数据交互简单的项目,类似于大屏展示,这种纯数据展示;如果要实现一个较为庞大复杂的业务场景时,就不太方便,开发难度也会随之增加。

不得不承认ThingJS有一定的优点,但是相对开发来说,这些优点是可以被缺点抵消掉的;

如果一个项目开发不方便,不仅会影响到开发周期,还会提高后期项目的维护成本......

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/82918.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

rust关于项目结构包,Crate和mod和目录的组织

rust 最近开始学习rust语言。感觉这门语言相对java确实是难上很多。开几个文章把遇到的问题记录一下 rust关于包&#xff0c;Crate 关于包&#xff0c;Crate这块先看看官方书籍怎么说的 crate 是 Rust 在编译时最小的代码单位。如果你用 rustc 而不是 cargo 来编译一个文件…

直线模组在AGV物流设备起什么作用?

在物流产业高速发展的今天&#xff0c;机器人技术的应用程度已经成为决定企业间相互竞争和未来发展的重要衡量因素。智能机器人运用到物流产业&#xff0c;其效率不言而喻。AGV智能仓储作为现代物流系统的重要组成部分&#xff0c;物流自动化、智能化不光是能提升效率和安全性&…

【JavaEE】懒人的福音-MyBatis框架—介绍、搭建环境以及初步感受

【JavaEE】MyBatis框架要点总结&#xff08;1&#xff09; 文章目录 【JavaEE】MyBatis框架要点总结&#xff08;1&#xff09;1. MyBatis是什么&#xff1f;2. 搭建MyBatis的开发环境2.0 MySQL建库建表2.1 新项目添加MyBatis框架2.2 设置MyBatis的配置2.2.1 设置数据库的连接信…

U8g2 驱动oled自定义中文字库

原文&#xff1a;Arduino驱动LED128X64 - U8g2 参考&#xff1a; Arduino通过u8g2库驱动OLED适合 u8g2 的中文字体&#xff0c;采用文泉驿点阵宋体作为源本&#xff0c;提供 12x12、13x13、14x14、15x15 和 16x16 点阵字库。 本文所需工具下载 我们在项目中大概率会遇到LED显示…

Unity3d C#利用本地网页快速打开萤石云监控视频流(ezopen)实现云台,声音等控制,支持WebGL平台,替代UMP播放(含源码)

前言 之前我介绍了替代Universal?Media?PlayerUMP播放石云监控视频流(ezopen)的功能&#xff0c;效果还是很明显的&#xff0c;笔者的测试是差不多3-5秒就能打开监控画面&#xff0c;不过稍微遗憾的是&#xff0c;之前的功能是iframe打开石云提供的播放网页的形式&#xff0…

在linux系统上部署Nginx

一、准备环境 1、关闭防火墙 systemctl disable firewalld.service 2、 安装Nginx相关依赖 yum install -y gcc-c zlib zlib-developenssl openssl-devel pcre pcre-devel 二、源码安装 1、上传压缩包并解压到目标文件 cd /usr/local tar -zxvf nginx-1.22.0.tar.gz 2、…

06-4_Qt 5.9 C++开发指南_MDI应用程序设计

文章目录 1. MDI简介2. 文档窗口类 QFormDoc 的设计3. MDI主窗口设计与子窗口的使用3.1 主窗口界面设计3.2 MDI子窗口的创建与加入3.3 QMdiArea 常用功能函数3.4 MDI的信号 4. 源码4.1 qwmainwindow.h4.2 qwmainwindow.cpp 1. MDI简介 传统的应用程序设计中有多文档界面(Multi…

企业权限管理(六)-订单详情

订单详情查询 跳转到订单详情页面orders-show.jsp <button type"button" class"btn bg-olive btn-xs" onclick"location.href${pageContext.request.contextPath}/orders/findById.do?id${orders.id}">详情</button>OrdersControl…

北美跨境购物商城多语言多货币系统快捷搭建(java开源)

我了解到您想搭建一个北美跨境购物商城&#xff0c;拥有多语言和多货币系统&#xff0c;并且希望使用Java开源技术进行快速搭建。以下是一个基本的搭建步骤&#xff1a; 1.确定需求&#xff1a;首先确定您的商城需求&#xff0c;包括功能、设计和用户体验等方面。确保您清楚地…

进入现代云技术的世界-APIGateway、ServiceMesh、OpenStack、异步化框架、云原生框架、命令式API与声明式API

目录 APIGateway Service Mesh OpenStack 异步化框架 云原生框架 命令式API与声明式API APIGateway API网关&#xff08;API Gateway&#xff09;是一个服务器——充当了客户端和内部服务之间的中间层。API网关负责处理API请求&#xff0c;将客户端的请求路由到相应的后端…

数据挖掘全流程解析

数据挖掘全流程解析 数据指标选择 在这一阶段&#xff0c;使用直方图和柱状图的方式对数据进行分析&#xff0c;观察什么数据属性对于因变量会产生更加明显的结果。 如何绘制直方图和条形统计图 数据清洗 观察数据是否存在数据缺失或者离群点的情况。 数据异常的两种情况…

webpack基础知识八:说说如何借助webpack来优化前端性能?

一、背景 随着前端的项目逐渐扩大&#xff0c;必然会带来的一个问题就是性能 尤其在大型复杂的项目中&#xff0c;前端业务可能因为一个小小的数据依赖&#xff0c;导致整个页面卡顿甚至奔溃 一般项目在完成后&#xff0c;会通过webpack进行打包&#xff0c;利用webpack对前…

leetcode 33.搜索旋转排序数组

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;搜索旋转排序数组 ps&#xff1a; 本题是二分查找的变形&#xff0c;旋转排序数组之后其实会形成两个有序的区间。算出平均下标先判断是否与 target 相等&#xff0c;因为这样可以减少代码的冗余。如果前者不成立则使用平…

Godot 4 源码分析 - 文件读入编码处理

今天需要读入xml文件进行处理&#xff0c;结果读入一个带中文的文件时&#xff0c;出错了。当然程序还能运行&#xff0c;但编译器一直报错&#xff0c;而且XML解析也不正确 单步调试发现读入的内容出现乱码&#xff0c;具体逻辑&#xff1a; String FileAccess::get_as_text…

【肌电图信号分析】通道肌电图并查找收缩周期的数量、振幅、最大值和持续时间(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

React源码解析18(2)------ FilberNode,FilberRootNode结构关系

摘要 在上一篇&#xff0c;我们实现了通过JSX转换为ReactElement的方法&#xff0c;也看到了转换后React元素的结构。但是这个React元素&#xff0c;并不能很清楚的表达组件之间的关系&#xff0c;以及属性的处理。 所以在React内部&#xff0c;会将所有的React元素转换为Fil…

【Linux】详解进程状态之僵尸进程——孤儿进程

目录 &#x1f31e;专栏导读 &#x1f31b;什么是进程 ⭐什么是PCB&#xff1f; &#x1f31b;查看进程 &#x1f31b;如何通过系统调用查看进程PID &#x1f31b;fork &#x1f31e;认识进程状态 &#x1f31b;查看进程状态 &#x1f31b;R状态 ⭐例如&#xff1a…

VMware Workstation及CentOS-7虚机安装

创建新的虚机&#xff1a; 选择安装软件&#xff08;这里选的是桌面版&#xff0c;也可以根据实际情况进行选择&#xff09; 等待检查软件依赖关系 选择安装位置&#xff0c;自主配置分区 ​​​​​​​ 创建一个普通用户 安装完成后重启 点击完成配置&#xff0c;进入登陆界面…

怎么进行流程图制作?用这个工具制作很方便

怎么进行流程图制作&#xff1f;流程图是一种非常有用的工具&#xff0c;可以帮助我们更好地理解和展示各种复杂的业务流程和工作流程。它可以将复杂的过程简化为易于理解的图形和文本&#xff0c;使得人们更容易理解和跟踪整个流程。因此&#xff0c;制作流程图是在日常工作中…

拆解与重构:慕云游首页组件化设计

目录 前言1 项目准备1.1 创建项目目录1.2 搭建项目开发环境 2 项目组件化2.1 在当前环境启动原有项目2.2 顶部组件2.3 幻灯片组件2.3.1 功能实现2.3.2 加载中组件2.3.3 结构和样式2.3.4 使用Ajax获取数据 2.4 机酒自由行组件2.5 拆分余下的css文件 3 项目完善4 源码 前言 在现代…