命名空间

在 JavaScript 使用命名空间时, 这有一个常用方便的语法:

(function(something) {
  something.foo = 123;
})(something || (something = {}));

something || (something = {}) 允许匿名函数 function (something) {} 添加属性至已经存在的对象上,或者会创建一个新对象,然后添加属性至新对象上,这意味着你可以拥有由某些边界拆成的不同的块:

(function(something) {
  something.foo = 123;
})(something || (something = {}));

console.log(something);
// { foo: 123 }

(function(something) {
  something.bar = 456;
})(something || (something = {}));

console.log(something); // { foo: 123, bar: 456 }

在确保创建的变量不会泄漏至全局变量中时,这种方式在 JavaScript 中很常见。当使用基于文件模块时,你无须担心这点,但是此种方式,仍然适用于合理的函数逻辑分组中。因此 TypeScript 提供了 namespace 关键字用来描述这种分组,如下所示:

namespace Utility {
  export function log(msg) {
    console.log(msg);
  }
  export function error(msg) {
    console.log(msg);
  }
}

// usage
Utility.log('Call me');
Utility.error('maybe');

namespace 关键字通过 TypeScript 编译后,与我们看到的 JavaScript 代码一样:

(function (Utility) {
  // 添加属性至 Utility
})(Utility || Utility = {});

有一点值得注意的是,命名空间是支持嵌套的。因此,你可以做一些类似于在 Utility 命名空间下嵌套一个命名空间 Messaging 的事情。

对大多数项目来说,我们推荐使用一个使用 namespace 的外部的模块,用来快速的演示和移植旧的 JavaScript 代码。

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

results matching ""

    No results matching ""