在项目中使用js声明一些全局的静态常量并且不可改变

我们会遇到这样一个场景, 系统中有5个角色, A,B,C,D,E 角色值是1,2,3,4,5 

因为角色这个变量,在路由里有用到,权限管理中有用到,还有一些业务场景处有用到,我们不能用到的时候

就直接这样写

  

   

    

     

    
    

     

      // 如果角色是A时,执行....
     
    
   

    

     

    
    

     

      if(role === 1){
     
    
   

    

     

    
    

     
  // 业务代码
     
    
   

    

     

    
    

     

      }
     
    
  
 

或者 

  

   

    

     

    
    

     

      // 当用户角色是A,B,C其中的一种时,....
     
    
   

    

     

    
    

     

      if([1,2,3].includes(role)){
     
    
   

    

     

    
    

     
  // 业务代码
     
    
   

    

     

    
    

     

      }
     
    
  
 

这样写是非常不稳健的,

首先,在这里看到的1,2,3,没有明确的定义,单纯看这段代码,不清楚1,2,3代表什么,

其次,假如A角色的值某一天改了一下, 那这么才能找到所有用到A角色的代码(当然改变角色值得情况很少,但并不排除)

最后,假如我们现在加了一个角色,那我们快速知道应该修改哪些代码,使业务场景覆盖到这个新的角色

这个角色是不会变的,我们也不允许它们改变, 如果我们使用的是TS 的可以使用readonly 去修饰 但如果没有使用ts该怎么办那

我们可以借助es6的const这样写

创建一个ROLE.js

  

   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      /**
     
    
   

    

     

    
    

     

       * 角色A
     
    
   

    

     

    
    

     

       */
     
    
   

    

     

    
    

     

      export const ROLE_A = 1
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      /**
     
    
   

    

     

    
    

     

       * 角色B
     
    
   

    

     

    
    

     

       */
     
    
   

    

     

    
    

     

      export const ROLE_B = 2
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      /**
     
    
   

    

     

    
    

     

       * 角色C
     
    
   

    

     

    
    

     

       */
     
    
   

    

     

    
    

     

      export const ROLE_C = 3
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      /**
     
    
   

    

     

    
    

     

       * 角色D
     
    
   

    

     

    
    

     

       */
     
    
   

    

     

    
    

     

      export const ROLE_D = 4
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      /**
     
    
   

    

     

    
    

     

       * 角色E
     
    
   

    

     

    
    

     

       */
     
    
   

    

     

    
    

     

      export const ROLE_E = 5
     
    
   

    

     

    
    

     
 
     
    
  
 

在组件或者其他js中使用时 

import * as ROLE from '@/api/ROLE'
 

在组件中测试一下

  

   

    

     

    
    

     
  mounted() {
     
    
   

    

     

    
    

     
    console.log(ROLE.ROLE_A)
     
    
   

    

     

    
    

     
    ROLE.ROLE_A = 2
     
    
   

    

     

    
    

     
    console.log(ROLE.ROLE_A)
     
    
   

    

     

    
    

     

        }
     
    
  
 

被const创建的变量 没有set属性,顾不能重新赋值,保证数据的唯一性.

而且鼠标放上去会直接显示定义的代码和注释, 让人一目了然

这种变量声明的方式可以用于系统中的角色, 会员等级,版本,产品线,等一旦定义了不会再变的常量

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/105553388