前言
随着项目不断的变大,业务越来越复杂,代码的冗余程度不断上升,于是模块化的方式逐渐流行起来.
我们坚决不能写别人看不懂的代码!!
模块化的作用
作为设计思想中的单一功能原则,模块化很好的拆解了功能模块复杂的作用,进而形成多模块组合形成大模块功能.
常用的模块化分类
1.ES Module规范(用于前端模块化)
2.Common JS规范(用于node.js的模块化)
ES Module规范的使用:
例1:单个抛出/导入
//抛出文件
export let myName = 'test1';
//导入文件
import {myName} from './test1/js';
例2:多个同时抛出/导入
//抛出文件
const a = 10;
const b = 'hello';
const c = ()=>{
return 'abc';
}
export {a,b,c};
//导入文件
import {a,c} from './foo.js';
console.log(a);//12
console.log(c());//abc
例3:重命名
//抛出文件
const a = 10;
const b = 'hello';
const c = ()=>{
return 'abc';
}
export {
a as d,//重命名
b as e,
c as f,
}
//导入文件
import {d,f} from './foo.js';
console.log(d);//10
console.log(f());//abc
例4:使用import * 导入整体化
//抛出文件
export const a = 10;
export const b ='张三';
//导入文件
import * as foo from './ziyue.js';
console.log(foo.a);//10
console.log(foo.b);//张三
例5:通过export * 统一抛出,整体模块化
//抛出文件
在vue2中的util目录,作为整个项目的工具模块
src/core/util/lang.ts
src/core/util/perf.ts
...
在vue2中的util目录的src/core/utilindex.ts中
export * from 'shared/util'
export * from './lang'
export * from './env'
export * from './options'
export * from './debug'
export * from './props'
export * from './error'
export * from './next-tick'
//引入文件
import { warn } from '../util/index'
...
例6:
//抛出文件
const fuc = (res)=>{
return res
};
export default fuc;
//引入文件
import fuc from './fuc.js';
ES Module规范的注意点
-
export 能在一个文件模块中多次使用
-
export default 只能在一个文件模块中使用一次
CommonJS规范的使用:
例1:module.export的单个抛出
//抛出文件
const fuc = ()=>{console.log('fuc')};
module.exports = ziyue;
//导入文件
const fuc = require('./fuc');
例2:module.export的多个抛出
//抛出文件
const a = 1;
const b = 2;
const c = ()=>a + b;
module.exports = {
a,b,c
};
//导入文件
const {a,b,c} = require('./abc.js');
console.log(a,b,c());//1 2 3
例3:重命名
//抛出文件
const a = 1;
const b = 2;
const c = ()=>b-a;
module.exports = {
d:a,
e:b,
f:c,
}
//导入文件
const {d,e,f} = require('./abc.js');
console.log(d,e,f());//1,2,1
typescript中的模块化
-
模块化中无法识别其他类型,所以对非ts/js文件模块进行类型扩充.并创建*.d.ts声明文件
//global.d.ts文件下 declare module '*.gif' { export default src as string; } //将*.gif定义为string类型 等效于 declare module '*.gif' { const src:string; export default src; } -
import type和export type
import type only imports declarations to be used for type annotations and declarations. It always gets fully erased, so there’s no remnant of it at runtime.简而言之,import type 仅仅用于对类型的声明,当运行时,将会完全被删除ts的编译流程: ts经过babel编译成js.
而在babel处理中,并不知道是否需要是类型还是值 所以通过import和import type分别定义值和类型
项目中常用的模块化思路
-
例如在开源项目tdesign-react-starter-develop中 src /assets 对应静态资源 /components 对应公用组件 /configs 环境配置和颜色配置 /hooks 公用钩子函数 /layouts 页面布局 /Header 头部布局 Footer.tsx 对应页面布局的尾部 Page.tsx 对应页面主内容 /pages 页面目录 /router 路由目录
