vue2封装运行工具库

主要思路，

讲vue文件里的js传入封装js里的create函数中。create函数将传入js与自身js混合可以相互调用。可以将一些同用方法放入封装js或一些页面处理方法。

在传入js里写runder等于mounted(),封装js会看render有无错误。错误则返回上一页。

封装js 加了一些可能会用到的方法

export default {
    create(target) {
        console.log(1);
        for (let p in this) {
            if (typeof target.methods[p] === 'undefined') {
                target.methods[p] = this[p];
            } else if (-1 < ['data', 'privates'].findIndex(v => p === v)) {
                target.methods[p] = this.jsonExtend(target.methods[p], this[p]);
            }
        }
        for (let method in target.methods) {
            if (typeof this[method] === 'undefined') {
                this[method] = target.methods[method];
            }
        }
        let life = ['beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'beforeDestroy', 'destroyed'];
        for (let index = 0; index < life.length; index++) {
            if (target[life[index]]) {
                target[life[index]].call(this);
            }
        }
        return Object.assign(target, this);
    },
    mounted() {
        let _render = () => {
            let that = this;
            try {
                that.render();
            } catch (e) {
                that.routerback(1);
            }
        };
        _render();
    },
    jsonExtend(source, target) {
        for (let p in target) {
            if (typeof source[p] === 'undefined') {
                source[p] = target[p];
            } else if (this.isJsonObject(source[p])) {
                source[p] = this.jsonExtend(source[p], target[p]);
            }
        }
        return source;
    },
    isJsonObject(obj) {
        let _result = typeof obj === 'Object' && Object.prototype.call(obj).toLowerCase() == '[Object object]' && !obj.length;
        return _result;
    },
    // 以上为运行方法
    routerPush(path, query) {
        this.$router.push(path, query);
    },
    routerReplace(path, query) {
        this.$router.replace(path, query);
    },
    routerback() {
        this.$router.back(-1);
    },
    ahref(url) {
        window.open(this.ifhttp(this.parseUri(url)));
    },
    //将url的请求参数转为json
    paramObj(url) {
        const search = url.split('?')[1];
        if (!search) {
            return {};
        }
        return JSON.parse(
            '{"' +
                decodeURIComponent(search)
                    .replace(/"/g, '\\"')
                    .replace(/&/g, '","')
                    .replace(/=/g, '":"')
                    .replace(/\+/g, ' ') +
                '"}'
        );
    },
    //时间转换
    addzero(m) {
        return m < 10 ? '0' + m : m;
    },
    // 时间转化
    format(times, joint) {
        let join = joint ? joint : '-';
        let time = new Date(times * 1000);
        let y = time.getFullYear();
        let m = this.addzero(time.getMonth() + 1);
        let d = this.addzero(time.getDate());
        let h = this.addzero(time.getHours());
        let mm = this.addzero(time.getMinutes());
        let s = this.addzero(time.getSeconds());
        let data = {
            yymm: '' + y + join + m + join + d,
            ss: h + ':' + mm + ':' + s,
            cc: y + '年' + m + '月' + d + '日',
            yy: y,
            mm: m,
            dd: d
        };
        return data;
    }
};

引入方式

** 全局引入 main.js**
也可单页面引入
因为咱们需要在生成页面时将所有js传入 Vue.prototype 是在生成之后才能调用 所以采用直接赋值在window上。

import controllerY from './../src/components/page/controllerY';
window.controllerY = controllerY;

使用方法

<template>
    <div class="masdfasdfin">
        <div @click="add">test3</div>
        <div @click="test">test1</div>
    </div>
</template>

<script>
export default controllerY.create({
    methods: {
        runder() {
            console.log('runder');
        },
        add() {
            console.log('[ 2222 ] >', 2222);
        }
    }
});
</script>

vue3因为this等问题还在研究中…