import/export模块的方式，以及namespace

导出有三种方式：
1、export default 是默认导出，只能导出一个模块对象，一个模块中只能使用一次，import引入时直接引入默认导出的变量名即可【es6】
示例：在test.js中export default const a = 1; import a from 'test';
2、export是导出，一个模块中可以使用多次,用于导出模块中的变量，对象，函数，类。【es6】
示例：在test.js中export const a = 1;import {a} from 'test'
export {a,b,c} ; import {a,b,c} from 'test'
3、module.exports跟export差不多，都能导出多个【CommonJS】
示例：在test.js中module.exports={const a=1; b=()=>{console.log(123)}; } / const test = require('test'); test.a; test.b
module.exports={a,b,c} / const test = require('test'); test.a; test.b

导入有两种方式：
1、import {xx} from 'xx' 【es6】
2、const xx = require('xx') 【es5】

总结：
1、export或export default 常常搭配 import {xx} from 'xx' 一起使用，因为都是ES6语法
2、module.exports 常常搭配 const xx = require('xx') 一起使用，因为都是nodejs语法
混搭也是可以的。

 

 

 

命名空间的概念
在ts源代码中写了四个类：Header、Content、Footer、Page，Page类作用是把前三个new出来
在index页面中用script标签引入：引入后new Page()进行使用，查看编译后的js，发现Header、Content、Footer、Page都是全局变量
而实际我们只用到了Page类，我们只需要把Page变成全局变量
可以把四个类放在namespace中，相当于把四个封装成了一个命名空间，然后用export把Page暴露出去即可，在index中可以用Home.page去调用

namespace Home {
    class Header {
    }

    class Content {
    }

    class Footer {
    }

    export class Page {
        constructor() {
            new Header()
            new Content()
            new Footer()
        }
    }
}

如果我们想把Header、Content、Footer提到别的文件中，可以再创建一个namespace
--components.ts--

namespace Components {
    export class Header {
    }

    export class Content {
    }

    export class Footer {
    }
}

--page.ts--

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

你可以在命名空间中再创建子命名空间，使用Components.SubComponents.Test去调用

namespace Components {
    export namespace SubComponents{
        export class Test{}
    }
}