命名空间和模块

介绍
这篇文章将概括介绍在TypeScript里使用模块与命名空间来组织代码的方法。 我们也会谈及命名空间和模块的高级使用场景,和在使用它们的过程中常见的陷阱。

查看模块章节了解关于模块的更多信息。 查看命名空间章节了解关于命名空间的更多信息。

使用命名空间
命名空间是位于全局命名空间下的一个普通的带有名字的JavaScript对象。 这令命名空间十分容易使用。 它们可以在多文件中同时使用,并通过--outFile结合在一起。 命名空间是帮你组织Web应用不错的方式,你可以把所有依赖都放在HTML页面的<script>标签里。

但就像其它的全局命名空间污染一样,它很难去识别组件之间的依赖关系,尤其是在大型的应用中。

使用模块
像命名空间一样,模块可以包含代码和声明。 不同的是模块可以声明它的依赖。

模块会把依赖添加到模块加载器上(例如CommonJs / Require.js)。 对于小型的JS应用来说可能没必要,但是对于大型应用,这一点点的花费会带来长久的模块化和可维护性上的便利。 模块也提供了更好的代码重用,更强的封闭性以及更好的使用工具进行优化。

对于Node.js应用来说,模块是默认并推荐的组织代码的方式。

从ECMAScript 2015开始,模块成为了语言内置的部分,应该会被所有正常的解释引擎所支持。 因此,对于新项目来说推荐使用模块做为组织代码的方式。

命名空间和模块的陷阱
这部分我们会描述常见的命名空间和模块的使用陷阱和如何去避免它们。

对模块使用/// <reference>
一个常见的错误是使用/// <reference>引用模块文件,应该使用import。 要理解这之间的区别,我们首先应该弄清编译器是如何根据import路径(例如,import x from "...";或import x = require("...")里面的...,等等)来定位模块的类型信息的。

编译器首先尝试去查找相应路径下的.ts,.tsx再或者.d.ts。 如果这些文件都找不到,编译器会查找外部模块声明。 回想一下,它们是在.d.ts文件里声明的。

myModules.d.ts
// In a .d.ts file or .ts file that is not a module:
declare module "SomeModule" {
export function fn(): string;
}
myOtherModule.ts
/// <reference path="myModules.d.ts" />
import * as m from "SomeModule";
这里的引用标签指定了外来模块的位置。 这就是一些TypeScript例子中引用node.d.ts的方法。

不必要的命名空间
如果你想把命名空间转换为模块,它可能会像下面这个文件一件:

shapes.ts
export namespace Shapes {
export class Triangle { /* ... */ }
export class Square { /* ... */ }
}
顶层的模块Shapes包裹了Triangle和Square。 对于使用它的人来说这是令人迷惑和讨厌的:

shapeConsumer.ts
import * as shapes from "./shapes";
let t = new shapes.Shapes.Triangle(); // shapes.Shapes?
TypeScript里模块的一个特点是不同的模块永远也不会在相同的作用域内使用相同的名字。 因为使用模块的人会为它们命名,所以完全没有必要把导出的符号包裹在一个命名空间里。

再次重申,不应该对模块使用命名空间,使用命名空间是为了提供逻辑分组和避免命名冲突。 模块文件本身已经是一个逻辑分组,并且它的名字是由导入这个模块的代码指定,所以没有必要为导出的对象增加额外的模块层。

下面是改进的例子:

shapes.ts
export class Triangle { /* ... */ }
export class Square { /* ... */ }
shapeConsumer.ts
import * as shapes from "./shapes";
let t = new shapes.Triangle();
模块的取舍
就像每个JS文件对应一个模块一样,TypeScript里模块文件与生成的JS文件也是一一对应的。 这会产生一种影响,根据你指定的目标模块系统的不同,你可能无法连接多个模块源文件。 例如当目标模块系统为commonjs或umd时,无法使用outFile选项,但是在TypeScript 1.8以上的版本能够使用outFile当目标为amd或system。

原文地址:https://www.cnblogs.com/maomaozag/p/12693878.html

时间: 2025-01-02 13:45:56

命名空间和模块的相关文章

什么是命名空间?模块的命名空间包含了什么?

# -*- coding: utf-8 -*- #python 27 #xiaodeng #什么是命名空间?模块的命名空间包含了什么? #命名空间是一种独立完备的变量包,而变量就是命名空间对象的属性. #模块的命名空间包含了代码在模块文件顶层赋值的所有变量名. #从技术角度来讲,模块的全局作用域会变成模块对象的属性命名空间.

