Men的博客

欢迎光临！

0%

Vue新建接口复杂设计

发表于

如何解决接口数据量过大导致的问题

目前开发的广告系统接口参数非常多，有的地方多到有400多个参数，着对于前端开发是非常的复杂的。
我们应该怎么解决这些问题呢

1.对数据参数进行分包

比如数据如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
{
  budget: null,
  keywords: [],
  name: null,
  operation: "ENABLE",
  bid: null,
  source: null,
  advertiser_id: null,
  brand_info: {
    brand_name_id: null,
    cdp_brand_id: null,
    cdp_brand_name: null,
    ecom_brand_id: null,
    sub_brand_name_ids: [],
    sub_brand_names: [],
    yuntu_category_id: null,
  },
  budget_mode: null,
  auto_extend_traffic: null,
  materials_type: null,
  native_setting: null,
  project_id: null,
  promotion_materials: {
    dynamic_creative_switch: null,
    ulink: null,
    anchor_material_list: [],
    call_to_action_buttons: [],
    component_material_list: [],
    decoration_material: {},
    external_url_field: null,
    external_url_material_list: [],
    external_url_params: null,
    image_material_list: [],
    intelligent_generation: null,
    mini_program_info: {
      params: null,
      url: null,
      app_id: null,
      start_path: null,
    },
  
}}

这是一个广告新建中的部分参数，数据结构嵌套非常严重，我们如何去设计制作呢？
如果我们想制作一个新建页面，然后一个一个的去设置各种输入参数，这样写下来，真个页面的html结构将会非常的复杂
参数的维护也将会非常的麻烦，真个页面的代码量将会变的非常大，
这往往是初级工程师的开发 方式，我们首先想的是进行组件化拆分
那我们应该如何组件化拆分呢，最重要的是按照结构体进行拆分，这将是非常的方便的

组件间数据传递

当我们将这样非常复杂的页面拆分到十几个或者几十个组件的时候，我们又面临着一个更复杂的问题
我们的数据会变得非常的难以维护，我们400多个参数被拆分到这么多组件里面，如果我们将数据来回的传递那么
我们的数据回调变更的业务逻辑将会变得非常的复杂。数据流在多个组件之间来回传递，这会导致我们的工作量变得非常的大，
另一方面是数据传递的同时业务代码也会变得非常复杂，我们如何去解决这些问题呢？
首先我想的是主页面应该是一个controller，这里进行数据的统一分发，其它的页面作为view去管理页面的展示

通过ref方法传递

那么主页面如何去管理view里面的数据呢，主页面如何拿到view里面的数据呢？
我想的第一个方案是给view添加两个开放的方法供controller去调用，
controller通过调用view的init方法去初始化view里面的数据
controller通过调用view的getData方法从view里面拿到数据
这样的方案虽然可以解决数据分发的问题，但是非常的不方便，因为view里面的数据是分散的，
controller需要通过调用view的init方法去初始化view里面的数据，
controller需要通过调用view的getData方法从view里面拿到数据，
如果我们需求需要动态的更新数据，那么controller也需要调用view的setData方法去更新view里面的数据，
这样就会导致controller和view之间耦合的非常严重，
controller和view之间的耦合度越高，那么controller和view之间的维护成本就会越高，

且view之间无法共享数据，导致view之间无法监听数据变化。
这个方案虽然实现了，但是问题非常严重。

方案二用provide和inject去解决

provide和inject能解决组件之间的数据共享，对于目前的场景来讲也是比较切合的，但是我们其实祖孙之前的关系不是太明显
可用价值不高。且也存在一定的问题，可能需要用vuex更方便一些，但是这样会导致数据在vuex中频繁的更新，也是非常的麻烦，这个方案也被否定了

方案三：通过v-model去解决

接下来我又考虑到了v-model，v-model是双向绑定的，我们为什么不使用v-model去管理数据呢？
我们将所有参数在controller中定义，然后通过v-model将数据分发到各个子组件，然后各个子组件通过v-model将数据再回调给controller
这样一方面实现数据的流动，另一方面controller和view之间解耦，controller和view之间没有直接的关系，controller也能动态的去监听数据变化
最后发现这个方案确实是最好的。