模块化:ES Module与commonJS
模块化以及模块化开发:
模块化开发的目的是将程序划分成一个个小的结构,这个结构有属于自己的代码逻辑,有自己的作用域,不会影响到其他的结构,这个结构希望暴露的变量,函数,对象给其他结构使用,也可以通过某种方式导入其他结构的变量,函数,对象
上面这种结构叫模块,按照这种结构划分开发的过程,就是模块化开发的过程
ES6才开始有的模块化(ES Module),在此之前,为了支持模块化,有很多模块化规范:AMD(异步加载,提前加载,依赖前置 require.js curl.js),CMD(异步加载,按需加载,依赖就近 seajs ),Commonjs(vue cli/ creat-react-app是基于webpack,webpack基于node,node支持commonjs)
ES Module、CommonJS、AMD、CMD规范 - 要慢慢来 - 博客园
再次梳理AMD、CMD、CommonJS、ES6 Module的区别_雾空-CSDN博客
AMD与CMD的区别_chongtui4043的博客-CSDN博客
Commonjs:社区里面的一种规范,node是这种规范的一种实现,建成CJS,webpack打包工具具备对Commonjs的支持和转换
module.exports = {mode:entry: output:
}
exports和module.exports可以负责模块内容的导出
require函数帮我们导入其他模块(自定义,系统,第三方库)的内容
// a.jsvar name = 'wy'
var age = 18module.exports = { //导出name,age
}// b.js
const {name ,age}= require('./a') // 导入
console.log(name,'name');
console.log(age, 'age');
第二种方法:
// a.js
var name = 'wy'
var age = 18exports.name = name
exports.age = age// b.js
const {name ,age}= require('./a')
console.log(name,'name');
console.log(age, 'age');
源码:
module.exports = { }
exports = module.exports
module.exports和exports指向同一片内存,exports添加属性,module.exports也会添加 ,最终导出的一定是module.exports
// a.jsvar name = 'wy'
var age = 18exports = { // 这种方法不可取,因为新开辟了一块内存空间name,age
}// b.js
const {name ,age}= require('./a') // 导入
console.log(name,'name');
console.log(age, 'age');
require工作原理:
是一个函数,能够引入一个文件被导出的对象
require(X) X不同,查找规则不同
情况一,X是node的核心模块(path,http )直接返回核心模块,不再查找
require('path')
情况二:路径 , ./当前路径 /电脑的跟路径
require('./abc')
第一步:将abc当作文件在对应目录查找
有后缀:按照后缀查找相应的文件
没有后缀:先查找abc文件,然后找abc.js文件,然后找abc.json 文件,最后找abc.node文件,
第二步:没找到对应文件,将abc作为目录
查找abc/index.js 文件,然后找abc/index.json 文件,最后找adc.node文件
情况三:不是路径也不是核心模块,引入第三方库
const axios = require('axios')
axios.get()
如果上面都不符合,报错:no found
模块加载的过程:
第一次引入时,js中的代码会被运行一次
多次加载,会缓存,最终只会运行一次(原理:每个模块都有一个module的属性,false表示还没加载完,true表示加载完毕)
图结构分为:深度优先和广度优先,node采用深度优先
循环引入的模块加载顺序:main - aaa -ccc - ddd -eee - bbb (深度优先)
commonjs缺点:加载模块是同步的,只有加载完毕模块才能被运行,(在服务器不会有问题,因为服务器加载的js文件都是本地文件, 速度很快)在浏览器中不太适合,加载时文件需要从服务器中下载下来,才会运行,不然会导致后续代码无法运行,所以在浏览器不使用commonjs ,但是webpack会使用commonjs是另外一回事,因为人家会将代码转化成浏览器可执行的代码。
ES Module:(严格模式)
ES Module与commonJS不同之处:
export 负责导出 ,import负责导入
导出基本使用
// index.html<script src='./main.js' type='module'></script> <!-- 作为普通代码解析 遇到import会报错 需要加type='module' 代表模块化js文件-->// main.js
import { name,age } from "./foo.js";
console.log(name,'name');
console.log(age, 'age');// foo.js
export const name = 'wy'
export const age = 18
需要用到vscode 插件Live Server
导出第二种方式 export导出和声明分开
// index.html<script src='./main.js' type='module'></script> <!-- 作为普通代码解析 遇到import会报错 需要加type='module'-->// main.js
import { name,age } from "./foo.js";
console.log(name,'name');
console.log(age, 'age');// foo.js
const name = 'wy'
const age = 18
export {name, age
}
// 导出第三种方式 第二种的升级版: 取别名
// index.html<script src='./main.js' type='module'></script> <!-- 作为普通代码解析 遇到import会报错 需要加type='module'-->// main.js
import { fName, fAge } from "./foo.js";
console.log(fName,'fName');
console.log(fAge, 'fAge');// foo.js
const name = 'wy'
const age = 18
export {name as fName,age as fAge
}
导入的方式: 以上都是方式一,基本使用
导入第二种方式 导入时起别名
// index.html<script src='./main.js' type='module'></script> <!-- 作为普通代码解析 遇到import会报错 需要加type='module'-->// main.js
import { name as fName,age as fAge } from "./foo.js";
console.log(fName,'fName');
console.log(fAge, 'fAge');// foo.js
const name = 'wy'
const age = 18
export {name, age
}
// 导出方式三 将导出所有内容放在一个标识符中
// index.html<script src='./main.js' type='module'></script> <!-- 作为普通代码解析 遇到import会报错 需要加type='module'-->// main.js
import * as foo from "./foo";
console.log(foo.age); //也会避免命名冲突// foo.js
const name = 'wy'
const age = 18
export {name, age
}
导入导出同时使用
上面是目录,format和request 文件会统一放到index.js 里面,index.js作为入口
// ============format.js==========
function add (m,n){return m+n
}
export{add
}// ============request.js==========
function sub (m, n) {return m - n
}
export{sub
}// ============index.js==========// 导出方式一
// import { add } from "./format.js";
// import { sub } from "./request.js";
// export{
// add,sub
// }// 导出方式二 阅读性强
export { add } from "./format.js";
export { sub } from "./request.js";// 导出方式三
export * from "./format.js";
export * from "./request.js";// =============index.html========
<script src='./main.js' type='module'></script> <!-- 作为普通代码解析 遇到import会报错 -->//==============main.js===========
import { add,sub } from "./utils/index.js";
console.log(add(10,20),'add');
console.log(sub, 'sub');
default默认导出:一个模块只有一个默认导出
默认导出可以不需要重新定义名字
导入时不需要使用{},并且可以自己定义名字
方便和现有commonjs等规范相互操作
==================main.js=====================
//import { name, age } from "./foo.js";
// import * as foo from "./foo.js"
import wy from "./foo.js" // 导入的是默认的导出
console.log(wy, 'wy');
==================foo.js=====================const name = 'wy'const age = 18const foo = 'foo value' // 作为默认导出
// 默认导出方式一
// export{
// name,age,foo as default
// }// 默认导出方式二 常见
export {name, age
}
export default foo
import函数
//import { name, age } from "./foo.js"; //要等待全部加在完毕import ('./foo.js').then(res=>{ //而且是异步,不用等加载完毕执行下面的代码console.log(res,'res');
}) //返回的是promise//es11新增特性 meat 属性本身也是一个对象 {url:'当前所在路径'}
console.log(import.meta,'meta');
console.log('hello????')
模块化:ES Module与commonJS相关推荐
- 前端模块化- ES Module 和 CommonJS 的使用
ES Module 导入 导入的值不能重新赋值,类似于使用 const 声明过一样. 命名导入 导入特定项 import { something } from './module.js'; 导入特定项 ...
- ES Module 和 CommonJS
一.前言 早期的 JavaScript 作为一种脚本语言,其产生的目的只是为了简单的表单验证或动画实现. 并且不需要分离多个 js 文件来写,功能相对简单.只需要内嵌一个 script 标签即可. a ...
- 了解一下ES module 和 Commonjs
最近测试了几个 ES module 和 Commonjs 的例子,理解了之前不太理解的概念,记录一下.要是想多了解的可以去看看阮老师的 Module 那部分.会贴一小部分的代码,不会贴所有验证的代码. ...
- ES module和commonJS循环引用问题
ES module和commonJS在对于循环引用模块的问题上处理方式不太相同,这是因为它们链接模块的机制不同,具体参考文章: 文章地址: ES module和commonJS循环引用问题
- es module 和 commonjs 模块化实践
1.当export default 导出的值是基本数据类型时,其值是不能被同步修改的. 举个例子,我们新建文件: base.js let name = 'Joker'; export const fn ...
- ES Module与CommonJS
ES Module ES Module 是原⽣实现的模块化⽅案,与 CommonJS 有以下⼏个区别 1. CommonJS ⽀持动态导⼊,也就是 require(${path}/xx.js) ,后者 ...
- ES Module和CommonJS的区别
ESM:import, import(), export, export default CommonJS: require(), module.exports 1. CommonJS输出的是值的拷贝 ...
- ES Module 和 Commonjs | require和import的区别
1. 语法1.1 ES Module导出:export / export default 导入: import * from 'module'1.2 Commonjs导出:module.exports ...
- ES module与commonjs的区别
ES module common js 只读引用 值的拷贝 编译时输出接口 运行时加载 异步加载 同步加载 只读引用 值的拷贝
最新文章
- 亚马逊专家揭秘:如何建立自动检测乳腺癌的深度学习模型
- C语言超级玛丽菜单模块源码
- 外卖平台用户端APP说明
- IAM(身份验证以及访问控制)
- [Comet OJ - Contest #7 D][52D 2417]机器学习题_斜率优化dp
- 基于JAVA+SpringMVC+Mybatis+MYSQL的宠物商城
- 北海哪里可以学计算机编程,编程真的很难吗?为什么会认为学编程难?
- C语言学习笔记---typedef 简介
- sklearn中的xgboost_XGBoost的介绍、应用、调参、知识点
- 安装浏览器的vue插件
- windows下php mongodb 安装配置使用查询
- (CSCD 理工科)中文科技核心期刊汇总
- java基础之URLDecoder异常解决方法
- OSPF配置命令总结
- drf 配置文件 过滤类 全局异常 接口文档
- lpush和rpush的区别_Redis系列(七):数据结构List双向链表中LPUSH、LPOP、RPUSH、RPOP、LLEN命令...
- 安卓开发:Password verification failed
- 设备零线地线短路维修
- Python趣味|为了追到小姐姐,我用 Python 制作了一个机器人
- 网上医疗预约挂号系统
热门文章
- 小程序基础篇-视图与逻辑
- 【InterFace】I2C 总线详述
- 大数据架构师之路-大数据框架大全
- Win键无效/Win键失灵/Win键被禁用/Win键+组合键不起作用
- 小程的第一节C语言课
- WebServerApplication
- DSP CCS12.00 芯片:TMS320F28335 PWM 的设计
- 孙鑫java高清完整版(课件+视频)_孙鑫Java高清完整版(课件+视频) - 程序语言 - 小木虫 - 学术 科研 互动社区...
- 台灯显色指数多少合适?专家教你护眼灯怎么选
- Linux 下创建新用户并且添加为root组用户