命名空间实现组件化
上一篇文章实现了模块化和避免全局变量的污染，但是我们工作中分的要更细致一些，会单独写一个components的文件，然后进行组件化。
在src目录下新建一个文件components.ts，编写代码如下：
namespace Components {
export class Header {
constructor() {
const elem = document.createElement("div");
elem.innerText = "This is Header";
document.body.appendChild(elem);
}
}
export class Content {
constructor() {
const elem = document.createElement("div");
elem.innerText = "This is Content";
document.body.appendChild(elem);
}
}
export class Footer {
constructor() {
const elem = document.createElement("div");
elem.innerText = "This is Footer";
document.body.appendChild(elem);
}
}
}
每个类(class)都使用了export导出，导出后就可以在page.ts中使用这些组件了。
代码如下：
namespace Home {
export class Page {
constructor() {
new Components.Header();
new Components.Content();
new Components.Footer();
}
}
}
这个时候使用tsc进行重新编译，但在预览时，你会发现还是会报错，找不到Components,想解决这个问题，我们必须要在index.html里进行引入components.js文件。
<script src="./build/page.js"></script>
<script src="./build/components.js"></script>
多TS文件编译成一个js文件
直接打开tsconfig.json文件，然后找到outFile配置项，这个就是用来生成一个文件的设置，但是如果设置了它，就不再支持"module":"commonjs"设置了，我们需要把它改成"module":"amd",然后在去掉对应的outFile注释，设置成下面的样子。
{
"outFile": "./build/page.js"
}
配置好后，删除掉build下的js文件，然后用tsc进行再次编译。
然后删掉index.html文件中的component.js,在浏览器里还是可以正常运行的。
子命名空间
顾名思义，就是在命名空间里，还可以继续写命名空间，例如我在Components.ts文件下修改代码如下：
namespace Components {
export namespace subspace{
export class unordered{
constructor(){
const cul = document.createElement("ul")
const cli = document.createElement("li")
cli.innerHTML = `<p style="color:red">`我是ul li标签`</p>`
cul.appendChild(cli)
document.body.appendChild(cul)
}
}
}
}
写完后在控制台再次编辑tsc，然后在浏览器中也是可以看到这样一段话的。