作用:代表内部模块,将项目模块化,减少全局变量,避免污染全局,提供逻辑分组和避免命名冲突
(1)使用
namespace xx{
内容...
需要暴露的内容
export ...
}
命名空间在js文件中会被转换成
var xx;
(function(){
多个类会被分别放进自启动函数中
var 类名=(function(){
内容1...
})
var 类名=(function(){
内容2...
})
其他内容会不变
暴露的内容:
xx.名称=变量名
})(xx || xx={})
(1.5)设置命名空间别名
import 别名 = 命名空间名称.暴露内容;
别名即为暴露内容
(2)文件中使用其他.ts中的命名空间的内容
1、使用引用标签,在顶部声明ts依赖文件路径
希望全局使用命名空间:还需要走(4)、(5)
///<reference path='/路径/x.ts' /> 相对路径即可
希望局部使用命名空间:
export namespace x{}; 其他模块import导入
2、命名空间名称.暴露的变量名称
(3)修改tsconfig.json(可选)
使得多个命名空间文件合并
"module": "amd",
"outFile": "./x/xx.js", 将多个文件打包到一个文件内
(4)当涉及到多文件时,我们必须确保所有编译后的代码都被加载了,使用编译成的js文件。
方式一:
tsc --outFile 输出文件名称 引用标签的入口文件路径即引用了所有命名空间的文件
会根据源码里的引用标签自动地对输出进行排序
也可以单独地指定每个命名空间文件
tes --outFile 输出文件名称 命名空间文件1 命名空间文件2
方式二:每个源文件都会对应生成一个JavaScript文件,然后,在页面上通过 <script>标签把所有生成的JavaScript文件按正确的顺序引进来
<script src="Validation.js" type="text/javascript" /> 命名空间文件
<script src="LettersOnlyValidator.js" type="text/javascript" /> 命名空间文件,有对第一个文件的引用标签
<script src="ZipCodeValidator.js" type="text/javascript" /> 命名空间文件,有对第一个文件的引用标签
<script src="Test.js" type="text/javascript" /> 使用文件,有对所有命名空间文件的引用标签
(5).html文件引入合并后的js文件(单独编译后的js文件)以及使用了其中内容的文件
通过命名空间的名称直接调用即可
typescript 命名空间namespace
最新推荐文章于 2024-07-19 14:46:05 发布