从VantComponent谈小程序维护-随笔-SegmentFault思否
在开发小程序的时候,我们总是期望用以往的技术规范和语法特点来书写当前的小程序,所以才会有各色的小程序框架,例如 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 来对老项目进行维护。
tldr (不多废话,先说结论)
小程序组件写法这里就不再介绍。这里我们给出利用 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¶mb=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 解析
vantcomponent
此时,我们对 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
刚刚我们谈到 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(); }); } } });
observe
小程序 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
现在剩下的也就是 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
最终 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。上一篇: JQuery获取表格数据示例代码
下一篇: flash用php连接数据库的代码