网站开发 招聘/热搜榜上能否吃自热火锅
ES6 Module
模块，是能够单独命名并独立完成一定功能程序语句的集合
定义听上去高大上，其实在日常项目中几乎每个文件都会用到，甚至很不起眼，
react组件的引用：
// router.js
import { createHashRouter } from 'react-router-dom';
import Contact from './pages/Contact';const router = createHashRouter([{path: '/',element: <Contact />,
]);export { router };
// contact.jsx
export default function Contact() {return (<div>Contact</div>)
}
以上的export、import正对应ES6module的两个特征
- export： 规定模块对外接口
- import：用于输入其他模块提供的功能
为什么模块化？
- 代码抽象
- 代码封装
- 代码复用
- 依赖管理
模块化机制
AMD/commonJs两种机制都只能在运行时确定：
AMD
代表库require.js
/** main.js / **/
require.config({baseUrl: "js/lib",paths: {"jquery": "jquery.min", }
});
require(["jquery"],function($,_){//code
});
commonJs
一般用于node之类的服务端。
- 模块同步加载，只有加载完成才能执行后面的操作
- 首次加载缓存，再次加载只返回缓存结果
const { read, write } = require('db')// 等价于
let _db = require('db');
let read= _db.read;
let write = _db.write ;
ES6module
但ES6静态化，编译时就能确定模块的依赖关系和输入输出
- 不缓存，只加载需要的方法
- 编译时，import提升到整个模块的头部（但建议手动放头部）
- 多次相同导入，只执行一次
foo()import { foo } from 'my_module';
import { foo } from 'my_module';