使用js命名空间进行模块式开发

在java中,为了防止命名冲突和模块式开发,会有个一个import 关键字来进行导包. 在js中为了达到同样的效果,我们也通过给其自定义一个“包”的概念. 直接上代码: 首先有个LC.js文件: //LC.js var LC = LC || {}; LC.namespace = function(namespace) { var nsparts = namespace.split("."); var parent = window; if (nsparts[0] === "L

模块命名空间

# -*- coding: utf-8 -*- #python 27 #xiaodeng #模块命名空间 #模块最好理解为变量名的封装,也就是定义想让系统其余部分看见变量名的场所. #python会建立模块对象,以包含模块文件内所赋值的所有变量名 #模块就是命名空间,而存在于模块之内的变量名就是模块对象的属性 #在模块文件的顶层每一个赋值了的变量名都会变成该模块的属性 #下面正式的来说明模块加载和作用域的概念以了解其原因? #模块语句会在首次导入时执行 #系统中,模块在第一次被导入时,无论在什么

JS模块与命名空间的介绍

起因将代码组织到类中的一个重要原因是让代码更加“模块化”,可以在很多不同的场景中实现代码的重用.但类不是唯一的模块化代码的方式. 一般来讲,模块是一个独立的JS文件.模块文件可以包含一个类定义.一组相关类.一个实用函数库或者一些待执行的代码. 模块化的目标是支持大规模的程序开发,处理分散源中代码的组装,并且能让代码正确运行,哪怕包含了不需要的模块代码,也可以正确执行代码. 理想状态下,所有模块都不应当定义超过一个全局标识. 模块函数通过把模块定义在某个函数的内部来实现,定义的变量和函数都属于该函

Vuex模块:开启命名空间

模块开启命名空间后,享有独自的命名空间. { "模块1":{ state:{}, getters:{}, mutations:{}, actions:{} }, "模块2":{ state:{}, getters:{}, mutations:{}, actions:{} } } mapState.mapGetters.mapMutations.mapActions第一个参数是字符串(命名空间名称),第二个参数是数组(不需要重命名)/对象(需要重命名). mapXXX

Yii2中的模块、应用程序(Module,Application)

原文地址:http://www.kuitao8.com/20140626/2715.shtml 模块(Module ) 模块是一个功能独立的逻辑单元,每一个模块都可以包含有多个子模块,但每个模块只能有一个对应的父模块(如果有的话).它的定义在yii\base\Module 应用程序(Application) Yii2中的应用程序有两种:web应用程序(yii\web\Application)和控制台应用程序(yii\console\Application).他们都继承于yii\base\Appl

Python2.5-原理之模块

此部分来自于<Python学习手册>第五部分 一.模块(21章) 模块是最高级别的程序组织单元,它将程序代码和数据封装起来以便重用..模块往往对应于python程序文件.每个文件就是一个模块,并且模块导入其他模块之后就可以使用导入模块定义的变量名.模块可以由两个语句和一个重要的内置函数进行处理:a.import,使客户端(导入者)以一个整体获取一个模块:b.from,允许客户端从一个模块文件中获取特定的变量名:c.imp.reload,在不中止python程序的情况下,提供了一种重新载入模块文

模块补充

内置函数vase() print(vars()) print(type(vars()),vars()) type()函数是返回传递变量的类型.如果传递变量是字典那么它将返回一个字典类型. __doc__  # py文件的注释 例: """ 我是index注释 """ print(__doc__) __file__ #本身自己文件路径 print(__file__) __package__ #当前文件 None #导入的其他文件所在的包,用 . 划

JavaScript基础对象创建模式之命名空间(Namespace)模式(022)

JavaScript中的创建对象的基本方法有字面声明(Object Literal)和构造函数两种,但JavaScript并没有特别的语法来表示如命名空间.模块.包.私有属性.静态属性等等面向对象程序设计中的概 念.为了让JavaScript实现面向对象程序中的高级语义,人们发明了命名空间模式.依赖声明模式,模块模式,以及沙盘模式. 1. 命名空间模式 命 名空间模式解决了JavaScript中的两个问题,一是全局变量污染的问题,二是可能的名字冲突问题.虽然JavaScript没有特别支持命名空