一、准备工作
学习命名空间之前我们先来做一下准备工作,在一个空的文件夹下创建一个新的项目,目录结构为
npm init 生成package.json
tsc -init 生成tsconfig.json
我们想要编写在src目录下,打包生成之后在build目录下,修改一下tsconfig文件
然后我们在index.html中引入打包之后生成的page.js
为了测试效果,我们在page.ts中随便写入一行代码
然后在命令行输入tsc进行编译,打开index.html,在控制台可以看到我们输入的内容就代表引入成功了
二、使用场景
我们在page.ts中写入这样一段代码
在index.html实例化page
编译后刷新index.html可以在浏览器中看到我们创建的内容
但是我们打开编译后的page.js文件会发现变量都被声明成全局变量了,这样对项目的维护是不太友好的
这时要用到我们的命名空间的NameSpace对上面的代码进行一下改造
然后我们tsc进行编译,再打开page.js可以看到只有Home被声明成全局变量了,其它都是Home的方法
然后在index.html中进行修改
打开浏览器刷新发现页面和之前一样!
证明我们的改造是有效果的,减少了全局变量,这也是命名空间的基本用法。