Js模块化导入导出
Js模块化导入导出
CommonJs
、AMD
、CMD
、ES6
都是用于模块化定义中使用的规范,其为了规范化模块的引入与处理模块之间的依赖关系以及解决命名冲突问题,并使用模块化方案来使复杂系统分解为代码结构更合理,可维护性更高的可管理的模块。
CommonJS
CommonJS
是NodeJs
服务器端模块的规范,根据这个规范,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。CommonJS
规范规定,每个模块内部,module
变量代表当前模块。这个变量是一个对象,它的exports
属性是对外的接口。加载某个模块,其实是加载该模块exports
属性。总之,CommonJS
规范通过require
导入,module.exports
与exports
进行导出。
// 1.js
var a = 1;
var b = function(){
console.log(a);
}
module.exports = {
a: a,
b: b
}
/*
// 当导出的模块名与被导出的成员或方法重名时可以有如下写法
module.exports = {
a,
b
}
*/
// 2.js
var m1 = require("./1.js")
console.log(m1.a); // 1
m1.b(); // 1
也可以使用exports
进行导出,但一定不要重写exports
的指向,因为exports
只是一个指针并指向module.exports
的内存区域,即exports = module.exports = {}
,重写exports
则改变了指针指向将导致模块不能导出,简单来说exports
就是为写法提供了一个简便方案,最后其实都是利用module.exports
导出。此外若是在一个文件中同时使用module.exports
与exports
,则只会导出module.exports
的内容
// 1.js
var a = 1;
var b = function(){
console.log(a);
}
exports.a = a;
exports.b = b;
// exports = { a, b } // 不能这么写,这样就改变了exports的指向为一个新对象而不是module.exports
// 2.js
var m1 = require("./1.js")
console.log(m1.a); // 1
m1.b(); // 1
AMD
AMD
规范不是AMD YES
,AMD
异步模块定义,全称Asynchronous Module Definition
规范,是浏览器端的模块化解决方案,CommonJS
规范引入模块是同步加载的,这对服务端不是问题,因为其模块都存储在硬盘上,可以等待同步加载完成,但在浏览器中模块是通过网络加载的,若是同步阻塞等待模块加载完成,则可能会出现浏览器页面假死的情况,AMD
采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行,RequireJS
就是实现了AMD
规范。
require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// do something
});
define(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
// do something
return {};
});
/**
define和require在依赖处理和回调执行上都是一样的,不一样的地方是define的回调函数需要有return语句返回模块对象(注意是对象),这样define定义的模块才能被其他模块引用;require的回调函数不需要return语句,无法被别的模块引用
*/
// html的<script>标签也支持异步加载
// <script src="require.js" defer async="true" ></script> <!-- async属性表明这个文件需要异步加载,避免网页失去响应。IE不支持这个属性,只支持defer,所以把defer也写上。 -->
CMD
CMD
通用模块定义,是SeaJS
在推广过程中对模块定义的规范化产出,也是浏览器端的模块化异步解决方案,CMD
和AMD
的区别主要在于:
- 对于依赖的模块,
AMD
是提前执行(相对定义的回调函数,AMD
加载器是提前将所有依赖加载并调用执行后再执行回调函数),CMD
是延迟执行(相对定义的回调函数,CMD
加载器是将所有依赖加载后执行回调函数,当执行到需要依赖模块的时候再执行调用加载的依赖项并返回到回调函数中),不过RequireJS
从2.0
开始,也改成可以延迟执行 AMD
是依赖前置(在定义模块的时候就要声明其依赖的模块),CMD
是依赖就近(只有在用到某个模块的时候再去require
——按需加载,即用即返)。
define(function(require,exports,module){
var a = reuire('require.js');
a.dosomething();
return {};
});
ES6
ES6
在语言标准的层面上实现了模块的功能,是为了成为浏览器和服务器通用的模块解决方案,ES6
标准使用export
与export default
来导出模块,使用import
导入模块。此外在浏览器环境中是可以使用require
来导入export
、export default
导出的模块的,但依然建议使用import
标准导入模块。
export
、export default
主要有以下区别:
export
能按需导入,export default
不行。export
可以有多个,export default
仅有一个。export
能直接导出变量表达式,export default
不行。export
方式导出,在导入时要加{}
,export default
则不需要。
// 导出单个特性
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}
// 导出列表
export { name1, name2, …, nameN };
// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };
// 解构导出并重命名
export const { name1, name2: bar } = o;
// 默认导出
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
// 导出模块合集
export * from …; // does not set the default export
export * as name1 from …; // Draft ECMAScript 2O21
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;
// name-从将要导入模块中收到的导出值的名称
// member, memberN-从导出模块,导入指定名称的多个成员
// defaultMember-从导出模块,导入默认导出成员
// alias, aliasN-别名,对指定导入成员进行的重命名
// module-name-要导入的模块。是一个文件名
// as-重命名导入成员名称(“标识符”)
// from-从已经存在的模块、脚本文件等导入
import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name"; // 将运行模块中的全局代码, 但实际上不导入任何值。
// 1.js
var a = 1;
var b = function(){
console.log(a);
}
var c = 3;
var d = a + c;
var obj = { a,b,c }
export {a,b};
export {c,d};
export default obj;
<!-- 3.html 由于浏览器限制,需要启动一个server服务 -->
<!DOCTYPE html>
<html>
<head>
<title>ES6</title>
</head>
<body>
</body>
<script type="module">
import {a,b} from "./1.js"; // 导入export
import m1 from "./1.js"; // 不加{}即导入export default
import {c} from "./1.js"; // 导入export 按需导入
console.log(a); // 1
console.log(b); // ƒ (){ console.log(a); }
console.log(m1); // {a: 1, c: 3, b: ƒ}
console.log(c); // 3
</script>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://segmentfault.com/a/1190000010426778
https://www.cnblogs.com/leftJS/p/11073481.html
https://www.cnblogs.com/zhoulujun/p/9415407.html
https://www.cnblogs.com/zhoulujun/p/9415407.html
https://www.cnblogs.com/moxiaowohuwei/p/8692359.html
Js模块化导入导出的更多相关文章
- Node.js模块导入导出
这篇文章本来是想模块导入导出和事件循环一起写的,但是感觉一起写的话会太长了,所以就分开两篇文章写吧.下一篇会重点介绍一下js中的事件循环,js代码到底是以何种顺序去执行的呢?我相信你看懂了事件循环再去 ...
- [vue]js模块导入导出export default
webstrom调试未授权问题解决 分es6语法和node语法 参考 参考 - export default s1 1.仅能出现1次default 2.导入时候可以随便命名 3,导出时候不必写{} - ...
- ES6之模块化导入导出
1.概述 在js的历史上一直没有模块(module)体系,无法将一个大程序拆分成相互依赖的小文件,再用简单的方法拼装起来,这对开发大型的.复杂的项目形成了巨大障碍. 在 ES6 之前,社区制定了一些模 ...
- es6模块化导入导出
模块化指的就是将一个大程序拆分成若干个互相依赖的小文件,然后在用简单的方法拼装起来. 在 ES6 之前,JS没有模块化系统,社区制定了一些模块加载方案 最主要的有 CommonJS(Asynchron ...
- js模块导入/导出大全
说明 module.exports与exports是CommonJS的规范 export与export default是es6规范 require 是 AMD规范引入方式 import是es6的一个语 ...
- 彻底弄懂Javascript模块导入导出
笔者开始学习Javascript的时候,对模块不太懂,不知道怎么导入模块,导出模块,就胡乱一通试 比如 import xx from 'test.js' 不起作用,就加个括号 import {xx} ...
- csv表格处理(上)-- JS 与 PHP 协作导入导出
CSV简介 在开发后台管理系统的时候,几乎无可避免的会遇到需要导入导出Excel表格的需求.csv也是表格的一种,其中文名为“逗号分隔符文件”.在Excel中打开如下图左边所示,在记事本打开如下图右边 ...
- 【微信小程序】在js中导入第三方js或自己写的js,使用外部js中的function的两种方法 import和require的区别使用方法 【外加:使用第三方js导出的默认function的调用方法】
如下 定义了一个外部js文件,其中有一个function import lunaCommon from '../lunaCommon.js'; var ctx = wx.getStorageSync( ...
- node.js零基础详细教程(6):mongodb数据库操作 以及导入导出
第六章 建议学习时间4小时 课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑. ...
- js模块化/js模块加载器/js模块打包器
之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...
随机推荐
- 百度网盘(百度云)SVIP超级会员共享账号每日更新(2023.11.20)
百度网盘会员账号共享(11.20更新) 账号:zqv29268 密码:7003wayb 账号:rpz75364 密码:riyk1648 账号:0580quqn 密码:148hxhe 账号:132620 ...
- Java21 + SpringBoot3整合Redis,使用Lettuce连接池,推荐连接池参数配置,封装Redis操作
目录 前言 相关技术简介 Redis 实现步骤 引入maven依赖 修改配置文件 定义Redis配置类 定义Redis服务类,封装Redis常用操作 使用Redis服务类 总结 前言 近日心血来潮想做 ...
- Nginx loki监控日志的学习
Nginx loki监控日志的学习 背景 学习自: https://mp.weixin.qq.com/s/Qt1r7vzWvCcJpNDilWHuxQ 增加了一些自己的理解 第一部分nginx日志的完 ...
- [转帖]使用 TiDB 读取 TiFlash
https://docs.pingcap.com/zh/tidb/stable/use-tidb-to-read-tiflash 本文档介绍如何使用 TiDB 读取 TiFlash 副本. TiDB ...
- [转帖]金仓数据库KWR使用说明
金仓数据库KWR使用说明 1.KWR性能报告介绍 2.部署KWR性能报告功能 2.1.修改配置文件 2.2.使配置文件中参数生效 2.3.创建KWR扩展 3.使用KWR快照功能 3.1.创建KWR快照 ...
- [转帖]ORACLE USERENV函数
https://www.cnblogs.com/youngerger/p/8862210.html ORACLE USERENV函数 USERENV返回关于当前会话的信息.此信息可以用于编写一个应用程 ...
- [转帖]MegaCli命令
MegaCli命令 设置jbod模式 1.3 LSI 9260/9261 raid卡配置 LSI 9260/9261 raid卡支持0.1.10.5.6.50.60 常用命令: 清除raid卡原有的配 ...
- [转帖]Linux-find命令报错: missing argument to `-exec'
https://www.cnblogs.com/yeyuzhuanjia/p/17427143.html 报错提示:find: missing argument to `-exec' 今天写一个清理脚 ...
- Oracle 核心列信息查看与处理
Oracle 核心列信息查看与处理 背景 最近想对数据库表进行跨数据之间的比照 因为有一些自增列或者是时间戳的列不需要进行对比 后者是对比容易导致失真. 所以就准备选用其他方式进行一下处理. 本文主要 ...
- [转帖]linux求数组的交集,shell/bash 交集、并集、差集
方法一(直接用文件名):取两个文本文件的并集.交集.差集 并: sort -m 交: sort -m 差 file1 - file2: sort -m 方法二(用变量参数):取两个文本文件的并集.交集 ...