m_es6模块

Posted 2020-11-30 myniu

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规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。