索洪波的网站

vuePress-theme-reco 索洪波    2014 - 2022
索洪波的网站 索洪波的网站
主页
文章随笔
  • 知识整理
  • 原创特效
  • 开发日记
  • 前端工具
  • 其他
标签
原创特效
留言板
GitHub
author-avatar

索洪波

69

Article

21

Tag

主页
文章随笔
  • 知识整理
  • 原创特效
  • 开发日记
  • 前端工具
  • 其他
标签
原创特效
留言板
GitHub

中原智慧社区2.0前端开发回顾

vuePress-theme-reco 索洪波    2014 - 2022

中原智慧社区2.0前端开发回顾

索洪波 2019-10-31 开发回顾




开发时间 前端开发者 提交次数
2019年08月06日-2019年10月31日 索洪波、卢玺、张亚亚、王威、宋伟(特别开发:李彬) 1381




# 前期准备

  • 技术选型

    • 物业端(Vue + iview-admin)
    • 业主端(Vue + vant-ui)
  • 制定开发规范

    • 开发规范地址:https://shb190802.github.io/front-end-dev-guide/dist/
  • 使用VSCode

    • 安装eslint、Prettier、Vetur等插件做代码检测和格式化
    • 配置vscode的setting.json
    • 设置统一的代码格式化风格
  • 代码质量管理

    • 做好需求分析

      从收到产品提出的需求之后,先做初步整理。然后和相关人员(提出需求的业务、前后端开发者、测试人员等)进行讨论定稿。保证需求、设计、开发统一

    • 使用GIT管理代码

      1. master、test、dev分支做代码保护,仅支持发起合并请求
      2. 根据teambtion上的任务ID作为分支名,对应开发者
      3. 功能完成之后发起合并
      4. 小步提交
    • 每日代码评审

      每日下班前,小组抽出30分钟左右对代码进行评审。主要是:

      1. 同步大家工作进度
      2. 一起分析遇到的棘手问题
      3. 对可重复利用方法和功能进行封装
      4. 分享今日心得
    • 编写测试代码

      由于项目紧急,此项功能没有执行

  • 其他技术选型

    1. 地图组件(考虑到业主端在微信公众号中使用,地图选择腾讯地图)
    2. 富文本组件(使用quillEditor)
      • markdown编辑器:优势:轻量级;劣势:功能过于简单
      • tinymce :功能强大的编辑器。前期一直使用;测试时候发现,编译之后尺寸太大。弃用
      • quillEditor: 功能丰富,尺寸适中
    3. 打印组件(lodop,功能强大且支持打印设计)




