Typescript学习笔记(16) ----- namespace 命名空间

命名空间可以解决模块化问题, 防止暴露统一的接口

比如，Header,Body,Footer是三个模块

// index.ts 文件
class Header{
  constructor(){
    let element = document.createElement('div')
    element.innerText='Header'
    document.body.appendChild(element)
  }
}

class Body{
  constructor(){
    let element = document.createElement('div')
    element.innerText='Body'
    document.body.appendChild(element)
  }
}

class Footer{
  constructor(){
    let element = document.createElement('div')
    element.innerText='Footer'
    document.body.appendChild(element)
  }
}

class Page{
  constructor(){
    new Header()
    new Body()
    new Footer()
  }
}

//html 文件

这样编写完成之后，虽然完成了简单的拆分，但没有完全做到模块化。
从编译完的代码中，可以发现，Header,Body,Footer都升为了全局变量。

image.png

从console里面可以访问到这个变量

image.png

为了能够防止变量的暴露，这里需要用到命名空间去进行限制。

namespace Home{
  class Header{
    constructor(){
      let element = document.createElement('div')
      element.innerText='Header'
      document.body.appendChild(element)
    }
  }
  
  class Body{
    constructor(){
      let element = document.createElement('div')
      element.innerText='Body'
      document.body.appendChild(element)
    }
  }
  
  class Footer{
    constructor(){
      let element = document.createElement('div')
      element.innerText='Footer'
      document.body.appendChild(element)
    }
  }
  
  export class Page{
    constructor(){
      new Header()
      new Body()
      new Footer()
    }
  }
}
//index.html

使用命名空间包裹了一层之后，就不会对外暴露了

如果需要挂载在命名空间上需要使用export

可以接着上面的继续进行拆分，将组件相关的拆到component.ts之中。
然后更改一下对compoent下的文件的引用。

new Components.Header()
new Components.Body()
new Components.Footer()

由于分别在两个文件之中引入了命名空间，所以在html中需要引入两个相关的文件，亦或者将多个文件编译到同一份文件中去。

• 更改tsconfig.json中的outFile 属性，制定打包后的文件名
• 更改之后，会报错，需要将module更改为amd

    "module": "amd",
    "outFile": "./build/page.js", 

• namespace之间的依赖关系
  通过/// 这样的形式表示

/// 
namespace Home{
  export class Page{
    constructor(){
      new Components.Header()
      new Components.Body()
      new Components.Footer()
    }
  }
}