某项目总结

2018-06-25  本文已影响146人  於風聽語

总结项目中遇到的一些问题和解决思路，并不一定有好的解决方式，有些只是纯挖坑，还没找到解决方法

Ajax

问题：

解决方式一：

使用 axios 封装 ajax，并作为 vue 的插件，方便引用（比如 this.$ajax 或者 this.$http）

简单调用示例：

this.$ajax('getUserList', data).then((res) => {
    this.userList = res.data.list
  })

API 抽离

为什么要抽离:

将 API 按模块划分，写明地址和请求类型，举个栗子:

└─api
  ├─common.js
  ├─index.js
  └─user.js


export default {
  login: {
    type: 'POST',
    name: '/api/common/login'
  }
}

export default {
  getUserList: {
    type: 'GET',
    name: '/api/user/getUserList'
  }
}

// Common
import common from './common'

// module
import user from './user'

export default {
  baseURL: '/index.php', // 前缀
  common,
  user
}

API 调用

数据获取可以单独封装、维护，需要返回 Promise，方便管理（Promise.all）

代码规范

Programs are meant to be read by humans and only incidentally for computers to execute.

可以看看 《编写可维护的javascript》这本书，挺不错的

代码尽量按模块功能拆分，方便维护

脏代码必然存在，尽量丢到一起

注释，还是加上吧（虽然我也经常忘记写注释...）

后台这种项目基本是永久维护的，不同的人有不同的编码习惯，接手的人多了，风格也就多了

项目中个人还是倾向使用 ESLint，虽然开始用起来，可能大部分错误都是代码格式错误，但是，基本用一段时间就能很快适应

if

使用 === 代替 == 判断数据类型。
如果自己在代码中对于数据类型都不能十分确定，这个代码写的就很有问题。就像改 bug 一样，为什么会出现这个 bug、为什么这样解决、影响范围有哪些都不清楚，往往会改出其他 bug

if 嵌套不能太深：

let、const

消除使用 var 声明变量

CSS 部分

做后台管理后，已经基本不写， 也基本不用写 css 了。
虽然 iView 框架已有内置的许多组件样式、栅格化这些基本的都有。但是实际用起来，感觉还是少了一些什么。比如布局、间距调整
然后问题便来了，额外的样式怎么处理。

iView 和 Bootstrap 样式混合

...
import iView from 'iview'
import 'iview/dist/styles/iview.css'

import {Select, Option} from 'element-ui'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

import 'font-awesome/css/font-awesome.min.css'
import './assets/css/style.css'
...

看到 iView 和 Bootstrap 的样式混在一起，还是很懵逼的，而且还写了一些自定义的样式 style.css = =
那么问题来了：

iView 和 Bootstrap 的 normalize.css 版本不一致，其他地方对于某个元素默认设置还是有些出入的，引入会有隐患问题。

瞄了一眼 style.css：INSPINIA - Responsive Admin Theme，一个基于 Bootstrap 3 的框架

感觉这么多混在一起，很乱，如何让接手的人知道如何复用已有的样式是个问题

scoped

当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。
如果希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，可以使用 >>> 操作符：

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。

<style lang="scss" scoped>
 /deep/ .a .b { /* ... */ }
</style>

数据流

目前许多公共数据是放在 Storage 里面的，那么：

公共数据为了节流，需要避免重复请求，可以存在本地。但是，如果存在本地，则需过期清除数据。那么，何时过期是个很麻烦的问题。就拿公共配置数据来说，配置数据何时被修改，是不可控、不可预期的。设置半天过期，那么，用户拿到的就有可能是旧的数据，会产生错误数据。所以，不如每次登录后，拉取服务端数据一次（重复请求，读取本地数据），存起来，这样请求量也不大，对服务端压力也不大。

vue-router

比起 iframe 的模式，vue-router 还是轻便很多。router 多起来之后，维护也是个问题

路由按模块拆分

路由按模块拆分，建议懒加载的形式（目前 octet 已经是这样了）
每个子节点路由，可以新建一个 index.vue 文件，这样，便可以在这个节点的生命周期里统一做一些操作，比如获取这个节点所需要的公共数据。

component: {template: '<router-view></router-view>'},
children: [...]

转成：

component: () => import('@/views/user'),
children: [...]

vue-router 页面刷新

路由不变的情况下，如何刷新页面？

其实这几种我觉得都不是很好，不过也没找到更合适的方式

router 命名

菜单使用 router 配置数据显示，比如 icon、name

路由权限控制

浮点数计算

数字计算还是比较危险的操作，可以使用可靠的开源库，避免前端计算所产生数据误差。

表格打印

之前的打印：

let oldstr = $("body").html(); // 保存原始页面的 body 内容

$("body").html($('#print-table').html()); // 整个 body 主体换成需要打印的表格

$("body").css("height", "auto"); 
window.print(); // 打印
$("body").html(oldstr); // 原始页面的 body 内容重新塞回去

如果直接打印，不会出现什么问题。但是如果取消打印，则会报错（只允许一个 babel-polyfill 实例，估计旧内容导入了 js 代码冲突了），再点击打印则无效。

可以新建打印页面，只插入需要打印的表格数据、表格样式，以及打印逻辑，这样便不会报错：

    // 页面的 dom 以及脚本
    const html = `
        <button id="J_Print">打印</button>
        <script type="text/javascript">
            ...
        <\/script>
    `

    // 打印页面的样式
    const style = `
         <style type="text/css">
            ...
        <\/style>
    `

const $tableSheet = $(e.currentTarget).siblings('.table-sheet') // 获取需要打印的表格
const printWindow = window.open('', '') // 新开标签页

printWindow.document.write($tableSheet.html() + html + style) // 塞入表格、html 、style
printWindow.document.close()
printWindow.focus()
printWindow.printSheet() // 调用打印页面的打印方法

缺少日期格式化

不可避免的，页面上一个时间显示需要格式化处理，可以考虑 moment 简单封装。公共方法还是按类型拆分开来维护比较好，一个 common.js 太难找了

Cascader 、Tree 数据处理

这两个组件用起来还是不怎么方便的（其实感觉都不是特别好用，使用 Select 组件的 remote 模式，有默认值，点击再点开，query 会读取 lastQuery，此时 lastQuery 是空，导致被清空.....），因为数据需要转换，神烦：

交互

每个交互都可能会带来许多额外的代码

Loading

返回列表是否刷新

表单提交错误提示

上一篇 下一篇

猜你喜欢

热点阅读