命名空間可以解決模塊化問題, 防止暴露統(tǒng)一的接口

比如，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 文件
<script>
  new Page()
</script>

這樣編寫完成之后，雖然完成了簡單的拆分，但沒有完全做到模塊化。
從編譯完的代碼中，可以發(fā)現(xiàn)，Header,Body,Footer都升為了全局變量。

image.png

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
<script>
  new Home.Page()
</script>

使用命名空間包裹了一層之后，就不會對外暴露了

如果需要掛載在命名空間上需要使用export

可以接著上面的繼續(xù)進行拆分，將組件相關(guān)的拆到component.ts之中。
然后更改一下對compoent下的文件的引用。

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

由于分別在兩個文件之中引入了命名空間，所以在html中需要引入兩個相關(guān)的文件，亦或者將多個文件編譯到同一份文件中去。

• 更改tsconfig.json中的outFile 屬性，制定打包后的文件名
• 更改之后，會報錯，需要將module更改為amd

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

• namespace之間的依賴關(guān)系
  通過/// <reference path=''>這樣的形式表示

/// <reference path='./component.ts'/>
namespace Home{
  export class Page{
    constructor(){
      new Components.Header()
      new Components.Body()
      new Components.Footer()
    }
  }
}