前端基础建设要考虑哪些方面_0.1

水木青华
145 阅读5分钟

前端项目的架构设计要考虑哪些方面

招聘前端小伙伴一起做前端基础建设，如果你和我一样热爱这个项目，请投递简历到2758570254@qq.com

评估开发时间的时候需要考虑哪些方面？才能给到靠谱的解决方案，以互联网医疗为例，我们可以从这几个方面去思考:

浅层需求

这方面的需求主要来自业务和技术总监

  • 老系统（如：云检系统、云诊系统）的支持（提效）
  • 项目的治理和快速开发，平台有很多大客户定制开发，定制开发的内容简单、重复，开发过程需要简化
  • 角色支撑，系统将支持不同角色的不同权限，跨系统的角色设计

深层需求

进一步拆解

  • 实现组件复用（组件库，组件平台）
  • 简化配置
  • 版本回退
  • 统计闭环
  • 渠道管理
  • 灵活发布
  • 系统治理

确定项目范围

  • B端和编辑器，用做作品的编辑和发布
  • H5/小程序 SSR（性能分析）
  • 管理后台，前端分析

模块的拆解

  • 编辑器的开发（所见即所得）
  • 业务组件库（独立的第三方项目，可在画布和C端相互引用，实现复用）
  • 统计服务，自定义数据统计（输入作品，输出作品的数据统计并进行数据分析汇总导出结果，指导运营策略）
  • devOps脚手架，实现项目的持续的集成和发布

技术方案设计

  • B端(编辑器) + B端的server端
  • H5 SSR
  • 后台 + 后台的server端
  • 统计服务（openAPI）
  • 组件库（组件平台）
  • 脚手架（创建项目、发布项目）
  • TODO 技术架构图

数据结构

  • 结构设计,通过vnode规范来设计,节省沟通、学习成本,符合业界规范，减少时间浪费;组件用数组，不用对象，数组有序
  • 数据同步,通过Vuex表示当前选择的组件
  • 图层面板怎么设计，是computed计算出来的索引,而不是一个单独的数据
{
    activity: {
        title: '',
        setting: '',
        Props: '',
        components: [
            {
                id:'',
                name: '',
                tag: '',
                attrs: [],
                children:[
                    '文本'
                ]
            }
        ],
        activeComponent:''// 当前选中的组件
    }
}

数据流转

通过json实现数据的流转

  • 编辑器 > 编辑器server > DB
  • DB > SSR H5
  • admin后台 > admin server > DB

产出

  • 技术方案设计文档 会遇到的问题有哪些:
  1. 没有规范可依
  2. 没有思路

目录:

  1. 业务需求
  2. 整体架构设计
  3. 项目模块的拆分和关系图
  4. 特殊模块说明（比如:组件库、统计服务）
  5. 核心数据结构设计
  6. 数据流转关系
  7. 扩展性论证（组件、数据结构、编辑器功能、页面配置）
  8. 开发提效（脚手架、开发平台）
  9. 运维保障（线上服务、安全、监控报警）

基础架构（脚手架）开发，前端工程化

  • 为什么要设计脚手架
  1. 所有的项目都是通过项目脚手架来创建
  2. 通过工具实现前端自动化，是提高研发效率的主要抓手
  3. 基础架构团队专门维护
  • 必要性
  1. 提升前端研发效率（多团队，通用代码模板的初始化）
  2. git操作自动化，节约开发时间和麻烦
  3. 项目构建和发布
  • 价值
  1. 研发过程自动化
  2. 研发过程标准化
  3. 研发过程数据化，优化流程的抓手
  • 问题:自动化构建工具不能完全满足我们的要求（jenkins）
  1. 无法照顾到项目的本地开发
  2. jenkins插件是通过java语言开发
  3. 前端扩展性的功能相对简单
  • 脚手架原理
  1. 脚手架是操作系统客户端 vue : 主命令 command : create param: vue-test-app --option : 选项 -: 选项参数

终端输入 > 在环境变量中找到vue命令 > 链接到vue.js文件 > node解析vue.js > vue.js 解析command > vue.js 执行command

问题：

  1. vue-cli全局安装后添加一个命令为vue 因为在node的packge.json中绑定了路径，在bin中都为可执行命令，在vue-cli的packge.json当中绑定了vue命令和vueJs

  2. 全局安装vue-cli，发生了什么 node会将包下载到node_modules里面,解析包的bin里面解析packge.json,然后在node的bin目录配置一个软链接

  3. vue命令为什么会执行node 在执行vue命令的时候，在环境变量$PATH中找到vue命令有没有注册，链接到vue.js文件，在vue.js 文件上添加了环境变量，指定用node执行，在环境变量中去找到node命令，执行

  • 本质
  1. 脚手架是操作系统上的一个客户端 node是操作系统，通过命令行和参数执行 node编写软链接，会连接到包的js文件（可执行文件）
  • 脚手架开发
  1. 分包:
  2. 注册命令:
  3. 参数解析:
  4. 帮助文档:
  5. 命令行交互:
  6. 日志打印:
  7. 变色:
  8. 通信，文件交付:
  • 实操
  1. 创建文件夹
  2. 初始化 npm init
  3. 创建目录bin, 里面添加文件 index.js
  4. 添加环境变量
  5. 修改packge.json,绑定命令
  6. 登陆npm login, 通过npm publish 发布(npm怎么创建私库)
  7. 通过npm i xxx 安装
  • 注意事项
  1. 实现脚手架开发的全流程
  2. lerna多Package管理的实现原理
avatar
文章
阅读
粉丝