继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【备战春招】第4天+commonjs和ES6 Module的区别

只是为了好玩
关注TA
已关注
手记 110
粉丝 24
获赞 122
模块名
描述
课程名称
前端工程师2022版
课程章节
Node.js基础入门
打卡知识进程
知识进程:4 / 21
1.node.js初体验windows
2.commonjs-回顾ES6模块化
3.commonjs的语法介绍
4.commonjs和ES6 Module的区别
主讲老师
Dell
学习开始时间
2023.02.09 19:20
学习结束时间
2023.02.09 20:10
总计时
50 min
课程收获/主要内容/编程目标
两者语法的不一样 = commonjs是执行时引入的(动态)+ES6 Module是打包时引入(静态)
学习感受/感想/领悟(心得)
我应该工作。

热身开始

了解了commonjs和 ES6 Module 模块化之后,
两者语法的不一样 = commonjs 是执行时引入的(动态)+ES6 Module是打包时引入(静态)。

可能看这文字,咱也不知道是什么意思,总之你先记住两个词,就是动态和静态。

代码演示

演示一下怎么去动?怎么去静?
show time。
代码位置:…/jyb-code/es6-module-test/commonjs-test/index.js

const flag = true
if (flag) {
    const {sum,test} = require('./utils')
    test()
    const res = sum(1000,24)
    console.log(res)
}

代码执行解读:
因为flag是true,所以说这个代码肯定会被执行,
万一你写成false,那就不执行了,是这个逻辑。
运行代码,执行结果:

想一想,我们在js语法执行的时候,if语句能不能执行?
我们在这个代码执行之前,我们能确定吗?不能确定,因为这个flag到底是true还是false你在执行到这一行之前是不知道的,所以说程序还没有开始执行的时候,你不知道这个flag是true或者false。

然后const {sum,test} = require('./utils')被执行,说明什么?
说明我们这个引用是动的,什么叫动呢?
就是我们程序在执行到这个地方的时候,才会去引用这个utils,才会去把这个sum和test拿出来。它是动态的。
什么是静态?
文件位置:…/jyb-code/es6-module-test/src/App.vue

...
import HelloWorld from './components/HelloWorld.vue'

const flag = true
if (flag) {
  import {sum,test} from './utils'
}
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  ...

运行代码,执行结果:


error Parsing error: 'import' and 'export' may only appear at the top level
是说 ‘import’ and ‘export’ 只能出现在顶级,就是这样的:


正确写法:

...
import HelloWorld from './components/HelloWorld.vue'

// import sum from './utils'
import {sum,test} from './utils'
// const flag = true
// if (flag) {
//   import {sum,test} from './utils'
// }
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  ...

我会这样类比动态和静态:
Python是解释型语言,把它理解成动态,那么在导包的时候是可以在使用这个包的上一行去引入的,不一定非要在模块文件的开头引入;
C语言是编译型语言,把它理解成静态,那么一般会先在模块文件开头导入文件,比如头文件。

这个类比不一定正确,但它的作用是方便自己理解和记忆 动 和 静。

4.1 为何要使用模块化

我们为什么要使用模块化?不用行不行?当然是不行,对吧?但是为什么要用呢?这个问题要思考清楚,你如果这个问题思考不清楚的话,光去傻傻的用,这肯定不行的,

这个用一段时间会阻碍你的眼光,然后会阻碍你的发展。所以我们想一下。第一条拆分开之后便于代码的组织和管理。

大家想一下,如果是项目比较大的话,代码比较多,项目加起来的代码有几十万行,甚至是几百万行,当然还有很多项目是上亿行代码,这也不稀奇。

比如 Windows 这个系统的这个体系加起来代码绝对上亿,

比如说我们现在要做的这些项目,如果不把这个模块拆分开,那这个代码和组织和管理,那就乱了,你想想所有的代码那么多都放在一个文件里面。

别说别的,你打开都费劲。别说组织和管理了,所以说模块化的拆分,它便于代码的一个组织和管理,我们可以拆拆拆,把这块放在这,那块放在那。这样的话,它就清晰了。

第二个,就是便于多人协作开发,想象一下,一个项目不可能一个人开发,项目越大,这个协作的人就越多。

如果是说没有模块化,所有代码都混在一块,如果协作开发的话,那大家全部开发一个代码文件,那不就乱了吗?很容易产生冲突,你改着改着,别人又改了你的了。如果是模块拆分开的话,大家各写各的,你一个文件,我一个文件,写完之后一合并,没事了,只要定好我们的引用的规范就可以了。

总之是得益于模块化的拆分。

成熟的语言都是支持模块化的,比如说这个C语言,C++,Java,Python,Go这些,包括Nodejs,它都是支持模块化。

如果一个语言不支持模块化,那这个语言就没法我们在项目中去使用。

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP