持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第30天,点击查看活动详情
今天开始和大家一起系统的学习ES6+,每天3分钟,用一把斗地主的时间,重学ES6+,前面我们介绍了模块化的历史,今天介绍模块化处理方案
exports.a
module.exports ={a:a}
// 源码
module.exports = {}
exports = module.exports
//最终能导出的一定是module.exports()
// main.js
const why = require("./why.js")
console.log(why)
setTimeout(() => {
console.log(why.name)
why.name = "james"
}, 1000)
// why.js
const info = {
name: "why",
age: 18,
foo: function() {
console.log("foo函数~")
}
}
setTimeout(() => {
// info.name = "kobe"
console.log(info.name)
}, 2000)
module.exports = info
两个文件 执行node main.js 输出结果为
{ name: 'why', age: 18, foo: [Function: foo] } why james
先打印why对象,然后打印why 修改why name 打印 james
由此可见,require 引入的文件是加载时执行
require是一个函数,可以帮助我们引入一个文件(模块)中导出的对象。
require(X)
查找规则
对应的模块加载完毕,当前模块中的内容才能被运行
;加载的js文件都是本地文件
,加载速度非常快;加载js文件需要先从服务器将文件下载下来
,之后再加载运行
;同步的就意味着后续的js代码都无法正常运行
,即使是一些简单的DOM操作
;ES Modules
,另一方面借助于webpack等工具可以实现对CommonJS或者ESModule代码
的转换; AMD和CMD已经使用非常少了
,所以这里我们也不展开介绍了。