从-VantComponent-谈-小程序维护

jiezi

6 年前

在开发小程序的时候，我们总是期望用以往的技术规范和语法特点来书写当前的小程序，所以才会有各色的小程序框架，例如 mpvue、taro 等这些编译型框架。当然这些框架本身对于新开发的项目是有所帮助。而对于老项目，我们又想要利用 vue 的语法特性进行维护，又该如何呢？
在此我研究了一下 youzan 的 vant-weapp。而发现该项目中的组件是如此编写的。

import {VantComponent} from '../common/component';

VantComponent({mixins: [],
  props: {
    name: String,
    size: String
  },
  // 可以使用 watch 来监控 props 变化
  // 其实就是把 properties 中的 observer 提取出来
  watch: {name(newVal) {...},
    // 可以直接使用字符串 代替函数调用
    size: 'changeSize'
  },
  // 使用计算属性 来 获取数据，可以在 wxml 直接使用
  computed: {bigSize() {return this.data.size + 100}
  }，data: {size: 0},
  methods: {onClick() {this.$emit('click');
    },
    changeSize(size) {
       // 使用 set
       this.set(size)
    }
  },

  // 对应小程序组件 created 周期
  beforeCreate() {},

  // 对应小程序组件 attached 周期
  created() {},

  // 对应小程序组件 ready 周期
  mounted() {},

  // 对应小程序组件  detached 周期
  destroyed: {}});

居然发现该组件写法整体上类似于 Vue 语法。而本身却没有任何编译。看来问题是出在了导入的 VantComponet 这个方法上。下面我们开始详细介绍一下如何利用 VantComponet 来对老项目进行维护。

小程序组件写法这里就不再介绍。这里我们给出利用 VantComponent 写 Page 的代码风格。

import {VantComponent} from '../common/component'; 

VantComponent({mixins: [],
  props: {
    a: String,
    b: Number
  },
  // 在页面这里 watch 基本上是没有作用了，因为只做了 props 变化的 watch，page 不会出现 props 变化
  // 后面会详细说明为何
  watch：{},
  // 计算属性仍旧可用
  computed: {d() {return c++}
  },
  methods: {onLoad() {}},
  created() {},
  // 其他组件生命周期
})

这里你可能感到疑惑，VantComponet 不是对组件 Component 生效的吗？怎么会对页面 Page 生效呢。事实上，我们是可以使用组件来构造小程序页面的。
在官方文档中，我们可以看到使用 Component 构造器构造页面
事实上，小程序的页面也可以视为自定义组件。因而，页面也可以使用 Component 构造器构造，拥有与普通组件一样的定义段与实例方法。代码编写如下:

