【JS里的小函数】帮助你在全局作用域中创建和访问对象的函数

先看函数代码

js 复制代码
  const use = (name) => {
    const parts = name.split(".");
    let obj = use;
    for (const part of parts) {
      if (!obj[part]) {
        obj[part] = {};
      }
      obj = obj[part];
    }

    return obj;
  };

函数效果

这是一个用于在全局作用域中创建和访问对象的函数。它允许你通过一个字符串路径来访问或创建对象的属性。

如果你调用 use('a.b.c'),就会创建这样的结构:

js 复制代码
use = {
   ... // other properties
   a: {
     b: {
       c: {}
     }
   }
 }

如果你再调用 use('x.y.z'),就会创建这样的结构:

js 复制代码
use = {
   ... // other properties
   a: {
     b: {
       c: {}
     }
   },
   x: {
     y: {
       z: {}
     }
   }
 }

从而创建一个拥有指定属性的全局对象,属性一旦创建,不会被覆盖和删除。

Q && A

  1. 为什么要用 let obj = use; 而不用 let obj = {};?

答:为了状态持久化,如果使用 let obj = {};,就说明每次调用 use 函数,都会创建一个新对象,不能提供一个全局对象;

  1. 为什么要执行 obj = obj[part];?

答:为了移动指针到下一层对象,从而创建嵌套式的结构;

总结

整段代码可以类比创建文件系统:

  • if (!obj[part]) 是判断该文件夹是否存在,如果不存在就创建文件夹,即 obj[part] = {};
  • obj = obj[part]; 就是调用 cd 进入刚刚创建(或者是已存在)的文件夹中;
  • 最后返回的 obj,就是返回最深层的文件夹指针;

这种模式通常用于:

  • 创建命名空间
  • 构建模块系统
  • 实现插件系统
  • 管理配置对象
相关推荐
小码哥_常5 小时前
一套自己部署的 IM,客户端是同一份 Flutter
前端·后端
蜗牛攻城狮8 小时前
微前端四大方案选型对比与最佳实践:qiankun、micro-app、wujie、Module Federation
前端·微前端·qiankun·前端架构·micro-app·wujie
她说可以呀9 小时前
Vue插槽
前端·javascript·vue.js
qq_448011169 小时前
Vue + Jinja2两套模版与法冲突造成undefinedError
前端·javascript·vue.js
aixingpan9 小时前
aixingpan.cn API开发文档:前端查询夏令时和时区接口指南
前端·php
2601_9583529010 小时前
23.5×19mm 换掉一整条音频链?|A-68 集成了什么:ADC / DAC / 24.576MHz 时钟 / AEC / 波束降噪,主控仅需 6 根线
前端·音视频·ai降噪·回声消除·语音模块
志尊宝10 小时前
AI原生前端开发(039):AI辅助的Nuxt 4全栈开发
前端·vue.js·ai-native
FRing0311 小时前
JavaScript入门到精通三十二(深拷贝、浅拷贝、递归函数)
开发语言·前端·javascript
excel12 小时前
双 Token 与前端使用 Crypto 公私钥鉴权换 Token,哪种方案更好?
前端·后端
外收内放12 小时前
Python基础语法练习题(73)
java·前端·python