全局函数与变量重置问题：跨页调用后数据类型冲突报错

问题背景 #

项目中通过全局函数获取当前标签页数据，打开新页面时需修改数据参数，但调用顺序不同会触发报错：先调用函数Y再调用X时，后端抛出Newtonsoft.Json.JsonReaderException，错误信息为Unexpected character encountered while parsing value:。排查发现，X和Y中修改的Models属性类型不一致（X设为字符串，Y设为数组），且修改会影响后续调用的数据源。

原有代码 #

function X()
{
  "use strict";
   var tab = globalFunctionToGetActiveTab(),
     view  = globalFunctionToGetView(tab.id),
     tabPane = tab.getPane(),
     currentGrid = tabPane.find(".k-grid:visible").data("kendoGrid"),
     row = $(e).closest("tr"),
     rawData = currentGrid.dataItem(row);

    rawData.Models = "some text"; 
    OpenPageA(rawData);
}

function Y()
{
   "use strict";
   var tab = globalFunctionToGetActiveTab(),
     view  = globalFunctionToGetView(tab.id),
     tabPane = tab.getPane(),
     currentGrid = tabPane.find(".k-grid:visible").data("kendoGrid"),
     row = $(e).closest("tr"),
     rawData = currentGrid.dataItem(row);

    rawData.Models = ["some text"]; 
    OpenPageB(rawData);
}

问题根源 #

currentGrid.dataItem(row)返回的是Kendo Grid中存储的原始数据对象的引用，直接修改rawData的属性会直接改动Grid里的源数据。比如先调用Y将Models改为数组，后续调用X时拿到的rawData已经是被修改过的对象，此时X把Models改为字符串，会导致后端接口接收到的参数类型不符合预期，触发反序列化异常。

解决方案 #

不需要清除全局函数变量缓存，核心是避免修改共享的原始数据对象，每次调用时深拷贝一份数据副本，修改副本后再传递给页面跳转函数：

function X()
{
  "use strict";
   var tab = globalFunctionToGetActiveTab(),
     view  = globalFunctionToGetView(tab.id),
     tabPane = tab.getPane(),
     currentGrid = tabPane.find(".k-grid:visible").data("kendoGrid"),
     row = $(e).closest("tr"),
     rawData = currentGrid.dataItem(row),
     // 深拷贝生成独立副本，不影响源数据
     dataCopy = JSON.parse(JSON.stringify(rawData));

    dataCopy.Models = "some text"; 
    OpenPageA(dataCopy);
}

function Y()
{
   "use strict";
   var tab = globalFunctionToGetActiveTab(),
     view  = globalFunctionToGetView(tab.id),
     tabPane = tab.getPane(),
     currentGrid = tabPane.find(".k-grid:visible").data("kendoGrid"),
     row = $(e).closest("tr"),
     rawData = currentGrid.dataItem(row),
     // 深拷贝生成独立副本，不影响源数据
     dataCopy = JSON.parse(JSON.stringify(rawData));

    dataCopy.Models = ["some text"]; 
    OpenPageB(dataCopy);
}

说明 #

• JSON.parse(JSON.stringify(rawData))是简单的深拷贝方式，适用于数据中没有函数、循环引用等特殊结构的场景；如果数据结构复杂，可以使用Lodash的_.cloneDeep等专业深拷贝工具。
• 每次操作独立副本，确保各函数的参数修改互不干扰，彻底解决类型不匹配导致的后端反序列化异常。

内容的提问来源于stack exchange，提问作者Mahbub