Component({
    // 可以使用组件的 behaviors 机制, 虽然 React 觉得 mixins 并不是一个很好的方案
    // 但是在某种程度该方案的确可以复用相同的逻辑代码
    behaviors: [myBehavior],
   
    // 对应于 page 的 options，与此本身是有类型的，而从 options 取得数据均为 string 类型
    // 访问 页面 /pages/index/index?paramA=123&paramB=xyz 
    // 如果声明有属性 paramA 或 paramB，则它们会被赋值为 123 或 xyz，而不是 string 类型
    properties: {
        paramA: Number,
        paramB: String,
    },
    methods: {
        // onLoad 不需要 option
        // 但是页面级别的生命周期却只能写道 methods 中来
        onLoad() {
            this.data.paramA // 页面参数 paramA 的值 123
            this.data.paramB // 页面参数 paramB 的值’xyz’}
    }

})

那么组件的生命周期和页面的生命周期又是怎么对应的呢。经过一番测试，得出结果为：(为了简便。只会列出重要的的生命周期)

// 组件实例被创建 到 组件实例进入页面节点树
component created -> component attched -> 
// 页面页面加载 到  组件在视图层布局完成
page onLoad -> component ready -> 
// 页面卸载 到 组件实例被从页面节点树移除
page OnUnload -> component detached

当然我们重点不是在 onload 和 onunload 中间的状态，因为中间状态的时候，我们可以在页面中使用页面生命周期来操作更好。
某些时候我们的一些初始化代码不应该放在 onload 里面，我们可以考虑放在 component create 进行操作，甚至可以利用 behaviors 来复用初始化代码。
某种方面来说，如果不需要 Vue 风格，我们在老项目中直接利用 Component 代替 Page 也不失为一个不错的维护方案。毕竟官方标准，不用担心其他一系列后续问题。

此时，我们对 VantComponent 开始进行解析

// 赋值，根据 map 的 key 和 value 来进行操作
function mapKeys(source: object, target: object, map: object) {Object.keys(map).forEach(key => {if (source[key]) {// 目标对象 的 map[key] 对应 源数据对象的 key
      target[map[key]] = source[key];
    }
  });
}

// ts 代码，也就是 泛型
function VantComponent<Data, Props, Watch, Methods, Computed>(
  vantOptions: VantComponentOptions<
    Data,
    Props,
    Watch,
    Methods,
    Computed,
    CombinedComponentInstance<Data, Props, Watch, Methods, Computed>
  > = {}): void {const options: any = {};
  // 用 function 来拷贝 新的数据，也就是我们可以用的 Vue 风格
  mapKeys(vantOptions, options, {
    data: 'data',
    props: 'properties',
    mixins: 'behaviors',
    methods: 'methods',
    beforeCreate: 'created',
    created: 'attached',
    mounted: 'ready',
    relations: 'relations',
    destroyed: 'detached',
    classes: 'externalClasses'
  });

  // 对组件间关系进行编辑，但是 page 不需要，可以删除
  const {relation} = vantOptions;
  if (relation) {options.relations = Object.assign(options.relations || {}, {[`../${relation.name}/index`]: relation
    });
  }

  // 对组件默认添加 externalClasses，但是 page 不需要，可以删除
  // add default externalClasses
  options.externalClasses = options.externalClasses || [];
  options.externalClasses.push('custom-class');

  // 对组件默认添加 basic，封装了 $emit 和小程序节点查询方法，可以删除
  // add default behaviors
  options.behaviors = options.behaviors || [];
  options.behaviors.push(basic);

  // map field to form-field behavior
  // 默认添加 内置 behavior  wx://form-field
  // 它使得这个自定义组件有类似于表单控件的行为。// 可以研究下文给出的 内置 behaviors
  if (vantOptions.field) {options.behaviors.push('wx://form-field');
  }

  // add default options
  // 添加组件默认配置，多 slot
  options.options = {
    multipleSlots: true,// 在组件定义时的选项中启用多 slot 支持
    // 如果这个 Component 构造器用于构造页面，则默认值为 shared
    // 组件的 apply-shared，可以研究下文给出的 组件样式隔离
    addGlobalClass: true 
  };

  // 监控 vantOptions
  observe(vantOptions, options);

  // 把当前重新配置的 options 放入 Component
  Component(options);
}

内置 behaviors
组件样式隔离

刚刚我们谈到 basic behaviors，代码如下所示

export const basic = Behavior({
  methods: {
    // 调用 $emit 组件 实际上是使用了 triggerEvent
    $emit() {this.triggerEvent.apply(this, arguments);
    },

    // 封装 程序节点查询
    getRect(selector: string, all: boolean) {
      return new Promise(resolve => {wx.createSelectorQuery()
          .in(this)[all ? 'selectAll' : 'select'](selector)
          .boundingClientRect(rect => {if (all && Array.isArray(rect) && rect.length) {resolve(rect);
            }

            if (!all && rect) {resolve(rect);
            }
          })
          .exec();});
    }
  }
});

小程序 watch 和 computed 的代码解析

export function observe(vantOptions, options) {
  // 从传入的 option 中得到 watch computed  
  const {watch, computed} = vantOptions;

  // 添加  behavior
  options.behaviors.push(behavior);

  /// 如果有 watch 对象
  if (watch) {const props = options.properties || {};
    // 例如: 
    // props: {
    //   a: String
    // },
    // watch: {//   a(val) {
    //     // 每次 val 变化时候打印
    //     consol.log(val)
    //   }
    } 
    Object.keys(watch).forEach(key => {
      
      // watch 只会对 prop 中的数据进行 监视
      if (key in props) {let prop = props[key];
        if (prop === null || !('type' in prop)) {prop = { type: prop};
        }
        // prop 的 observer 被 watch 赋值，也就是小程序组件本身的功能。prop.observer = watch[key];
        // 把当前的 key 放入 prop
        props[key] = prop;
      }
    });
    // 经过此方法
    // props: {
    //  a: {
    //    type: String,
    //    observer: (val) {//      console.log(val)
    //    }
    //  }
    // }
    options.properties = props;
  }

  // 对计算属性进行封装
  if (computed) {options.methods = options.methods || {};
    options.methods.$options = () => vantOptions;

    if (options.properties) {
      
      // 监视 props，如果 props 发生改变，计算属性本身也要变
      observeProps(options.properties);
    }
  }
}

