06_模块化

模块：我们可以吧一些公共的功能单独抽离成一个文件作为一个模块，模块里面的变量、函数、类等默认是私有的。如果我们想要在外部访问模块里面的数据（变量、函数、类 ）我们就需要通过export暴露模块里面的数据（变量、函数、类）。暴露之后我们通过import引入模块就可以使用模块里面的向外暴露的数据了

第一种方式，在每个需要向外暴露方法或变量前面增加一个export

//A.ts文件
//第一种暴露方式在function前面增加一个export
export var dbUrl = 'sss';
export function getDataA():any {
    console.log('获取getData数据库的数据');
    return [
        {
            title:'123'
        },
        {
            title:456
        }
    ]
}
export function getDataAs():any {
    console.log('获取getDatas数据库的数据');
    return [
        {
            title:'123'
        },
        {
            title:456
        }
    ]
}

B.ts文件引用

引用的时候使用的是import，这是在es6中新增的导入方式。这里导入使用的是{}的方式，因为在A.ts文件里面使用的是export方式到处的

//B.ts文件
import {getDataA,getDataAs} from "./05_泛型/modules/db";
getDataA(); //调用A.ts文件里面的方法
getDatasA(); //调用A.ts文件里面的方法

第二种方式，每个源文件这里是A.ts，都有一个默认的export default，在import引用的时候不需要使用{}来进行

//A1.ts文件
//第一种暴露方式在function前面增加一个export
export var dbUrl2 = 'sss';
export function getDataA2():any {
    console.log('获取getData数据库的数据');
    return [
        {
            title:'123'
        },
        {
            title:456
        }
    ]
}
function getDataAs():any {
    console.log('获取getDatas数据库的数据');
    return [
        {
            title:'123'
        },
        {
            title:456
        }
    ]
}
export default getDataAs2; //这个方法在B1.ts文件里面是不需要使用{}来导入

B1.ts引用

//B1.ts文件
import {getDataA2} from "./05_泛型/modules/db"; //这个getaDataA2方法在A.ts里面只是用了export 进行导出的。所以只能使用{}
import getDataAs2 from "./05_泛型/modules/db"; //getDataAs2在A1.ts文件里面使用的是export default方式向外暴露的，所以不需要大括号
getDataA(); //调用A.ts文件里面的方法
getDatasA(); //调用A.ts文件里面的方法