Javascript

【备战春招】第2天+commonjs-回顾ES6模块化

本文主要是介绍【备战春招】第2天+commonjs-回顾ES6模块化,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

学习到这里,我体会到了一寸光阴一寸功。
就是之前学 Vue 的时候,一些 npm 相关的学习,如果我知道怎么操作,那么到这里其实我就不用重复学习了,继续往下学,学习还是靠积累。

模块名
描述
课程名称
前端工程师2022版
课程章节
Node.js基础入门
打卡知识进程
知识进程:2 / 21
✔1.node.js初体验windows
✔2.commonjs-回顾ES6模块化
主讲老师
Dell
学习开始时间
2023.02.07 22:50
学习结束时间
2023.02.07 23:30
总计时
40 min
课程收获/主要内容/编程目标

commonjs的语法介绍
commonjs和ES6 Module的区别
为何要使用模块化(离组件化学习还有一段距离,加油)
学习感受/感想/领悟(心得)
打卡期间,如果没有如加班的需求,尽量在晚上20左右开始打卡。其他的事情先往后排排。

ES6 Module的模块化

export ... 或 export default ...
import ... from ...
一般用于前端开发

上面这些内容我之前在看公司前端的代码时见过,混了个脸熟,但具体是怎么用的,我没用过,下文可能会讲。
演示 ES6 Module

npm i @vue/cli -g
vue create es6-module-test # 后面一路回车
cd es6-module-test
npm run serve

启动服务访问首页:

文件位置:…/jyb-code/es6-module-test/src/utils.js

function sum(a,b){
    return a + b
}
export default sum

文件位置:…/jyb-code/es6-module-test/src/App.vue

...
import sum from './utils'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  mounted(){
    const res = sum(10,20)
    console.log(res)
  }
}

运行结果:

上面代码解读:
通过 export default来输出内容。然后通过import的方式来去引用这个内容。

玩法升级:
文件位置:…/jyb-code/es6-module-test/src/utils.js

export function sum(a,b){
    return a + b
}
// export default sum
export function test(){
    console.log('和只是为了好玩一起在慕课网学习')
}

文件位置:…/jyb-code/es6-module-test/src/App.vue

...
import {sum,test} from './utils'
export default {
  name: 'App',
  components: {
    HelloWorld
  },
  mounted(){
    const res = sum(10,20)
    console.log(res)
    test()
  }
}

运行结果:

到这里,通过编码,我明白了 export 和 import 是怎么玩的。

这篇关于【备战春招】第2天+commonjs-回顾ES6模块化的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!