# 开发中

  • 路由懒加载

    为保证首屏加载速度。所有的路由必须使用懒加载

  • 组件设计原则

    1. 低耦合、高内聚
    2. 公共组件
      • 与业务无关性
      • 要有良好的独立性,单一职责
      • 放在在src/components目录下
      • 组件以zy-开头(例:zy-editor)
    3. 业务组件
      • 就近存放在使用目录下
      • 入口清晰,引用方便
    4. 大驼峰命名(参照开发规范)
  1. 所有组件顶部声明组件功能及说明
  • 安全管理

    • 通讯数据加密

      数据加密是模拟https的流程,实现前后的通讯加密处理

      1. 客户端生成RSA的公钥和私钥
      2. 将公钥发给服务端
      3. 服务端生成AES秘钥,使用客户端发送过来的公钥加密后返回给客户端
      4. 之后的前后的通讯都使用AES秘钥进行加解密
      5. 请求体加入时间戳混淆,防止重复提交
    • 权限管理

      对于用户可访问的页面级按钮做到权限管理

      1. 后端在用户登录时候,缓存用户拥有的权限,并将对应权限返回给客户端
      2. 客户端根据用户不同身份和权限,控制对应页面和按钮的显示隐藏
      3. 接口请求期间,带上该按钮对应的按钮ID,服务端二次判断用户是否有该接口的权限
    • 预防XSS攻击

      引用第三方xss库对富文本等使用到的文本进行xss过滤

  • vuex使用

    1. 对应后台消耗较大,前端一次请求基本不变或者变动较少内容,需存入store中(如:常用字典值、省市县信息、物业小区信息等)
    2. 所有存入store中数据的接口请求,必须使用action
    3. 必须使用mapGetters、mapMutations、mapActions
    4. mutation必须全部大写
  • 全局主题配置

    项目中使用less做css预处理,主色、标题、背景、等主题颜色在设置和引用时候,必须使用全局变量

  • 全局config

    在config文件中配置一些全局配置。如:

    1. baseUrl
    2. 文件服务器地址
    3. 全局正则校验
    4. 全局错误提示
  • 全局utils

    1. 常用util挂在在Vue原型上
    2. 不常用util单独引用
  • 合作开发

    1. 代理服务器配置

      由于项目前后端属于多人开发,在联调过程中。需要配置不同接口的不同代理服务地址

      • 增加vue.config.local.js文件,并设置git.ignore
      • vue.config.js中引用local文件,并将配置以local为基准合并
      • 个人开发期间使用的相关配置写在vue.config.local.js中
    2. 接口模式

      由于项目牵扯到登录、加解密、权限管理功能模块。前端增加对应的开发模式设置

      1. nocrypt:请求和响应不加解密
      2. nologin:请求和响应不传用户身份用户身份
      3. nofilter:页面不会根据权限过滤菜单和按钮
  • 数据mock

    在拿到开发需求之后,前后端需要整理出完成功能所需的api接口。 前端静态页面开发完成,后端代码短期无法完成时候,前端需要独立mock数据,完成所有逻辑。等待后端开发完之后,直接联调。

    1. 使用koa搭建mock服务器,配合koa-router和koa-body来解析请求地址和请求体
    2. 使用mockjs,模拟返回值
    3. 修改mock服务端response.status,模拟各种异常情况
  • axios封装

    由于项目中使用的加解密等各种情况,为了不让每个开发者编写很多重复代码。对axios做了一些封装。

    1. 加解密流程封装在拦截器里
    2. 拦截器中请求体混入时间戳
    3. 封装基础的公共配置(如:header等)
  • 添加loading

    所有与后端的交互,除非场景要求静默,否则必须加上loading效果

  • 使用filter

    开发中使用到很多字典值比如:支付方式、性别等。使用全局filter来显示对应文本内容

  • 使用mixin

    相似的页面会存在大量的共同代码,使用mixin能很好的减少代码量和修改难度





# 优化

开发期间,对整体项目进行了一些优化。

  • 使用webpack-bundle-analyzer

    使用webpack的webpack-bundle-analyzer插件,对项目所引用的外部组件进行优化。去掉体积很大,但是功能使用不多的第三方库。(tinymce就是再此步骤被优化)

  • 适配多分辨率

    设计师给出的设计图,移动端为414px、PC端为1920。我们需要将其适配多个尺寸。

    • 移动端

      使用postcss-pxtorem插件,在构建时候,会将px值修改为rem

    • PC端

      PC端没有使用pxtorem。使用先放大后缩放的设计。具体思路都是,将body的宽度设置为1920,然后在对根据网页宽度做缩放。

      1. 使用tranfrom
      2. 使用zoom (由于zoom具有更好的兼容性。本项目使用zoom)
  • 图片压缩

    真的背景等大图片。使用图片压缩。

    1. 使用png-8 替换 png-32/24
    2. 照片类使用jpeg格式并压低质量
    3. 微信端的图片上上传,使用微信图片压缩功能
    4. webp由于兼容性问题,暂时不作考虑
  • 去掉preload、prefetch

    preload和prefetch会在浏览器空闲时间,静默下载其他首页未引用静态资源。增加之后页面的访问体验
    但是静默下载默认会消耗服务端带宽,造成服务器出口带宽压力。此处删除

  • 去掉lodash

    lodash库功能强大,不过客户端仅使用其中很少一部分代码。所以替换使用的工具库,删除lodash

  • 使用echarts.simple 代替权利echarts

    由于我们使用echarts仅仅基础内容,所有引用/echarts/echarts.simple完全满足,单独需求可以自定义引用。

  • 引用moment.min代替直接引用moment

    moment默认自带了国际化,此处不需要。手动修改引用指向/moment/min/moment.min

    • 编译报warn 可以手动在node_modules/moment/min里边新增locale文件夹来取消,不影响使用
  • 使用webpack.DllPlugin来剥离公共库

    将公共库组件剥离出来,加速编译。

    此处优化作用不是特别明显,暂时放弃。

  • 使用happypack加速编译速度

    开发环境正常启动,但是build时报错,官方也没有反馈issue。暂时放弃

  • 添加项目编译时间

    每次build的时候,给项目增加一个当前编译时间。来确定项目是什么时候变异的版本。





