同步发布在我的个人网站:http://www.codebe.org
在es6之前,如果我们需要引入一个外部的库,可能是像下面这样子的:
引入Jquery
<script src="https://cdn.bootcss.com/jquery/3.2.1/core.js"></script>
然后在js中可以像下面这样使用:
$(function(){
$('.aaa').on('click',function(){
//...
});
});
在es6之前,几乎所有的第三方类库,都是通过上面这种形式引入的。 这种形式的引入会有下面一些问题:
在es6的规范中,引入了模块的概念。
例如现在我有一个a.js文件,这里面封装了一个模块,然后需要给外部提供一些接口。内容如下:
let p1 = 'abc';
const m1 = {
fn:()=>{
console.log('from a module...p1='+p1);
}
};
export { m1 };
上面我们已经写好了一个模块,下面来看一下如何使用这个模块。 注意:在chrome浏览器中,默认是不支持模块的。
解决办法: 在chrome浏览器中访问:chrome://flags/ 然后找到Experimental Web Platform features项,点击启用。重启浏览器之后生效。
接下来我们再创建一个模块和一个用来使用这些模块的html页面
b.js的内容如下:
//导入a.js模块
import { m1 } from './a.js';
//调用模块的方法
m1.fn();
index.html的内容如下:
<!doctype html>
<html>
<head>
<script type="module" src="./b.js"></script>
</head>
</html>
注意:
这里推荐使用轻量级的http-server作为web服务器来运行上面的内容。 使用以下命令安装http-server:
cnpm install -g http-server
如果你没有安装cnpm的话,请先安装cnpm。 到此,我们来看一下我们的目录结构:
在此目录下运行:
http-server
查看下图:
从上图中可以看出,此时模块b的作用域链的活动对象中,包含了导入的模块a,也就是说,此时在b模块中,可以访问到a模块。
控制台输出如下: 到此,我们已经初步了解了es6模块的创建已经使用。
参考链接:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
在模块中,除了可以像上面a.js中那样,导出一个模块,还支持以下导出方式:
除了像b.js中那样,导入一个模块之外,还支持以下方式的导入:
下面具体来看几种方式的使用:
将a.js的内容修改为如下:
let p1 = 'abc';
const m1 = {
fn:()=>{
console.log('from a module...p1='+p1);
}
};
export { m1 , p1 };
b.js的内容修改为如下:
//导入a.js模块
import { m1,p1 } from './a.js';
//调用模块的方法
m1.fn();
console.log(p1);
刷新页面,查看控制台输出:
修改a.js的内容,改为如下:
let p1 = 'abc';
const m1 = {
fn:()=>{
console.log('from a module...p1='+p1);
}
};
export { m1 as m, p1 as p };
as可以指定导出别名。
b.js修改如下:
//导入a.js模块
import { m , p } from './a.js';
//调用模块的方法
m.fn();
console.log(p);
注意,import语句中,导入的名称必须和export导出的一致。
将b.js修改
修改a.js内容如下:
let p1 = 'abc';
const m1 = {
fn:()=>{
console.log('from a module...p1='+p1);
}
};
export default { m1 }
注意,默认导出只能导出一个成员。
修改b.js内容如下:
//导入a.js模块
import abc from'./a.js';
//调用模块的方法
abc.m1.fn();
看下图:
从图中可以看出,导入的对象层级结构,发现和上面的情况不一样。这是因为,这里的abc相当于定义的一个变量用来接收a模块中的默认导出对象。 类似下面的赋值语句:
let abc = {m1:{...}}
也就是说export default其实就是导出了一个名称为default的对象。 类型下面的代码:
//a
const default = {...}
//b
const abc = default;
注意这里不能使用{abc}的形式导入。
将b.js修改为如下内容:
//导入a.js模块
import * as m1 from'./a.js';
看下图:
会发现对象的层级又多了一层。 仔细看会发现,此时m1的类型为Module。也就是说,这种情况是将a模块导入,然后赋值给了m1。 类似下面的代码:
//a
const a: Module = {
default:{m1:{...}}
};
const abc = a ;
原网址: 访问
创建于: 2018-10-13 16:47:51
目录: default
标签: 无
未标明原创文章均为采集,版权归作者所有,转载无需和我联系,请注明原出处,南摩阿彌陀佛,知识,不只知道,要得到
java windows火焰图_mob64ca12ec8020的技术博客_51CTO博客 - 在windows下不可行,不知道作者是怎样搞的 监听SpringBoot 服务启动成功事件并打印信息_监听springboot启动完毕-CSDN博客 SpringBoot中就绪探针和存活探针_management.endpoint.health.probes.enabled-CSDN博客 u2u转换板 - 嘉立创EDA开源硬件平台 Spring Boot 项目的轻量级 HTTP 客户端 retrofit 框架,快来试试它!_Java精选-CSDN博客 手把手教你打造一套最牛的知识笔记管理系统! - 知乎 - 想法有重合-理论可参考 安宇雨 闲鱼 机械键盘 客制化 开贴记录 文本 linux 使用find命令查找包含某字符串的文件_beijihukk的博客-CSDN博客_find 查找字符串 ---- mac 也适用 安宇雨 打字音 记录集合 B站 bilibili 自行搭建 开坑 真正的客制化 安宇雨 黑苹果开坑 查找工具包maven pom 引用地 工具网站 Dantelis 介绍的玩轴入坑攻略 --- 关于轴的一些说法 --- 非官方 ---- 心得而已 --- 长期开坑更新 [本人问题][新开坑位]关于自动化测试的工具与平台应用 机械键盘 开团 网站记录 -- 能做一个收集的程序就好了 不过现在没时间 -- 信息大多是在群里发的 - 你要让垃圾佬 都去一个地方看难度也是很大的 精神支柱 [超级前台]sprinbboot maven superdesk-app 记录 [信息有用] [环境准备] [基本完成] [sebp/elk] 给已创建的Docker容器增加新的端口映射 - qq_30599553的博客 - CSDN博客 [正在研究] Elasticsearch, Logstash, Kibana (ELK) Docker image documentation elasticsearch centos 安装记录 及 启动手记 正式服务器 39 elasticsearch 问题合集 不断更新 6.1.1 | 6.5.1 两个版本 博客程序 - 测试 - bug记录 等等问题 laravel的启动过程解析 - lpfuture - 博客园 OAuth2 Server PHP 用 Laravel 搭建带 OAuth2 验证的 RESTful 服务 | Laravel China 社区 - 高品质的 Laravel 和 PHP 开发者社区 利用Laravel 搭建oauth2 API接口 附 Unauthenticated 解决办法 - 煮茶的博客 - SegmentFault 思否 使用 OAuth2-Server-php 搭建 OAuth2 Server - 午时的海 - 博客园 基于PHP构建OAuth 2.0 服务端 认证平台 - Endv - 博客园 Laravel 的 Artisan 命令行工具 Laravel 的文件系统和云存储功能集成 浅谈Chromium中的设计模式--终--Observer模式 浅谈Chromium中的设计模式--二--pre/post和Delegate模式 浅谈Chromium中的设计模式--一--Chromium中模块分层和进程模型 DeepMind 4 Hacking Yourself README.md update 20211011
Laravel China 简书 知乎 博客园 CSDN博客 开源中国 Go Further Ryan是菜鸟 | LNMP技术栈笔记 云栖社区-阿里云 Netflix技术博客 Techie Delight Linkedin技术博客 Dropbox技术博客 Facebook技术博客 淘宝中间件团队 美团技术博客 360技术博客 古巷博客 - 一个专注于分享的不正常博客 软件测试知识传播 - 测试窝 有赞技术团队 阮一峰 语雀 静觅丨崔庆才的个人博客 软件测试从业者综合能力提升 - isTester IBM Java 开发 使用开放 Java 生态系统开发现代应用程序 pengdai 一个强大的博主 HTML5资源教程 | 分享HTML5开发资源和开发教程 蘑菇博客 - 专注于技术分享的博客平台 个人博客-leapMie 流星007 CSDN博客 - 舍其小伙伴 稀土掘金 Go 技术论坛 | Golang / Go 语言中国知识社区
最新评论