小记小程序组织结构

前言：
好长一段时间木有更新文章了，一是因为懒，二还是因为懒。
今年下来，前前后后敲了有好几个小程序，下文算是总结下经验吧。
第一点是始终绕不开的网络请求，这个后续新起一片文章说吧，这里想说的是通过包装的方式，修改小程序的page参数，以满足一些特殊的需求，举例来说，我需要给每个页面加上用户访问的日志，包括跳转到这个页面时带过来的关键参数，打开小程序的方式（场景值），还可能带上访问页面的手机型号或系统参数。

方案一

最先想到的方案是在每个页面的onShow生命周期函数中加上日志上传的功能，类似下面这样：

const app = getApp()

Page({

    data: {

    },

    onLoad: function(options) {
        this.params = options;
    },

    onShow: function (options) {
        const sysInfo = wx.getSystemInfoSync();
        const path = this.route;
        const scene = app.globalData.scene; 
        app.submitLog(this.route, scene, sysInfo, this.params);
    }
})

先说说这样写的缺点吧：
1、每访问一个页面都提交一次日志，导致后端这个接口压力过大；
2、每个页面都要加上传日志的逻辑；
考虑到每个页面都涉及到记录日志，所以在想着在每个页面的Page参数里做手脚，如果可以写一个返回符合Page参数要求的管理器，就可以在里面做我们想要的操作了。类似下面这样：

const app = getApp()

Page(pageOptionManager({
    data: {
        myData: 'hello world'
    },
    onLoad: function(options) {
        console.log('this is onLoad function');
    },

    onShow: function() {
        console.log('this is onShow function')
    }
}))

function pageOptionManager(options) {
    const params = {};
    params.onLoad = function (...args) {
        options.onLoad.call(this, ...args);
        console.log('额外的操作逻辑');
    }

    params.onShow = function(...args) {
        options.onShow.call(this, ...args);
        console.log('额外的操作逻辑');
    }
    ...
}

为了方便说明，去掉了判断的逻辑，只列出了关键的步骤，实际做的时候可以抽出一个专门的文件来处理这个参数逻辑，具体代码小的po到github了。
再来看看第一个“每次页面跳转都请求日志上传接口导致后端压力过大”的问题。最直接的方式就是降低接口请求的频率，这就要求我们在每次页面跳转的时候把日志收集起来，等到一定的时间再统一上传，或者到了某些特定的条件，比如退出小程序前。关键代码如下：

import SysInfoH from "../sys-infos-helper.js";

class LogManager {

    // 使用单例，控制日志的逻辑没必要new多个实例
    static getInstance() {
        if(LogManager.instance) {
            return LogManager.instance;
        } else {
            LogManager.instance = new LogManager();
            return LogManager.instance
        }
    }

    // 收集日志
    addVisitLog(path, params) {
        this.visitLog = {
            path: path,
            params: params,
            createTime: new Date().getTime()
        };
        this.visitlogs || (this.visitlogs = []);
        this.visitlogs.push(this.visitLog);

        // 设置提交日志的条件
        if (this.visitlogs.length >= 20) {
            this.submitVisit();
        } else if (!this.visitlogTid) {
            this.visitlogTid = setTimeout(this.submitVisit.bind(this), 3000);
        }
    }

    // 提供提交日志的api以便外部在需要立即提交日志的时候调用
    submitVisit() {
        if (this.visitlogTid) {
            clearTimeout(this.visitlogTid);
            delete this.visitlogTid;
        }
        if (this.visitlogs && this.visitlogs.length > 0) {
            const visitlogs = this.visitlogs;
            this.visitlogs = [];
            console.log('submit visit log');
        }
    }
}

export default LogManager.getInstance();

关键点加上了注释，具体可以根据个人需要设计，比如日志需要记录的参数等。相关代码小的也po到github了。