命名空间 namespace

2022-04-15  本文已影响0人  泡杯感冒灵
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
上一篇 下一篇

猜你喜欢

热点阅读