前端如何写出高质量的增删改查

        这个问题相信即便初入IT行业的人都能信手拈来，可是怎么写才能问题少，写出高质量的代码，最近刚接手了几个项目，关于修改后是否保留当前页和保留查询条件全是问题，都有重构的想法，为什么开发这么久了，一个简单的功能还有那么多问题？今天就围绕着这个问题写了这篇文章，只要掌握一点方法，就是这么简单。 

// 定义存放查询条件
let queryObj = {
  name: '',
  desc: '',
};
// 每页条数
let pageSize = 10;
// 第几页
let currentPage = 1;

// 查询按钮事件
function query() {
  // 点击查询按钮请先把页码重置第一页
  // 否则会出现之有一条数据，页码传后端个2，
  // 导致页面显示无数据。
  currentPage = 1;
  // 查询数据
  queryObj.name = '输入框的值';
  queryObj.desc = '输入框的值';
  // 有人喜欢以参数形式，很不建议
  // let serchDt = {
  //   name: '输入框的值',
  //   desc: '输入框的值',
  // };
  // getData(serchDt);

  // 调接口获取数据，建议用这种全局变量的形式
  getData();
}
// 获取数据
function getData() {
  let params = {
    ...queryObj,
    pageSize: pageSize,
    current: currentPage,
  };
  // 调接口...
}
// 点击页码事件
function changePage(current) {
  // 当前点击页
  currentPage = current;
  // 调接口获取数据，建议用这种全局变量的形式
  getData();
}
// 改变一页大小
function changePage(page) {
  // 当前点击页
  pageSize = page;
  // 重置第一页
  currentPage = 1;
  // 调接口获取数据，建议用这种全局变量的形式
  getData();
}
// 新增
function add(page) {
  // ...
  // 保存成功后执行
  // 重置第一页
  currentPage = 1;
  // 调接口获取数据，建议用这种全局变量的形式
  getData();
}
//修改
function edit(page) {
  // ...
  // 修改成功后执行
  // 重置第一页
  // 调接口获取数据，建议用这种全局变量的形式
  getData();
}
// 删除
function del(page) {
  // ...
  // 删除成功后执行
  // 重置第一页
  currentPage = 1;
  // 调接口获取数据，建议用这种全局变量的形式
  getData();
}

新增和修改可以合并为一个方法 ，有兴趣的可以研究一下，这里不做说明。 

 总结：

        除了修改和翻页不重置第一页（新增看情况），其他都应该返回第一页，例如第二页只有一条数据，删除后不返回第一页，还差第二页显然是错的。