编程之设计之道

纯属个人这么多年的感悟，和个人习惯有关系。

我作为一个后端开发者（phper），也要学习前端的基础知识，开始入门必须的html、css、javascript、jquery之类的。这几年好像发生了很多变化，更多个的关注后端技术，前端已经忽略了，发现现在很多前端不知道什么的html+jq，一来就vue开发（哈哈哈）。这几年开发自己也接触了前端的一些框架，比如element ui、uniapp等，说白了这些对于我来说还是没有什么难度的（除了该死的css样式影响美观）。

回归正题，我个人喜欢的设计方式，我总结一下（仅作为自己喜欢，毕竟每个人都有自己的习惯）。

1.代码复用性

大家都知道，日常开发过程基本都是重复的功能在不同的地方使用，逻辑稍微调整一下，所有我超级不喜欢相同的功能在每个地方都复杂一份，因为那样维护起来很凌乱，更有甚者不管代码有没有用，全盘复制一个类所有东西过去，导致了后面成了狗屎。

而我，喜欢封装成一下，需要的地方灵活调用一下就行了（甚者有些用静态static方式调用），这样维护方便。

2.按业务分类

一个系统不会是几个小功能的组成，而是很多功能的组成，随着不断的迭代会有更多不同的业务和功能，有人习惯一个文件写完所有的业务，糅杂成几千上万行的代码，甚者我见过有些一个函数就超过2k行的，维护起来特别烦躁，看到下面都不知道上面写的啥。

而我，喜欢按业务按功能区分。比如订单放在订单模块、用户放在用户模块......尽量让人一看就知道我这个函数是用于做什么的，直达目的，而不是各种判断、各种goto。比如我在写前端element的时候也发现一个问题，有人喜欢一个项目就用一个api.js文件，导致多人开发经常冲突，而我喜欢独立接口文件，如user.js、order.js等。

每个js又封装一下，修改一下路径就可以通用（article.js）：

javascript 复制代码

import request from '@/utils/request'

// 定义多个方法
const apiMethods = {
  path: '/article',
  getList(params) {
    return request({
      url: this.path + '/list',
      method: 'get',
      params
    })
  },
  create(data) {
    return request({
      url: this.path + '/save',
      method: 'post',
      data
    })
  },
  update(data) {
    return request({
      url: this.path + '/update',
      method: 'put',
      data
    })
  },
  del(data) {
    return request({
      url: this.path + '/del',
      method: 'delete',
      data
    })
  },
  info(params) {
    return request({
      url: this.path + '/info',
      method: 'get',
      params
    })
  },
};

export default apiMethods;

3.让代码有更强的复用性

前面说过，日常的开发大部分还是在重复的工作，只是在不同的地方做，比如各种数据列表、各种表单操作。那么代码规范一些就可以做到一个模板复用的功能，修改一个请地址就可以达到完成一个功能（省下时间学习不好吗）。就拿前端element开发来说，很多都是列表，而后台返回的格式也是一样的，实际上变动的是接口地址和上面要显示的内容，有些人喜欢每个页面都很个性，比如user.vue里面的变量都是user_xxx,接口user_list等。

而我，喜欢写通用的，比如我上面的article.js，里面封装了curd的方法，入参即可。我引入方式：

javascript 复制代码

<script>
//api作为页面
import api from '@/api/article'
import selectedCategory from '@/components/tools/selectedCategory'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination,
    selectedCategory
  },

  filters: {
    statusFilter(status) {
      const statusMap = {
        '1': 'success',
        '0': 'gray',
        '-1': 'danger'
      }
      return statusMap[status]
    }
  },

  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        limit: 10,
        importance: '',
        title: '',
        type: '',
        sort: ''
      },

      searchForm: {
        keyword: '',
        category_id: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    handleCategorySelect(category) {
      this.searchForm.category_id = category;
    },

    fetchData() {
      this.listLoading = true
      api.getList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    search() {
      this.listQuery =  Object.assign(this.listQuery,this.searchForm)
      this.fetchData();
    },
    del(id){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.del({id:id}).then((res)=>{
          this.fetchData();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
 }
</script>

这样就在其他列表页面修改一下article.js就可以很快了。还可以自己写一个表单填写一下页面特殊的数据，一键生成页面（curd），人家1个小时开发，我2分钟搞到，省下时间我摸鱼不香吗。

4.数据库设计

算了，下回再说吧，有些人特别喜欢text类型的，本来就varchar(255)都可以的描述，非要在表加几个text字段。嗐，不说了，我怼一下先。