分析某云组态前端运行页面代码设计

1、准备工作

https://www.tlink.io/

随便拉几个组态组件上来。
然后打开chrome的命令行工具。如下：

通过简单阅读代码，原生的写法，用了很多插件，比如jquery。
代码无好坏，合适就好。

2、源码结构

没错，源码没有混淆、甚至有注释

主要就是2个文件，其他都是插件。
一个文件实现UI组件（所有预定义组态组件 以及自定义加载的组态图片）的加载和ui布局。
一个文件实现UI组件与具体的设备注册绑定，后端的通讯（基于websocket）。当后端的消息来了，在onmessage中遍历所有注册的组件，进行更新组件。

一句话：简单粗暴。

3、详细代码

https://www.tlink.io/js/zutai_new/Runindex.js
https://www.tlink.io/js/zutai_new/RunindexBack.js
https://www.tlink.io/js/zutai_new/RunindexMethod.js

如果没法下载了，我存了一份在这里：
https://pandaoffice.lanzouv.com/iZa6T3gs0uve

4、企业版

他们官方也提供示例。
用的新版本的Javascript规范来写的，核心代码还是一样的。

比如这个实例页面：
http://web.tlink.io/zh/assets/yunZutai/yunZutaiRun.html?yunId=Z819DOG50H01FZV123M3&token=&appName=农村供水泵站远程监控&websocketKey=3F2A15030A8A33FED06F9E2BEAE66F4AC9519D1014029D044040C7F2322DC34597AAC9A721C5217637F3EED84D361E1A

增加一些更高级的功能、更多的组件，核心代码逻辑还是一样。
从代码风格和使用的技术来看，写代码的老哥666，代码简单明了，没有依赖前端的打包和包管理，vuejs用到的地方也都是当做插件引入。

具体代码如下：
https://pandaoffice.lanzouv.com/in9lB3gs2egf

仅技术交流分析，请勿抄袭商业公司源码。