在前端怎样庇护同享对象

2023年9月21日 267次阅读 来源: 行列

什么是同享对象

被屡次运用到的同一个对象即为同享对象

比方我们用规范的es模块来写一个导出单位转换的模块

//converter module
export default {
    cmToIn(){
        //convert logic
    }
}

当我们在别的模块中运用该模块时，converter等于同享对象，内存中只需一份，不论它被import了多少次。

同理，上面展现的是通用要领的对象鸠合，在前端项目里，我们也会把一些所谓写死的数据集合封装在某个模块里，轻易后期的修正，比方我们完成一个constant常量模块，我们把一些项目中运用的，后期能够会修正的数据放进去

//constant
export default {
    dateFormatter:'YYYY-MM-DD',
    reports:{
        productId:'123',
        productName:'456'
    }
}

这里仅表示一下

为何要庇护同享对象

防备同享的对象被不测修正致使线上毛病

原则上这些通用的模块，我们不会，也不会故意的在我们营业代码中去修正内里的数据，特别像常量如许的模块，假如要修正的话，我们一定修正常量这个模块。

然则，凡事总有不测，比方说我们有如许一个场景：依据后端返回的用信息，以及前端写死的一些常量，来推断某个用户能不能展现某个报表，我们希冀的代码多是如许的

import Constant from './constant';//引入我们前面定义的constant模块
//...别的略
export default View.extend({
    render(){
        //...别的逻辑略
        if(Constant.reports.productId==user.reportProductId){
            //....
        }
    }
});

注重上述代码中的if语句，假如错写成：if(Constant.reports.productId=user.reportProductId)，两个等号的比较写成了一个等号的赋值。

假如自测的时刻，用户接口里user.reportProductId返回的恰好也是123，那末先赋值，再做if推断，建立，做为开辟者会毛病的认为这里的逻辑没题目。固然，一般状况下也要测试下用户接口里user.reportProductId返回不是123的状况，这时刻也许就能够发明题目。

假如上述题目没有测试出来，鬼使神差的上线以后，这个题目关于大型单页运用是致命的，假如某个用户的reportProductId是456，接见了写错的页面后，由于被不测的修正了constant中的reports.productId，会致使后续别的模块在读取时不再是最初的123而出题目

怎样庇护同享对象

const

const关键字声明的仅防备变量被从新赋值，没法防备对象修正

Object.freeze

能够防备被修正，然则假如对象嵌套时，被嵌套的对象依旧能够被修正，须要开辟者对要
freeze的对象递归遍历举行
freeze。最主要的一点是，当我修正一个
freeze对象时，虽然修正不成功，但也没有使命失利的提醒，在前述场景中，我们照样愿望开辟者在修正一个不允许的被修正的对象时能实时给出响应的提醒。

Proxy

es6新增的代办操纵对象的要领

Proxy相干的文章异常多，这里就不再细致说，我们借助Proxy来完成一个Safeguard要领来庇护我们的同享对象

const Safeguard = o => {
    let build = o => {
        let entity = new Proxy(o, {
            set() {
                throw new Error('readonly');
            },
            get(target, property) {
                let out = target[property];
                if (target.hasOwnProperty(property) &&
                    (Array.isArray(out) ||
                        Object.prototype.toString.call(out) == '[object Object]')) {
                    return build(out);
                }
                return out;
            }
        });
        return entity;
    };
    return build(o);
}

这里简化了代码，你能够依据本身的须要去调解响应的完成逻辑

运用

const user=Safeguard({
    name:'行列',
    address:{
        city:'hz'
    }
});

这个user对象只能读，不能写，当开辟者尝试写入新数据时，会抛出毛病提醒开辟者

运用场景

地点栏剖析对象

在单页运用中，我们须要把地点栏中的字符串地点剖析成对象，轻易我们运用。

比方/path/name?a=b&c=d，我们能够剖析成如许的对象

{
    path:'/path/name',
    params:{
        a:'b',
        c:'d'
    }
}

假如你统计过你的单页运用，会发明牢固的用户老是只接见某些页面，我们能够在用户接见某个页面时，暂时的把地点栏中的这个地点字符串剖析一遍，也能够把剖析效果存起来，当用户再接见这个页面时，不须要剖析，把存起来的效果拿出来运用即可

关于这一块我曾写过Magix.Cache，细致的来申明该怎样智能的缓存哪些须要的信息

关于缓存后的地点栏信息对象，它就是一个同享对象，要确保它不能被开辟者写入新的值，就能够够运用前面我们定义的Safeguard要领来举行庇护

缓存的接口数据

在单页运用开辟中，有些数据须要后端供应，然则后端供应的这些数据能够在很长一段时间内都不会被修正，比方省市数据，前端没必要在每次须要运用这类数据时都要求一次，所以前端能够把该接口的数据缓存下来，来节约要求

关于如许的数据对象，也须要庇护，简言之，只如果共用的对象，均须要防备它被不测的修正

关于上线

前面我们聊到的Safeguard要领，在我看来是没必要宣布到线上的，只需开辟阶段存在即可。只需保证在开辟中没有对同享对象的写入操纵，那末宣布到线上时一定也没有写入操纵，这时刻这个庇护Safeguard要领就是过剩的。

怎样在开辟时庇护，而宣布到线上时去掉呢？

我们能够运用uglify这个代码紧缩工具的global_defs设置。比方在开辟阶段如许定义

if (typeof DEBUG == 'undefined') window.DEBUG = true;
//...

const user={
    name:'行列',
    address:{
        city:'hz'
    }
}

if(DEBUG){
    user=Safeguard(user);
}

然后在紧缩时：

uglify({
    compress: {
        global_defs: {
            DEBUG: false
        }
    },
    output: {
        ascii_only: true
    }
});

那末如许紧缩出来的代码就不包括DEBUG相干的语句了

固然，
Safeguard追随上线也没有什么大题目，末了这个“关于上线”这块只是想做更深切的讨论，假如
Safeguard要上到线上，注重
Proxy的兼容即可

    原文作者：行列
    原文地址: https://segmentfault.com/a/1190000016261001
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