js中不同的暴露和引入文件的方式
程序员文章站
2022-06-30 19:15:40
...
最近在文件引入和暴露上栽了一个大坑。所以决定总结一下这些方式
我通常使用的暴露有三种方式:exports
module.exports
export default
export
我经常使用的引入方式有两种:import from
和require
export default 和 export区别
这是一个es6新引入的一种暴露方式,他有一个非常重要的地方就是,使用这种方式暴露的内容必须使用import引入
- export
- 1.export暴露的类型一定是一个对象你可以使用他暴露任何的内容,变量function,和class都行但是这都是被暴露对象中的一个值
- 2.你可以使用import或者require任何一种去引入这个export对象但是注意引入的一定是一个对象,可以使用结构赋值的方式引入这个对象
//文件test1.js
function test(){ console.log('test');}
export {test} //注意暴露的一定是对象没如果你单独export test是要报错的
//test2.js
import {test} from './test1.js'
//但是要注意:你不可以使用
//import a from 'test1.js' 然后执行a.test()这样会报错,因此必须在import这里就结构
test();
或者你可以采用require引入(但是require只能引入整个export)
const test1Demo = require('./test1.js');
test1Demo.test();
- export default
- 1.使用了这种暴露方式只能暴露当前文件中的一个变量(包括function和变量和类还有对象),所以引入的时候就仅仅代表着这个变量
- 2.记住只能采用import from这种引入方式
function test(){ console.log('test');}
export default test;
import test from './test1';
test();
function test(){ console.log('test');}
const a=2
export default {test,a}
import test from './test1';
test.test();
exports 和 module.exports区别
区别主要在于:1.每次引入的是module.exports的值,只有当module.exports的值是空的会把exports的值赋给module.exports然后任然暴露module.exports的值,但是module.exports的值不是空的那么就没有exports什么事了。这两种暴露方式都是使用什么引入方式都可以2.module.exports的值可以是任何类型的,但是exports一定是一个对象
module.export
- 1.他的值可以是一个function一个变量一个class或者一个对象
- 2.每次可以使用两种引入方法的任一进行引用引入的都是module.exports的值
- 3.使用exports和module.exports暴露最后引用进来的一定都是module.exports的值,如果module.exports的值为空,那么就会把exports的值付给他否则不会理会exports的值
//test1.js
function test(){ console.log('test');}
module.exports = test;
import test from './test1';
test();
或者是
function test(){ console.log('test');}
module.exports = {test};
import test from './test1';test.test();
exports
- 1.当module.exports被赋值了就没什么用了
- 2.exports的值只能是一个对象
- 3.每次给他赋值的方式都是exports.test = test;都是采用.给这个对象中赋值
function test(){ console.log('test');}
exports.test = test;
import test from './test1';test.test();
总结
exports和exports一定是都是一个对象,module.exports和export default可以是任何值,但是export default只能使用import引入,但是module可以使用任何方式引入
反思
- 因为快速学习知识的原因导致自己对于很多东西的基础知识掌握非常的薄弱,照猫画虎没有问题,但是一旦开始自己动手关掉别人demo就会发现出现各种错误。
Action
- 未解决基础知识薄弱的问题分两个方面:1.从基础一点点学不现实,那么久发现不会的立刻记下来,只要8小时之外的时间立刻去搞明白。做到遇到就要学会。2.每周末定下系统学习的计划,比如spring。一到周末就要规定自己读完多少页书并且两天针对自己看的内容写出demo
上一篇: cdn方式引入外部的js库
下一篇: 基于Socket编程的网络聊天室
推荐阅读
-
vue.js引入外部CSS样式和外部JS文件的方法
-
详解Vue.js中引入图片路径的几种方式
-
JavaScript中.min.js和.js文件的区别讲解
-
springboot中的html引入js、css文件
-
python import导入三种方式(导入不同文件夹的文件,window和linux的区别)
-
JSP文件中的get和post方式区别
-
比较 Windows 上四种不同的文件(夹)链接方式(NTFS 的硬链接、目录联接、符号链接,和大家熟知的快捷方式)
-
JS高级---函数中的this的指向,函数的不同调用方式
-
将JS嵌入到网页中的不同方式—在网页中直接引入(一)
-
JS中定义function不同方式的区别