模块化开发 | es6模块暴露与引入
2024-10-19 14:57:44
CommonJS模块开发
CommonJS定义
每个文件就一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。
- 私有作用域不会污染全局作用域。
- 模块可加载多次,只会在第一次加载时运行一次,然后结果会被缓存起来,
以后在使用,就直接读取缓存结果。想要让模块再次运行,必须清除缓存- 模块加载顺序是按照其在代码中出现的顺序
基础用法
1、require()用来引入外部模块,
2、exports()用来导出当前模块的变量和方法,
3、module对象代表模块对象
单变量方法导出引入
// a.js 导出
function add(a, b) {
return a + b;
}
module.exports = add;
// b.js 引入
const add = require('./a.js');
console.log(add(10, 20));
多方法变量导出引入
// a.js 导出
function add(a, b) {
return a + b;
}
function mul(a, b) {
return a * b;
}
module.exports = {
add,
mul
};
// b.js 引入
const { add, mul } = require('./a.js');
console.log(add(10, 20));
console.log(mul(10, 20));
补充说明:
//const { add, mul } = require('./a.js');
const opt = require('./a.js');
const add = opt.add
const mul = opt.mul
和上面的注释是等价的,这就是解构的语法.
对象解构
let node = {
type : 'identifier',
name : 'foo'
};
let {type,name} = node;
console.log(type);//'identifier'
console.log(name);//'foo'
ES6模块化开发
ES6的模块化分为导出(export)与导入(import)两个模块。
export、import
在ES6中每一个模块即是一个文件,在文件中定义的变量,函数,对象在外部是无法获取的。如果你希望外部可以读取模块当中的内容,就必须使用export
来对其进行暴露(输出)。
然后在另一个文件以import
的形式将这个变量进行引入:
单变量
export let myName="laowang";
import {myName} from "./test.js";
console.log(myName);//laowang
多变量
let myName="laowang";
let myAge=90;
let myfn=function(){
return "我是"+myName+"!今年"+myAge+"岁了"
}
export {
myName,
myAge,
myfn
}
/******************************接收的代码调整为**********************/
import {myfn,myAge,myName} from "./test.js";
console.log(myfn());//我是laowang!今年90岁了
console.log(myAge);//90
console.log(myName);//laowang
如果你不想暴露模块当中的变量名字,可以通过as来起别名
let myName="laowang";
let myAge=90;
let myfn=function(){
return "我是"+myName+"!今年"+myAge+"岁了"
}
export {
myName as name,
myAge as age,
myfn as fn
}
/******************************接收的代码调整为**********************/
import {fn,age,name} from "./test.js";
console.log(fn());//我是laowang!今年90岁了
console.log(age);//90
console.log(name);//laowang
也可以直接导入整个模块,将上面的接收代码修改为:
import * as info from "./test.js";//通过*来批量接收,as 来指定接收的名字
console.log(info.fn());//我是laowang!今年90岁了
console.log(info.age);//90
console.log(info.name);//laowang
导出和默认导出
export与export default均可用于导出常量、函数、文件、模块等
export
在一个文件或模块中,export可以导出多个,对应的 import导入也有多个,并且加{}
//导出
export function fn1(){ }
export function fn2(){ }
export function fn3(){ }
//导入
import {fn1,fn2,fn3} from AAA
导入的名字不能随便起,必须与导出的名字一致
默认导出(default export)
一个模块只能有一个默认导出,对于默认导出,导入的名称可以和导出的名称不一致。
/******************************导出**********************/
export default function(){
return "默认导出一个方法"
}
/******************************引入**********************/
import myFn from "./test.js";//注意这里默认导出不需要用{}。
console.log(myFn());//默认导出一个方法
可以将所有需要导出的变量放入一个对象中,然后通过default export进行导出
/******************************导出**********************/
export default {
myFn(){
return "默认导出一个方法"
},
myName:"laowang"
}
/******************************引入**********************/
import myObj from "./test.js";
console.log(myObj.myFn(),myObj.myName);//默认导出一个方法 laowang
同样也支持混合导出
/******************************导出**********************/
export default function(){
return "默认导出一个方法"
}
export var myName="laowang";
/******************************引入**********************/
import myFn,{myName} from "./test.js";
console.log(myFn(),myName);//默认导出一个方法 laowang
最新文章
- iOS开发中对RunLoop的个人心得
- class 函数
- 3 Servlet监听器
- java 参数化类型
- iOS开发——图片轮播图+单选选项
- VMWare虚拟机USB连接问题
- UVA 11389(贪心问题)
- VLV INDEX
- mysql主从切换步骤
- thunk技术
- 关于Ubuntu的ssh免密登录
- SQL Server数据库存储过程中拼接字符串注意的问题
- docker入门 什么是docker? 为什么使用docker?
- PHP报错类型
- 收藏:IPicture总结
- daily Tip
- 廖雪峰git教程学习笔记2
- SQL DATACOMPARE 实现两个数据库的同步处理.
- Java中数据库连接池原理机制的详细讲解
- FDMemTable三层提交数据总是不成功的原因