JS 组件传值原来是这样的啊

目录

talk is cheap, show me the code,make a better result.
特殊价值>一般价值

传值原理

借助平台我们可以快速开发，但是我们最好知道知其然知其所以然会对提高自己的技术视野有很大的帮助。我们来分析一下常见传值的原理。

yx平台源码分析

页面之间的组件是通过windows方法执行的，

window["name"] = "the window object";

定义一个全部变量来进行存储，优点支持page之间的数据的传递。
缺点支持2层级。

yx平台扩展

既然我们在内存级别可以使用windows,application对象，当然我们也可以使用持久化对象sqlite了，存到数据库中，然后从数据库中读取出来，部分代码如下：

// 读取数据库数据
    axios.get("test.db", {responseType: 'arraybuffer'})
        .then(function (response) {
            let db = new window.SQL.Database(new Uint8Array(response.data));
            // 执行查询
            let s = new Date().getTime();
            let r = db.exec("SELECT * FROM sys_user WHERE status = 1;");
            let e = new Date().getTime();
            console.info("查询数据耗时：" + (e - s) + "ms");
            // 解析数据
            let obj = dbToObj(r);
            console.info(obj);
        })
        .catch(function (error) {
            console.info(error);
        });

    // 方法传入两个数组，第一个数组为key，第二个数组对应位置为value，此方法在Python中为zip()函数。
    const ArraytoObj = (keys = [], values = []) => {
        if (keys.length === 0 || values.length === 0) return {};
        const len = keys.length > values.length ? values.length : keys.length;
        const obj = {};
        for (let i = 0; i < len; ++i) {
            obj[keys[i]] = values[i]
        }
        return obj;
    };

    // 转驼峰表示：func.camel('USER_ROLE',true) => UserRole
    // 转驼峰表示：func.camel('USER_ROLE',false) => userRole
    const camel = (str, firstUpper = false) => {
        let ret = str.toLowerCase();
        ret = ret.replace(/_([\w+])/g, function (all, letter) {
            return letter.toUpperCase();
        });
        if (firstUpper) {
            ret = ret.replace(/\b(\w)(\w*)/g, function ($0, $1, $2) {
                return $1.toUpperCase() + $2;
            });
        }
        return ret;
    };

    // 把数组里面的所有转化为驼峰命名
    const camelArr = (arrs = []) => {
        let _arrs = [];
        arrs.map(function (item) {
            _arrs.push(camel(item));
        });
        return _arrs;
    };

    // 读取数据库
    // 1.把columns转化为驼峰；
    // 2.把columns和values进行组合；
    const dbToObj = (_data = {}) => {
        let _res = [];
        _data.map(function (item) {
            let _columns = camelArr(item.columns);
            item.values.map(function (values) {
                _res.push(ArraytoObj(_columns, values));
            });
        });
        return _res;
    };

手写一个传值组件

参考资料和推荐阅读

1. JS页面间数据传递的各种方法和分析.
2. 深入浅析JavaScript中数据共享和数据传递.
3. js – 操作sqlite数据库.

欢迎阅读，各位老铁，如果对你有帮助，点个赞加个关注呗！~