javascript的Function函数

我在使用element-ui的table的控件的时候,对其中的template很好奇,使用slot-scope字段可以透传 当前row的相关信息,在react.js做列表控件的时候,就想着也实现一个类似的。

我没有仔细研究element-ui的代码是如何实现的,不过 javascript有一个Function函数,正好也在 做这个相关的功能,所以就用这个函数弄了一个类似的。

function rend_scope(t, key, slot) {
    if(!t.props['slot-scope']) {
        return (<Fragment key={key}>{React.createElement(
            t.type,
            t.props,
        )}</Fragment>);
    }
    let scope = t.props['slot-scope'];
    if(!scope.startsWith('{')) {
        let newprops = {...t.props};
        newprops[scope] = slot;
        return (<Fragment key={index2}>{React.createElement(
            t.type,
            newprops,
        )}</Fragment>);
    } else {
        let result = null;
        let looseJsonParse = (obj)=>{
            return Function('"use strict";return (' + obj + ')')()(slot);
        };
        let s = `function(${scope}=slot){return ${scope};}`;
        result = looseJsonParse(s);
        return (<Fragment key={index2}>{React.createElement(
            t.type,
            {...t.props, ...result},
        )}</Fragment>);
    }
};

上面的代码首先判断是否存在slot-scope, 不存在的话,则动态创建。

如果存在的话,则判断是否是'{‘开头的,如果不是,则是将slot的作为props指定字段的值插入,然后动态创建。

如果是'{‘开头的话,表示要提取slot中的某部分字段的内容,这些字段作为props中指定的字段和值插入,然后动态创建。 这里使用了Function的功能,首先将slot-scope中的字符串拼接为一个简单的字段提取的函数, 上面变量s中字符串 函数的功能就是提取object中指定字段的功能,虽然通过分割slot-scope中的字符串,然后对object通过 数组方式读取也可以,我还是喜欢通过Function的功能,这样如果某个字段填写有问题的话,执行到会直接报错的,报错后 位置也好找。looseJsonParse里面的功能就是生成新的js的函数并且执行,因为动态生成函数后,执行的参数是slot, 而之前s的函数就变成了是返回slot中某些字段的内容并组成新的object了,最后将这部分和老的props合并并动态生成。

第2部分的判断如果用第3部分来做的话,则是将slot的整体与老的props合并,与我想要的结果并不同。

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据