JQuery 数据复制$.extend([true],obj,obj)


        最近在项目中,用vue的数据双向绑定去处理一些页面上同一数据多处使用的问题,刚开始用得还是挺爽的,但最后发现,如果我有一个地方数据会更改,但因为网络等其他原因,我们的数据在服务器端并没有修改成功,而此时我本地的数据因为是绑定的同一数据源,已经被修改了,除非刷新,否则该数据不会被更新。这肯定是一个bug,而且还是一个很大的bug,当时为了不再去大幅的改动项目代码,小编呢就想了一个方法,在页面数据会有修改的地方,将数据源copy一份出来,当数据修改成功后在将修改的数据copy到数据源。深度拷贝数据,在JQuery中提供了一个方法就是我们题目所写的$.extend([true],obj,obj)。

       $.extend的作用是把第二个对象合并到第一个对象,没有ture是浅层复制,只能复制对象第一层,但是如果对象里面还有对象,那么就复制不到。如果我们的数据只改动了部分,外层数据有新增加,子对象里只改动部分,没有用TRUE的复制会产生以下情况:外层数据新增加的还是会复制过去,但是子对象只会复制改动的那部分,所以会造成数据遗失。

       JSON.parse(JSON.stringify(data));stringify()用于从一个对象解析出字符串,parse用于从字符串中解析出json对象。

1、从数据源取出数据,做隔离,代码如下:

 getGlobalData() {
 /**取出数据源的数据*/
        //globalData => this.vueData    
        this.vueData.user = funs.deepCopy(model.globalData.user);
        this.vueData.demand = funs.deepCopy(model.globalData.demand);
 }

funs.deepCopy(data);返回的就是JSON.parse(JSON.stringify(data));为什么要将数据对象转换成字符串,再从字符串转换成对象呢,因为在js中,“obj1=obj2”是引用,并不是赋值,如果obj1变了,obj2还是会变,所以要这个处理。

2、将变了的数据copy还回去,代码如下:

setGlobalData() {
/**$.extend()拷贝回去*/
        //this.vueData => globalData
        $.extend(true, model.globalData.user, this.vueData.user);
        $.extend(true, model.globalData.demand, this.vueData.demand);
 }


Logo

前往低代码交流专区

更多推荐