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的匹配就正常了