卓信数据-文档中心

七. 用户接口层（前端)

7.1 概述

前端是一个没有准确定义的俗称。暂将提供用户UI，数据展现，与用户进行交互的层面，称为统称为用户接口层（前端)。包括PC端，移动端原生APP与H5页面。

我们说前端时，默认的背景是前后端分离，因而，JSP,freemarker,velocity,thymeleaf 这类后端生成HTMl的技术不在讨论之列。这些可以用于在后端生成XML、json,代码等，但已不作为前端交互技术使用。

运行在服务器端的NodeJs ，也算是前端的范围。因为部分场景下要用服务器上的JS渲染，或者由NodeJS作为前后端的中间层进行服务调用的协调转换。

7.2 开发语言

前端的基础，除原生APP外，Web UI 的开发基础肯定是 html ,javascript ,Css 。这三类的基础也不在我们的讨论范围。

当前情况下的前端，主要开发语言是指Nodejs 下的Javascript，准确的讲是ECMAScript，起点是 ECMAScript 2015版(ES6)在新窗口打开,另一个可选的开发语言为 TypeScript, 但考虑到切换的学习成本，不要求使用TypeScript。

传统的前端开发事实上的标准是 Jquery，本指南中不予讨论。

  • 在当前的背景下， PC端的浏览器兼容性起点为 windows7下的IE11，新的产品，项目可以不再考虑更低版本的IE兼容性问题。

  • NodeJ的版本迭代速度很快，正常开发应当使用在维护期内的偶数版本，没必要安装奇数版本，如2019年12年可用10，12 版本

7.3 语言编程规范

html ,javascript ,Css，一般的写法，都是符合通用的性的原则 ，如 可维护性、可读性、一致性等，我们历史上没有制定过较完整的规范。也没有必要一定自己制定，大厂的开源项目，内部规范已经足够我们学习，参考。

我们约定前端的语言编程规范参照腾讯前端团队整理的规范： https://alloyteam.github.io/CodeGuide/在新窗口打开 。

因为我们统一采用 VUE在新窗口打开 作为前端开发框架，对于VUE组件的写法与布局，也有一套相对约定俗成的规则 ，应当统一遵守：https://cn.vuejs.org/v2/style-guide/在新窗口打开

7.4.2 前端开发的增强方向

从卓信的产品竞争力、实施效果等方面的要求，我们要增强的是两个方面：

  • 1.UI 设计能力提升

    UI设计能力，表现的结果，就是用户对于一个UI交互易于接受和上手使用，同时符合当下大多数的审美习惯。进一步，如果能有部分酷炫的效果，提供超出期望值的视觉效果则能锦上添花。

    UI的审美与创新，往往涉及到艺术，人文，政治方面的问题，是难以完成进行理性讨论的。而在工程实践方面，对于UI交互在一定时期内都有相对较广泛接受的一套习惯风格（典型的，MacOS的风格，windows 的操作习惯风格曾经广受推崇，而后互联网特别是移动互联网的兴起，在移动端UI上形成多了多套设计风格并影响到PC端），而产品与项目中，必须将一套设计语言、风格、规范一以贯之。企业应用一般也不太接受标新立异的设计风格，而要求是主流、协调、整齐、统一、规范。

    因而对于UI设计能力的提升，首先是对当前主要场景，进行整理，结合当前的技术实现路线，形成一系列的参考规范和模式（包括审美上的标准模式），在各产品与项目中一以贯之，这样可避免绝大多数的低级问题。创新型的，酷炫形的设计交给产品经验或设计人员，在形成较通用的模式后，再进行推广命名用。因而，UI设计能力的提升，后续在于整理/共享/复用前端的UI设计规范。

  • 2.前端开发效率提升

    后端开发涉及到的技术面较广，但项目开发过程中，耗时最多，调整最多的肯定是在前端UI。提升前端开发效率，必须在统一技术框架的基础上，走组件化开发、自动化协助的线路。

    组件化的开发，从低到高，至少包括三个层次：

    • 低层代码的模块化，通过ES标准的模块系统，npm 的包管理，使JS库的依赖调用模块化重用，这一层一般是纯js库。

    • 使用相对丰富、统一的UI组件库进行开发，并可以对UI组件库中不完善的，缺失的，采用统一的第三方解决方案或者自行开发组件的方式进行补充，每个UI组件应当是模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元。

    • 项目开发中的模块化划分与组件化复用，即在统一的规则下，分成不同的模块分别开发，其成果特别是多处用到的类似界面，应当做组件化封装以重用。

7.4 前端开发框架

7.4.1 统一VUE前端框架在新窗口打开

  • 我们统一，新项目的Web前端开发框架为VUE2.x，并以此为基础，逐步推进自有组件的积累

  • 待VUE3 版本的第二个修订版发布，测试之后，再考虑升级Vue3

7.4.2 前端生态圈相关框架与工具

严格来说， VUE在新窗口打开 不能算是一个框架(Framework),而有点类似于 Jquery一样的 Library。核心实现的是 model/view 的双向绑定处理逻辑，但前端涉及到的东西还有很多，需要根据搭配生态圈的工具,特别是UI组件库。

根据近一年来的VUE项目实践经验，我们约定以下的库组合：

  • 核心：

  • UI组件

    我们建议引入主要UI组件的时候锁定版本，以免将来相关组件升级时受到非兼容性更新的影响。

  • 相关支撑工具

  • 约定与强调：

    • 强调：不得直接手写css，维扩修改起来太困难了
    • 推荐：UI组件中的样式，控制其应用范围，以免对全局样式造成污染
    • 推荐：使用ES6以上版本的JS语言规范。后续升级到VUE3之后，推荐使用TypeScript标准
    • 推荐：非特殊原因，不得在项目中引入png、jpg等图片，尽量使用css样式来或者iconfont在新窗口打开来替换（iconfont上没有的图案，可协调公司美工参考官网指南设计统一矢量图）

7.5 服务器与部署

前端工程的生产环境发布，允许两个选项，不建议将前端工程还通过tomcat 打war 包的方式进行发布：

  • 使用nginx 基础镜像发布，这是首选方式。

  • 使用nodejs 运行时基础镜像以支持服务器端渲染

  • 将用于宣传，专题的资源尽可能静态化，并用专门的静态内容服务发布，前端工程中不应当包括与数据相关静态资源（如 卷烟规格图片；专题图片与视频）

7.6 常见问题的处理约定

  • 模块化划分，按需加载。一般应用都是要分模块的，不要将前端整体的一次性加载到客户端，首屏展现时间会太长，应当按需加载。（按需引入的方式主要借助babel-plugin-component插件实现，详情请参考官方指南按需引入在新窗口打开，或者在使用Vue-cli@3添加Element-ui的时候，选择'Import on demand'

  • 数据可视化，如项目中没有较多的固定格式报表，则不使用报表工具。如报表制造工作量较大，我们的首选报表工具为 帆软 FineReport。

  • 不再推荐客户开发原生APP，因为分发，升级，特别是IOS下的证书及上架审核等问题。除非进行通用型的APP开发（面向所有大众用户而不是特定企业用户群体的。

  • 应当同一套代码，同时支持企业微信与钉钉上的H5应用。如有本地功能调用的功能（如拍照），则应当有一个通用的封闭屏蔽两者JS的区别,客户端不应当直接绑定到一个平台上。

上次更新:
编辑者: 李贤伟