web 前端开发笔记

1、 开发流程

• 本地建立项目
• gitlab 仓库建立项目
• 本地 git 跟踪远程项目的 master 分支
• 建立 develop 分支
• 编写代码，提交到 远程 develop 分支
• 项目测试完毕，本地 master 合并本地 develop 分支
• 本地 master 分支修改测试 api 域名为正式 api 域名
• 本地 master 切出 pre 分支
• 提交本地 pre 分支到远程 pre 分支
• 远程 pre 分支请求远程 master pull
• 远程 master 合并完代码，编译完成，正式版就能够测试了
• 正式上线，须要相应的平台接入，一个项目周期就已经结束了
• 下一个周期就是版本的迭代以及bug的修复了

2、 代码优化

一、用 vue 进行前端开发，怎么作到函数式编程呢？

每次作完项目，都会发现本身在代码的解耦，接口的封装方面作的还不够，后期一定会屡次进行优化，在优化的过程当中，就想到，如何把零散的代码，编程总体性更强的代码，令人一看到就知道手脚在哪里。在这里个人总结是，按功能点进行函数的封装，一个大点是一个函数，这个大点里面又有不少小点，能够把函数赋值给变量，进行使用，这样就不用每次都跳来跳去了，维护起来也更方便快捷。

二、vue-cli3 中静态文件怎么处理？

用 vue-cli2 的人习惯把静态文件放 static 或者 asset 里，放 asset 里，会被打包，不推荐，可是 vue-cli3 没有 static 文件，怎么办呢？个人答案是，放在 public 目录下，由于这个文件是不会被打包压缩的，必定程度上能够提升编译效率

三、代码抽离

把通用功能抽离到 utils 目录，把通用 api 进行二次封装，放到 api 文件里，以 export 的方式导出，须要的时候再引入，会使代码看起来简洁不少，也简化了对应页面的代码量，维护起来更是驾轻就熟了，至于性能方面，对首屏加载速度仍是有必定提升效果的。

组件抽离，核心思想，只抽离ui，业务逻辑仍是在引用处

多个 vue 组件引用同一个组件，且类似度高的，用 render 进行合并，并更新数据

html

尽可能的减小页面的节点，能够优化网页的加载速度，因此应该考虑的思路是以最少的节点，写最多的页面。同时避免过多的操做 DOM，尽可能以数据驱动页面。

3、 项目中遇到的问题总结

一、给遍历出来的 input 绑定 v-model 引起的思考

给一个 input 绑定 v-model，咱们知道是在 data 中加一个新的属性 x，而后 v-model = x，就能够实现双向数据绑定了，可是若是我有一个 input 列表呢？显然不能这么干了，这个时候，能够在 data 中添加一个数组属性 list：[]，根据列表长度遍历数组，添加占位元素，v-model = list[index]，就能够实现 input 列表的双向数据绑定了。经过更新 list[index] 的 value 属性，实现数据的修改。可是这里有个问题，value 属性本来是不存在 data[list[index] 里面的，在 vue 的实现中，不在 data 里的属性，就没有加入到 watcher 里，那咱们怎么去监听这个新的值呢？答案是，给 list 添加新的值，也就是往 data 的 list 里添加新的值，这样 vue 就会把该值加入到监听列表，监听 list[index] 的变化。

二、对象没有深拷贝，致使添加选项受影响

有这么一个需求，给题目添加选项，每一个题型的原始数据是一个对象，对象里面有 option 属性，是一个数组，opion 里面包含了多个选项，按常理说，咱们只要给一个 index，一个 value，就能够给 option 赋值了。可是因为对象没有深拷贝的缘由，致使新添加的选项收到了影响，因此，这里想说明的是，对原始数据的引用，最好使用深拷贝，避免原始数据受到操做的影响。