一个前端菜鸟眼中的业务

一晃眼2020年过去了，在过去的一年里，收获挺多。我从一个菜鸟变成了一个工作经验++的菜鸟。经过一年的磨练，除了手速见长之外，业务coding能力也提高了不少。说起业务，作为一个程序员，这其实是个老生常谈的话题了。那么在过去的一年里，我所从事的业务是个啥？

什么是BIM？

在聊业务前，先说下我所从事的开发行业--BIM 。因为公司是做BIM咨询 的，所以从入职到现在听到和接触最多的词就是BIM ，那么听了一年的BIM 了，什么是BIM ?

建筑信息模型（Building Information Modelling，BIM）是应用于建筑工程设计、施工、运营、维护等全生命周期过程的一种信息化技术，通过信息化、数字化和参数化的方式建立建筑工程模型，从而实现管理项目全生命周期历程、优化工程项目资源、缩减工程开支、提升工程施工效率等目的。

BIM 主要特点包括：

模型可视化：BIM 软件中的平面图、立面图、3D 模型以及组成模型的基本元素、模块能够以可视化的方式呈现给设计人员、施工人员，方便模型的查看、修改和优化。
参数化：工程模型由大量的元素、构件、模块等构成，而参数的作用是赋予其属性和性能，比如赋予工程模型中一段梁的长度、强度等属性信息，参与主体可对其进行核查、修改或者更新，因此 BIM 参数化的特点为设计提供了较大的便利。
可交互性：BIM 可以通过相关软件接口，接入或者输出必备的模型要素（如数据、信息等），以实现信息共享、软件互通。
全生命周期性：BIM 可应用于建筑工程的整个生命周期内，包括初期的工程设计、中期的建筑施工和后期的运营维护等环节，能够以数据信息的方式呈现包括项目周期、预算、进度、范围、人员使用情况、开支等多方面的项目指标，提升项目透明度。

以上是对BIM的定义和其主要特点，接下来聊一下基于BIM的业务。

什么是业务？

对于一家公司或者部门来说，做的事情有很多，零零散散，把这些小事情慢慢合在一起，慢慢做成一个大的产品，在这个过程中，零碎的小事或者最后的结果都可以看作是业务，因为业务最核心的要素就是业务本身的价值，每一个有价值的部分就是一个业务。举个🌰，模型在BIM开发中占很大的一个比重。对于我来说，开发一个功能较为齐全的模型预览操作组件，对于使用BIM产品的用户来说是极为重要的，模型功能越强大越实用越方便，用户就会愿意去使用，就会在一定程度上让用户产生粘性。在这个过程中，模型就是一个业务线，其商业逻辑就是实用的模型组件-用户愿意使用-平台产品销售，基于这个业务线，我们就值得投入精力，因为这是重点，做的越好越强大，用户就越愿意去使用去付费购买产品，从而带来收入。

如何做好业务？

难道做完一个模型组件就是完成了一个业务开发了么？当然不是，在这里为了能更好的做好这个业务组件，需要保持思考，这里有很多可以优化的验证的地方：

模型组件需要在多终端上使用，怎么才能更好的支持多终端？
平台产品那么多，修改组件不能只靠复制粘贴，如何更高效地管理?
如何更好地支持多模型引擎?
这个开发值得我们投入这么多精力吗？

过去的平台中的模型引擎，使用大多靠大量的复制粘贴去复用，在后期引入DKV 时，代码维护起来会更加的复杂，因此，我整理了平台模型组件的代码:

按照引擎进行分类:

引擎目录分类

梳理调用关系：

模型引擎关系图

为了考虑多终端的使用，还有各个平台终端的兼容性，最后使用最简单高效的<iframe>的形式调用模型组件，这样既可以保证组件的最大的复用，也可以保证无论在什么环境、开发工程环境下都可以做到开箱即用。除此之外，为了减少不必要的参数出现在iframe的url中，前端使用postMessage进行页面间的交互，既保证了兼容性也保证了交互的隐蔽性。

//调用组件、发送数据
  _this.DKViewerSrc = [{
    path: url
  }];
  _this.DKViewerMode = '3D';
  _this.DKViewerSceneColor = _this.DKVIEWER_SCENE_COLOR['3D'];
  document.getElementById('dkv-viewer-iframe')
  .setAttribute('src', '/Content/plug-in/model-engine/DKV/web.html');
  const iframe = document.getElementById('dkv-viewer-iframe');
  iframe.onload = function () {
    const data = JSON.stringify({
      src: _this.DKViewerSrc,
      name: [{ name: _this.fileNameForDialog.split('.')[0] }],
      mode: _this.DKViewerMode,
      color: _this.DKViewerSceneColor
    });
    iframe.contentWindow.postMessage(
      data,
      `${window.location.origin}/Content/plug-in/model-engine/DKV/web.html`
    );
  }
  
  
  //组件接受数据，初始化模型、图纸，通知调用方
  window.addEventListener("message", function (event) {
    const origin = event.origin || event.originalEvent.origin;
    if (origin !== window.location.origin) {
      return;
    }
    try {
      const {
        src,
        mode,
        color,
        name
      } = JSON.parse(event.data);
      
      if (viewer) {
        uninstall();
      }
      
      DKViewerSrc = src;
      DKViewerMode = mode;
      DKViewerSceneColor = color;
      DKViewerModelName = name;
      
      document.title = titleFactory();
      
      initDKV();
      
    }
    catch (e) {
      // console.error(e)
    }
    
  }, false);
  
  function initDKV() {
    window.__DKViewerInstance = viewer = new DKViewer({
      elem: "model-viewer",
      path: DKViewerSrc,
      name: DKViewerModelName,
      viewerMode: DKViewerMode,
      toolBar: toolBarFactory(),
    });
    
    window.__DKViewerInstance.uninstall = uninstall;
    
    //初始化场景
    viewer.initialize(() => {
      //加载模型
      viewer.loadModels(() => {
        //设置自动将浅色图纸转为深色图纸
        viewer.setSwapBlackAndWhite(true)
        //设置鼠标滚轮方向为正向
        viewer.setReverseZoomDirection();
        //关闭模型阴影
        viewer.setGroundShadow();
        //设置场景背景颜色和透明度
        viewer.setBackgroundColor(DKViewerSceneColor);
        //回归默认视角位置
        viewer.setCurrentView();
        //自使用大小
        viewer.fitToView();
        //添加工具栏
        viewer.addTool();
        //通知调用方
        parent.postMessage({loadSuccess: true}, "*")
      });
    });
  }

如此一来，算是完善了模型业务的基础和开发管理，大大地提高组件复用和开发效率。

进一步的去思考，作为前端研发，你能想到的可以更多：

工程化研发套件
模型组件的扩展
结合后端同学，搭建模型中台

所以，我们真的有想过业务是什么吗？有为业务思考过什么吗？有了你，业务会有什么不同吗？写业务代码永远不会只是coding，一定要有思想地coding，这样才算是真正地写业务代码。

以上只是我在开发中的对业务的理解，对业务开发的理解，可能有理解的偏差，但始终是想着如何做的更快更好，转换为更多的money 。

PS：随便写写，想到啥就写啥。