现在剩下的也就是 observeProps 以及 behavior 两个文件了，这两个都是为了计算属性而生成的，这里我们先解释 observeProps 代码

export function observeProps(props) {if (!props) {return;}

  Object.keys(props).forEach(key => {let prop = props[key];
    if (prop === null || !('type' in prop)) {prop = { type: prop};
    }

    // 保存之前的 observer，也就是上一个代码生成的 prop
    let {observer} = prop;
    prop.observer = function() {if (observer) {if (typeof observer === 'string') {observer = this[observer];
        }

        // 调用之前保存的 observer
        observer.apply(this, arguments);
      }

      // 在发生改变的时候调用一次 set 来重置计算属性
      this.set();};
    // 把修改的 props 赋值回去
    props[key] = prop;
  });
}

最终 behavior，也就算 computed 实现机制


// 异步调用 setData
function setAsync(context: Weapp.Component, data: object) {
  return new Promise(resolve => {context.setData(data, resolve);
  });
};

export const behavior = Behavior({created() {if (!this.$options) {return;}

    // 缓存
    const cache = {};
    const {computed} = this.$options();
    const keys = Object.keys(computed);

    this.calcComputed = () => {
      // 需要更新的数据
      const needUpdate = {};
      keys.forEach(key => {const value = computed[key].call(this);
        // 缓存数据不等当前计算数值
        if (cache[key] !== value) {cache[key] = needUpdate[key] = value;
        }
      });
      // 返回需要的更新的 computed
      return needUpdate;
    };
  },

  attached() {
    // 在 attached 周期 调用一次，算出当前的 computed 数值
    this.set();},

  methods: {
    // set data and set computed data
    // set 可以使用 callback 和 then
    set(data: object, callback: Function) {const stack = [];
      // set 时候放入数据
      if (data) {stack.push(setAsync(this, data));
      }

      if (this.calcComputed) {
        // 有计算属性，同样也放入 stack 中，但是每次 set 都会调用一次，props 改变也会调用
        stack.push(setAsync(this, this.calcComputed()));
      }

      return Promise.all(stack).then(res => {
        // 所有 data 以及计算属性都完成后调用 callback
        if (callback && typeof callback === 'function') {callback.call(this);
        }
        return res;
      });
    }
  }
});

js 是一门灵活的语言 (手动滑稽)
本身小程序 Component 在小程序 Page 之后，就要比 Page 更加成熟好用，有时候新的方案往往藏在文档之中，每次多看几遍文档绝不是没有意义的。
小程序版本版本 2.6.1 Component 目前已经实现了 observers，可以监听 props data 数据监听器, 目前 VantComponent 没有实现，当然本身而言，Page 不需要对 prop 进行监听，因为进入页面压根不会变，而 data 变化本身就无需监听，直接调用函数即可，所以对 page 而言，observers 可有可无。
该方案也只是对 js 代码上有 vue 的风格，并没在 template 以及 style 做其他文章。
该方案性能一定是有所缺失的，因为 computed 是每次 set 都会进行计算，而并非根据 set 的 data 来进行操作，在删减之后我认为本身是可以接受。如果本身对于 vue 的语法特性需求不高，可以直接利用 Component 来编写 Page，选择不同的解决方案实质上是需要权衡各种利弊。如果本身是有其他要求或者新的项目，仍旧推荐使用新技术，如果本身是已有项目并且需要维护的，同时又想拥有 Vue 特性。可以使用该方案，因为代码本身较少，而且本身也可以基于自身需求修改。
同时，vant-weapp 是一个非常不错的项目，推荐各位可以去查看以及 star。

从-VantComponent-谈-小程序维护

TLDR (不多废话，先说结论)

VantComponent 源码解析

VantComponent

basic behaviors

observe

observeProps

behavior

写在后面