m_es6模块
Posted myniu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了m_es6模块相关的知识,希望对你有一定的参考价值。
module
<script type=‘module‘> //在html中 script需要这样写 // import和export命令只能在模块的顶层,不能在代码块之中(比如,在if代码块之中,或在函数之中)。 // 模块功能主要由两个命令构成:export和import。 // export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。 // ES6 模块是“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载 </script>
export
//在b.js 中写的 与html同一级 //声明 分两类 //1. 返回一个对象 对象实例是变量名 var a=1; var b=2; var c=3; var d=4; function f(){ console.log("f"); } export {a,b,c,d,f,a as bb}; //a as bb 把 a重命名 为bb import 调用的时候 使用bb 得到
//在a.js 中写的 与html同一级 //2.直接 把声明语句都返回出来 export function kk(){ //不能用匿名函数 console.log("123"); }
//在html中应用 import {a,b,f,bb} from ‘./b.js‘; //export 抛出什么名字就得用什么名字接 console.log(a);//1 //import {a,b,f,bb} 看作一个解构的过程 声明并赋值 f();//f console.log(bb);//2 import {kk} from ‘./a.js‘; //import 后面是{} kk();//123 //export 抛出什么名字就得用什么名字接
//import语句会执行所加载的模块,因此可以有下面的写法。 //b.js中 console.log("12"); 只有这一句 import ‘./b.js‘; //12
import * as gg from ‘./b.js‘; // 把b.js中所有返回都给* *代表所有是一个对象 又把这个*重命名为 gg console.log(gg.a);//1
export default
// 每次import都得知道export 抛出的名字 // 如果不知道别人写的export 的名字这么办 //a.js中---- export default function () { console.log(‘123‘); } //a.js中---- //b.js中---- var a=1; var b=2; var c=3; var d=4; function f(){ console.log("f"); } export default {a,b} //export default命令的本质是将后面的值,赋给default变量 //b.js中---- import kk from ‘./a.js‘; //export default 返回的值 不需要{} 直接名字就好 import gg from ‘./b.js‘; //export default 允许你为它取任意名字 不用管export里面的名字 kk();//123 console.log(gg);//{a: 1, b: 2}
//b.js中---- var a=1; var b=2; export default {a}; export {b}; //b.js中---- //同时输入默认方法和其他接口 import kk,{b} from ‘./b.js‘; console.log(kk); //{a: 1} console.log(b); //2
export 与 import 的复合写法
//多个模块导入 //b.js中---- var a=1; export default {a}; //b.js中---- //a.js中---- import kk from ‘./b.js‘; //导入a.js var jj=kk; export default jj; //抛出 //a.js中---- import gg from ‘./a.js‘; console.log(gg); //{a: 1}
//export和import语句可以结合在一起,写成一行 //b.js中---- var a=1; export {a}; //b.js中---- //a.js中---- export {a} from ‘./b.js‘; //抛出的时候 需要用{}包着 var jj=a; //a is not defined 报错 写成一行以后,{a} 就起到连接作用不会被声明赋值, export {jj}; //除非默认的 //a.js中---- import {a,jj} from ‘./a.js‘; console.log(a); console.log(jj);
//连写 抛出默认值的写法 //b.js中---- var a=1; export default {a}; //b.js中---- //a.js中---- export {default} from ‘./b.js‘; //抛出默认值的写法 //a.js中---- import g from ‘./a.js‘; console.log(g); //{a: 1}
umd 模块(通用模块)
(function (global, factory) { typeof exports === ‘object‘ && typeof module !== ‘undefined‘ ? module.exports = factory() : typeof define === ‘function‘ && define.amd ? define(factory) : (global.libName = factory()); }(this, (function () { ‘use strict‘;}))); //在js文件头部看到这样的代码,那么这个文件使用的就是 UMD 规范 //实际上就是 amd + commonjs + 全局变量 这三种风格的结合 //这段代码就是对当前运行环境的判断,如果是 Node 环境 就是使用 CommonJs 规范, //如果不是就判断是否为 AMD 环境, 最后导出全局变量
CommonJS
//Nodejs 环境所使用的模块系统就是基于CommonJs规范实现的, //我们现在所说的CommonJs规范也大多是指Node的模块系统
AMD规范
AMD规范和commonJS规范 1.相同点:都是为了模块化。 2.不同点:AMD规范则是非同步加载模块,允许指定回调函数。 CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。
以上是关于m_es6模块的主要内容,如果未能解决你的问题,请参考以下文章
如何使用模块化代码片段中的LeakCanary检测内存泄漏?
CTS测试CtsWindowManagerDeviceTestCases模块的testShowWhenLockedImeActivityAndShowSoftInput测试fail项解决方法(代码片段