背景 ES6引入了模块化 , 打个比喻 , 之前的js代码里的东西相当于公共设施,“共享” . 这样就导致了很多的毛病,特别是项目复杂 , 大起来 , 毛病百出 非常容易出错 , 例如命名冲突 , 安全问题等 . ES6模块化就是要解决这样的问题 , 让 js 变的更有条理. 特点 用法 导出模块(export) : export 特性: 导入模块(import) : import 特性: 当然在导入导出中还有一些特性: export default 这里还得介绍下 export default 命令: 特点 : 模块需要注意的地方也非常多,这里介绍上文提到的 严格模式 , 默认是开启严格模式的,严格模式下自然会有很多限制 (主要限制如下) : 在模块里没有 this 对象,一般我们用 this 表示 windows 对象:上码看看究竟. 为了给加深大家模块的概念于用法可以练习以下: 可以参考以下完成代码: module2.js html代码: 题二: html代码: 今天的到这就告一段落咯,之后还会继续更新，欢迎大家继续关注 ! .
ES6 模块
(每个模块代表一个js,导出的东西会暴露出去,起到封装的效果.) //逐个导出 export let a= 2; export let b= 3; //批量导出 export {a,b}
//导入模块,这里导入了a,b. import {a,b} from "需要导入模块路径.js";
as
有没有感觉非常的熟悉,对没错,可以给 export 命令导出和 import 导入 的接口起别名，起到隐藏模块内部的变量的作用.//导出 let a = 1; //导出变量 a ,并起个A的别名,import导入时也以修改后的别名为准. export {a as A } ---------------------- //导入,* 表示导入全部的导出,并且起个别名,调用时也需要用别名调用. import * as all from "模块路径.js";
//为模块指定默认导出 let a =10; export default a;
//实例模块 import {....} from "....js"; console.log(this === window) //结果: false console.log(this === undefined) //结果 : true //this关键字返回undefined，而不是指向 window，也就是说：在模块使用this关键字是无意义的
题一
module1.js//父类 class Animal{} //导出 export {Animal}import * as parent from "./module1.js"; //Dog类继承module1中的Animal let dog = class Dog extends parent.Animal{ //构造函数 constructor(name="某某",age=1){ super(); this.name = name; this.age = age; } //打招呼方法 sayHello(){ return "你好! 我是"+ this.name +"今年"+ this.age +"岁!"; } } //导出 export { dog }<body> <script type="module"> //导入 import {dog} from "./js/module2.js"; //创建Dog对象 let a = new dog("张三",12); console.log(a.sayHello()); //结果: 你好! 我是张三今年12岁! </script> </body>
module3.js//模块三中定义 3个方法 //方法1 let a = function(){ return "方法1"; } //方法2 let b = function(){ return "方法2,我是默认方法"; } //方法3 let c = function(){ return "方法3"; } //导出 a,c方法 export {a,c}; //默认导出方法3 export default b;<body> <script type="module"> //导入 import k from "./js/module3.js"; // 不需要加{}，使用任意变量接收默认参数,加了{}的话报错,表示找不到name为k的参数 console.log(k()); //结果: "方法2,我是默认方法" </script> </body>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
