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合并,与我想要的结果并不同。

golang vs rust vs javascript

最近研究了几天rust,并不是特别的深入,主要用来做wasm。 之前的部分关键程序使用golang写的,但不是wasm,也简单封装了接口, 试了下wasm。

就体验而言,rust的学习曲线实在太抖,相比之前的golang学习,golang用个个把小时看下语法,结构,项目组织方式,然后就可以做 项目了。rust看了几天,貌似还在门外徘徊,不过没关系,经过几天的摸索,我终于学会了使用rust来编写wasm,并且和elementui的 框架的配合调整为我想要的了。而这个只是灾难的开始。

我想试着用rust,一个主要原因是golang生成的wasm实在太大,什么都不做的2MB+了。另外一个最重要的原因是golang生成的wasm, 在解析一个很大的json字符串的时候,竟然需要13+秒的时间,如果使用第三方的json解析的话,需要1+秒的时间,虽然可以使用tinygo 来减少wasm的容量,但tinygo无法使用第三方的json解析。而在查看wasm相关信息的时候,rust据说不错。所以就决定写个试试了。

下面的坑都是根据回忆记录的。不一定是对的,所有执行的目标都是wasm

  1. rust的json解析,如果不使用js_sys的json解析的话,需要很长的时间,没记错的话,需要很久,至少10s+是有的。这个json数据大约在几十MB之间。 如果使用js_sys的话,需要0.8秒左右的时间。之所以提出来是因为太明显了。最后逼迫我必须使用js_sys的解析。缺点就是描写的各种累心
  2. 因为1解析出来的json数据会被各个不同的部分使用,因此这个变量要被全局存储。全局存储大概搞了我好多天,因为没有最理想的。 刚开始准备一个最简单的Option的方案,不支持指针类的; 升级为lazy_static方案, 不支持js_sys::JsValue,JsonValue太慢 放弃; thread_local方案,这个需要使用with,这个是我目前可以找到的可以支持js_sys::JsValue的了,也只能这样用了,使用with, 丑就丑吧
  3. 因为2使用了with方案,而代码中的数据在处理的时候,会从其他地方得到的数据进行整合,比如我又从其他的公共变量获取数据,而 with的处理结果,除非使用clone的方式,否则由于变量生命期的关系,各种编译报错,我真的恨死rust的这种反人类的设计了。 明明我只是为了读取内部的一段内存的数据,结果非的逼我clone出一段内存来,感情现在内存真的都是白菜价啊
  4. 很无奈,其他部分(我只测试了一个,以后的以后想办法对付吧),我使用了lazy_static方案,我试了下Mutex,结果在浏览器里 一跑,发现浏览器cpu 100%卡住了,等好久才有反映,这下好了,整个数据不用处理了。既然Mutex不行,就试试RwLock,反正我 数据仍到HashMap中,更新少,查询多,但要返回相应的数据,还得clone,于是又回到3了。
  5. 我无数次准备掐死自己的心都有了,让你犯贱选rust,你看使用golang多少,一周的rust研究成功,golang两个小时就达到相同效果了。 但golang真的慢啊
  6. rust的设计初衷或许非常完美,但智能指针的设计模式或者所有权的设计,真的是非人类。即使是学院的erlang,也没有rust这么变态, 我感觉我好久都没关注过erlang了,真有点怀念熟悉了之后处理代码的那种感觉。

vue中使用umd

今天在整理代码的时候,将@json-editor/json-editor升级了,升级到最新的2.2.1版本了,然后发现 很悲剧了,程序怎么也找不到JSONEditor了。我以为是我程序哪块有问题了,所以各种调查。

幸好线上版本没有做更改,结果在线上版本中发现一句window.JSONEditor=…, 然后立刻在本地查找, 发现本地更新完之后已经没有这句话了。所以可以肯定不是我程序的事情啦。

最后发现线上版本在4月7号提交了一个 Unify the format of the module to umd.的补丁, 大致从 2.1.0的版本都不支持了。

做了下测试,发现2.0.0的版本都还正常,虽然可以强制版本为2.0.0,但既然发现了,总想试着解决下。 从网上搜索”vue 无法 import umd”, 发现原来是webpack的坑。

坑找到了,就开始填坑。首先安装 @babel/plugin-transform-modules-umd:

npm i –save-dev @babel/plugin-transform-modules-umd

然后在babel.config.js的配置的plugins中添加这个插件, 类似这样:

module.exports = {
presets: [
‘@vue/app’
],
plugins:[‘@babel/plugin-transform-modules-umd’]
}

javascript的Object.assign复制

我对javascript研究不深,基本处于可用,能用而已。一直意味Object.assign就是将原来的在内存中完整复制一份镜像, 没想到Object.assign仅复制第一层,而其它层还保持内存链接的形式。另外一个坑就是复制的类型要一致, 比如数组的复制,Object.assign([],array),而不是Object.assign({},array);后者将会将数组转化为Object。

所以,要想完全复制,还是老老实实的JSON.parse(JSON.stringify());吧。但我没研究对于Object带函数的是否通用。

php的json_encode和javascript的JSON.stringify不一致

一直用json-editor来做配置的界面,因为大部分的数据都是使用json的,前段在配合oneOf使用的时候, 发现新创建的内容,界面没有问题,保存的是没有问题,然后读取出来之后,显示的界面就一团糟了, 应该说对于读取的数据格式是属于哪一种字段解析错误了,所有的都只认oneOf的第一个。

最后反复调试,输出日志,发现在javascript侧的JSON数据结构比如空的字符串,在JSON.stringify后, 显示的是空字符串,eval解析回来还是空字符串,而相同的数据,在服务器的php侧,使用json_encode后, 空的字符串被替换成了null,然后json_decode的时候,出来的还是null,如果直接拿到客户端使用, 匹配的将是object的null,而不是string类型。在使用javascript侧进行eval了之后,出来的还是null, 与原始的数据不一致。

最后在将这段数据进行提交给服务器的时候,在客户端这边先进行JSON.stringify,服务器这边直接保存这个 字符串,然后json-editor的匹配就正常了