内容字号: 默认 大号 超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到宋体切换到微软雅黑

首页 > Vue >

CommonJS规范与ES6模块化之import与require的区别

发布:2020-11-22 浏览: 评论(
我们在使用nodejs开发vue项目的过程中经常会出现export与import与require()等等语句,虽然知道怎么用,但是却不知由来,一会是module.exports,一会又是export default,很乱,所以今天来梳理下;
首先找好对应关系,都是导入和导出,require()与module.exports是一对,import与export又是一对

const Vue = require('vue');

module.exports = {

}

首先module是代表当前的这个文件系统,跟this类似,规范叫法是当前模块,所以module.exports就是当前模块的导出的意思,exports是模块的导出出口,将想要导出的所有对象都放到这里来,也就成了module.exports={}的写法,

至于require()方法是哪里来的,还要说说这一对鸳鸯的归属问题,这种写法是来自一套服务端规范,叫CommonJS规范,注意了,也就是说这个东西本来是后端才有的,前端以前根本不知道这个东西,现在出现在前端视野完全是因为nodejs嵌入了这一套规范,使用nodejs过程中我们才看到上面的require()与module.exports,别忘了nodejs本来就是服务器端的东西,所以出现就不奇怪了吧,其实这两个导入导出在人家后端那里可能都用到烂了,我们前端不知道而已;

那后端为什么要使用CommonJS规范?

1、CommonJS规范很好的解决了全局变量污染问题,每个模块都具有独立的封装作用域,互不干扰。
2、CommonJS规范支持模块引入和导出,这样可以连接各个不同模块,实现模块间的依赖关系。

这可是好东西啊,而洽洽前端却一直没有模块(module)体系,没有模块化的功能,所以ES6出来就干了这件事,ES6模块化完全代替了Commonjs规范,现在我们所看到的另一种导入和导出写法,就是ES6来的:
 

import Vue from 'vue';

export default{
    
}

ES6模块导入的常见写法有:

//普通的js文件以及vue文件,都可以省略后缀名,前面是命名,后面是文件的路径
import Name from "/name.js"
import Name from "/name"

import Age from "/age.vue"
import Age from "/age"

//插件的整体导入,名字可以随便起
import Element from "element-ui"

//只导入插件内部指定名称的组件(名称是内部定好的,不能更改)
import { Message , Button , Select} from "element-ui"

//结合以上两种写法(Element这种只能有一个)
import Element , { Message , Button , Select} from "element-ui"

//这种写法报错,命名有且只能有一个
import elementUI , Element , { Message , Button , Select} from "element-ui"

再来看看导出的写法:

//export 后面跟的值必须是一个接口(对象),不能是具体的一个值,否则报错

//最常见的写法,default的意思就是不命名当前的模块,在import的时候可以自由命名:import Element from "element-ui"
export default {
    ...
}

//function的写法,import的时候也可以自由命名:import Dododo from "文件的路径"
export default function do(){
    ...
}

//如果没有default,而是命了名的导出,import就这样写,需要大括号:import { do } from "文件的路径"
export function do(){
    ...
}

//以下写法都是错误的,说过了,export后面不能是具体的一个值,必须是接口(对象):
export 1;//错

var a = 1;
export a ;//错

function go(){
   ...
}
export go ;//错

//上面的正确写法是(第一个无论怎么写都不对,因为没有变量),从第二个起:
export {a} 或者export var a = 1;

export { go } 或者 export default go

具体的用法,大家可以查阅更多资料来巩固
前端新手交流群
欢迎加入web前端新手交流qq群:734802480

更多文章

相关文章

评论

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。


Copyright © 2014-2019 seozhijia.net 版权所有-粤ICP备13087626号-4