namespace 在typescript里给我们带来的好处就是给我们一个类似模块化开发的方式，让我们能尽量少的声明全局变量。或者说，把一组相关的内容，封装到一起去。对外提供统一的暴露接口
不用命名空间的情况下
// page.ts
class Header {
constructor() {
const elem = document.createElement('div');
elem.innerText = 'this is Header';
document.body.appendChild(elem);
}
}
class Content {
constructor() {
const elem = document.createElement('div');
elem.innerText = 'this is Content';
document.body.appendChild(elem);
}
}
class Footer {
constructor() {
const elem = document.createElement('div');
elem.innerText = 'this is Footer';
document.body.appendChild(elem);
}
}
export class Page {
constructor() {
new Header();
new Content();
new Footer();
}
}
// 编译后的 page.js
"use strict";
var Header = /** @class */ (function () {
function Header() {
var elem = document.createElement('div');
elem.innerText = 'this is Header';
document.body.appendChild(elem);
}
return Header;
}());
var Content = /** @class */ (function () {
function Content() {
var elem = document.createElement('div');
elem.innerText = 'this is Content';
document.body.appendChild(elem);
}
return Content;
}());
var Footer = /** @class */ (function () {
function Footer() {
var elem = document.createElement('div');
elem.innerText = 'this is Footer';
document.body.appendChild(elem);
}
return Footer;
}());
var Page = /** @class */ (function () {
function Page() {
new Header();
new Content();
new Footer();
}
return Page;
}());
// index.html引用 page.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./dist/page.js"></script>
</head>
<body>
<script>
new Page();
</script>
</body>
</html>
上边这种写法，会出现一种情况，那就是暴露出了过多的全局变量。
image.png
为了避免这种情况出现，可以使用命名空间的写法,用namespace Home{ }包裹。然后就可以通过Home.来访问里边的变量，当然，只能访问里边通过export导出的变量
namespace Home{
class Header {
constructor() {
const elem = document.createElement('div');
elem.innerText = 'this is Header';
document.body.appendChild(elem);
}
}
class Content {
constructor() {
const elem = document.createElement('div');
elem.innerText = 'this is Content';
document.body.appendChild(elem);
}
}
class Footer {
constructor() {
const elem = document.createElement('div');
elem.innerText = 'this is Footer';
document.body.appendChild(elem);
}
}
export class Page {
constructor() {
new Header();
new Content();
new Footer();
}
}
}
// 编译后的 page.js
"use strict";
var Home;
(function (Home) {
var Header = /** @class */ (function () {
function Header() {
var elem = document.createElement('div');
elem.innerText = 'this is Header';
document.body.appendChild(elem);
}
return Header;
}());
var Content = /** @class */ (function () {
function Content() {
var elem = document.createElement('div');
elem.innerText = 'this is Content';
document.body.appendChild(elem);
}
return Content;
}());
var Footer = /** @class */ (function () {
function Footer() {
var elem = document.createElement('div');
elem.innerText = 'this is Footer';
document.body.appendChild(elem);
}
return Footer;
}());
var Page = /** @class */ (function () {
function Page() {
new Header();
new Content();
new Footer();
}
return Page;
}());
Home.Page = Page;
})(Home || (Home = {}));
// index.html引用 page.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./dist/page.js"></script>
</head>
<body>
<script>
new Home.Page();
</script>
</body>
</html>
命名空间声明后，会形成全局变量。命名空间之间也会相互依赖。具体依赖的写法就是通过 ///<reference path='./components.ts'/>
// 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);
}
}
}
// page.ts
/// <reference path='./components.ts'/>
namespace Home{
export class Page {
constructor() {
new Components.Header();
new Components.Content();
new Components.Footer();
}
}
}
命名空间，还可以暴露interface
namespace Components{
export interface User{
name: string;
}
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);
}
}
}
// page.ts
/// <reference path='./components.ts'/>
namespace Home{
export class Page {
user: Components.User = {
name:'yang'
}
constructor() {
new Components.Header();
new Components.Content();
new Components.Footer();
}
}
}
命名空间里，还可以导出子的命名空间
namespace Components{
export namespace SubComponents{
export class Test{}
}
export interface User{
name: string;
}
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);
}
}
}
image.png
