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的模块系统

CommonJS

AMD规范

	AMD规范和commonJS规范
	1.相同点:都是为了模块化。
	
	2.不同点:AMD规范则是非同步加载模块,允许指定回调函数。
	CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。

以上是关于m_es6模块的主要内容,如果未能解决你的问题,请参考以下文章

nodejs常用代码片段

如何使用模块化代码片段中的LeakCanary检测内存泄漏?

VSCode自定义代码片段6——CSS选择器

如何有条件地将 C 代码片段编译到我的 Perl 模块?

6大设计原则之开闭原则

CTS测试CtsWindowManagerDeviceTestCases模块的testShowWhenLockedImeActivityAndShowSoftInput测试fail项解决方法(代码片段