前端模块化
看到tsconfig.json文件里的module
编译选项想到的,发现自己有点迷糊
从ts默认配置的commonjs
规范开始
// 定义模块math.js
var basicNum = 0;
function add(a, b) {
return a + b;
}
module.exports = { //在这里写上需要向外暴露的函数、变量
add: add,
basicNum: basicNum
}
// 引用自定义的模块时,参数包含路径,可省略.js
var math = require('./math');
math.add(2, 5);
// 引用核心模块时,不需要带路径
var http = require('http');
http.createService(...).listen(3000);
总的来说用module.exports = {你要暴露的对象或方法}
在想用的时候用require('xx路径')
,这时对应模块的exports对象会暴露给你,你可以随便赋给一个值方便以后调用,看了文章说的是暴露的对象为深拷贝对象,对其修改不会改变原模块
接下来是ES6提供的模块化
/** 定义模块 math.js **/
var basicNum = 0;
var add = function (a, b) {
return a + b;
};
export { basicNum, add };
/** 引用模块 **/
import { basicNum, add } from './math';
function test(ele) {
ele.textContent = add(99 + basicNum);
}
这种方式在引入时要确定引入的变量或者方法名,我们还可以通过一下方式来默认导出
/** export default **/
//定义输出
export default { basicNum, add };
//引入
import math from './math';
function test(ele) {
ele.textContent = math.add(99 + math.basicNum);
}
这时我们在使用模块的时候可以不考虑导入具体的模块,而导入整个模块文件,但是现在大环境下已经不推荐这么做了,更加推荐按需导入,减少代码体积,防止被叼