typescript 命名空间namespace

小鱼儿 2021-07-25 00:41 536阅读 0赞

作用:代表内部模块,将项目模块化,减少全局变量,避免污染全局,提供逻辑分组和避免命名冲突
    
    (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文件)以及使用了其中内容的文件
    	通过命名空间的名称直接调用即可