从字典项读取js函数并调用的问题解决过程

本文描述了解决在字典项内配置JS函数并调用的问题。通过前端JSON.stringify和JSON.parse处理函数,但遇到函数丢失的情况。采用压缩工具转义后,在后台填入数据库,前台获取时遇到函数调用错误。最终通过在函数调用时使用window[‘0’].A解决了函数A的调用问题。

现需要在字典项内配置弹窗函数,以实现自由配置的页面。

  • 实现

js函数已在公共js文件中实现

  • 转义
    js函数无法直接插入字典项并调用,需要先进行转义成json字段,手写转义容易出错,于是在任意一个前端页面将代码块赋值给变量,再使用如下方法进行转义

这里是引用

基本的转换为:JSON.parse与JSON.stringify。
但是json数据中含function,则转换后,function会丢失,如:

```java
var json={
    test:'test',
    login: function(){
        alert("login")
    }
}

经JSON.stringify后,login丢失。

var json={
    test:'test'
}

JSON.parse,结果一样。
正确处理方法:

// json对象转换成字符串
var s=JSON.stringify(json, function(key, val) {
  if (typeof val === 'function') {
    return val + '';
  }
  return val;
});
// json字符串转换成对象
JSON.parse(s,function(k,v){
  if(v.indexOf && v.indexOf('function') > -1){
     return eval("(function(){return "+v+" })()")
  }
  return v;
});

前端工程中使用方法如上,但获取字典项是后台工程,所以在填入数据库时,
1.自行使用json压缩工具(百度就有)压缩方法
2.在前台任意页面写如上的JSON.stringify方法转义
3.在控制台输出
4.填入数据字典

  • 获取

1.后台工作:

if(StringUtils.isNotEmpty(value) && value.contains("function")){
	//将读取到的字典项字段,即含有fucntion的js代码直接填入
	传到前台的JSONArray.add(value);
}else{
	传到前台的JSONArray.add(JSON.parase(value));
}

2.前台工作:
将获取到的jsonarry进行如上的JSON.parase处理
遇到问题,js函数中还有调用其他函数:A(死亡套娃)
所以前台拿到JSONArray的时候,提示函数A不是一个function
于是尝试方法1:在函数A定义和调用的时候加上window.
结果不行,提示window.A undefined(吐血了)
对前端代码实在不熟悉,求助同事。。
同事尝试方法2:在调用A之前控制台输出window的所有函数->找到方法A在 window[0].A
于是在调用时写上
window[‘0’].A
终于出来了。撒花撒花

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值