提高前端和后端的对接效率

发表于 更新于 分类于

一、基本

  • 模块化适用

    • 对象创建

    • model模板

二、后端交互

  • 和后端的交互就是数据的变换过程：收集、传输、展示 （目前只有少量处理数据）

三、数据、操作的验证：触发-反馈

  1. 监听事件

  2. 判断

    • 页面预先保存有数据，直接用JS判断

    • 需要后端实时判断

  3. 更改DOM

  4. 更改JS数据

四、入手

  1. 从功能入手，判断交互接口有哪些：

    • 后端需要提供哪些接口；

    • 前端需要提供哪些数据；

  2. 把数据获取都改为调用方法：

    • 直接取变量也可以；

    • 在不知道如果组织变量、不清楚变量数据结构是否合理时，先写成方法更好；

  3. 正确获取数据：

    • 数据格式
      JS原始类型 - PHP数据类型

      • 原始类型 –> 原始类型
      • 数组 –> 索引数组
      • 对象 –> 关联数组
      • dataType: json

    • 实时监听

      • $(dom).trigger();
      • Array.push
      • Array.splice
      • Array.indexOf

    • 数据操作

      • 类型转换: Number()、parseInt
      • 默认值: ||
      • 遍历:
        • Array.forEach(function(value, index) {});
        • $.each(array, function(index, value) {});
        • for (var i = 0; i < Array.length; i++) {}

    • DOM操作:

      • 隐藏、显示
      • 动画
      • style更改

    • 定时器

      • setTimeout
      • setInterval
      • clearInterval

  4. 正确展示数据:

    • 更新局部数据
    • 更新整个dom模块的数据（重新调用生成这个dom的方法）

  5. 数据、用户操作的检查:

    • 同步

      1
      2
      if (check() !== true) return;
      do();

    • 异步

      1
      2
      ajax:
      	success: function() { do(); }

五、总结

1、多看书
2、多练习
3、多优化