在前端如何保护共享对象

 

被多次使用到的同一个对象即为共享对象

比如我们用标准的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的情况，这时候或许就能发现问题。

原文链接