# 上线

  • 设置编译模式(env)

    根据不同的生产环境,设置不同的编译模式,不同的编译模式下可以使用不同的请求方式(如:baseUrl,加解密方式等)

  • Jenkins自动发布

    配置Jenkins服务器,自动编译上传最新代码

  • 开启gzip

    1. 服务端针对js、css文件开启gzip压缩功能,但是开启压缩功能会导致服务器内向消耗。
    2. 客户端代码在打包时候,针对js、css文件,使用compression-webpack-plugin打包出一份.gz后缀的文件,服务端配置如果存在对应的gz文件。则不再做压缩操作。直接返回gz文件




# 开发中的一些小分享

  • loading的“点点点”效果(如:进行中。。。)

    经常遇到加载中需要文字后边点点点一直变化的功能。这里使用增加一个类,给类的伪元素加上动画效果。分别在25% 50% 75%处,修改伪元素的content为 。 。。 。。。

  • 大数组合并

    前端缓存了很多请求数据。如:(楼栋房间信息)。之后的接口请求到每个房间的住户、仪表、账单等信息时候。需要将其合并入房间信息的缓存数据中。
    此时,可以将住户、仪表、账单等转换为以houseId为主键的Object。然后遍历房间信息合并这个Object

  • 数据扁平化

    因为房间数据是一颗树节点的格式(楼栋-单元-楼层-房间)这样如果要单独修改一个房间的数据。则需要很多次的遍历。
    此时,将楼栋、单元、楼层、房间分别缓存一个以其ID为主键的Object。直接使用Object[key]来使用

  • 去除生产版本console

    开发中会大量使用的console来打印日志,业务上线后需要出去掉这些。两个思路:

    1. 开发时候就约定好。将console的方法做好封装。
    2. 上线版本,重写一下console相关方法(本项目使用此方法)
  • 使用keepalive.include

    keepalive在vue开发中,被我们大量使用到。但是为了防止不必要的缓存。我们使用include方法。
    实时监听当前显示的tag标签。将路由的name合并为数组赋值给include。这样保证关闭标签后会释放缓存、切换标签时候保留缓存。
    页面组件的name必须和route的name保持一致

  • 浏览器针对input.password默认事件

    浏览器会根据根对类型为password的input标签,默认选择已保存密码。
    本项目的处理方法。打开页面,但是未输入密码时候,密码类型为text。输入之后,再将类型修改为password

  • ios返回时候不会刷新页面

    在业主的微信环境下。用户切换到其他页面之后,再返回回来。会导致页面莫名有些功能不可使用。本项目处理方式为。每次返回,重新loading页面。
    监听popstate。在离开页面时候设置标志位。返回回来之后调用reload

  • 文本长度超出容器滚动

    设计滚动组件内,文本不换行

    mounted之后判断内部是否超过外部宽度,然后根据宽度设置动画时间

    使用animation配合transform来拿完成滚动效果

  • textarea中部分内容不可编辑

    使用contenteditable="true"模拟一个textarea

    将其中不可编辑的内容单独写一个span 设置contenteditable="false"

    监听文本内容,整体文本设置一个正则,如果发现不可修改的位置被删除,那么返回上一次修改内容。