js模块化

Es6 模块化

模块功能主要有两个命令构成：export 和 import export 命令用于规定模块的对外接口
import 命令用于输入其他模板提供的功能
注意： Es6模板自动采用严格模式 不管你有没有在模块头部加上 “use strict”

export

* 在 export 后边直接定义变量或者方法
* 用花括号 {}导出变量名或者方法名
* 在导出模块的时候可以自定义名字

//形式一
 export var a =1;

export function fn(){

} 
// 形式二

var a =1;

 function fn(){

} 

export {b,fn2};

// 形式三
var a =1;

 function fn(){

} 
export {a as b, fn as find} // 重命名

import

• export 导出的 import 引入 通过解构

// 自定义变量名
import { a as new_a}  form "./temp.js" 

export default

• 指定默认输出的模板

// 写法一
export default function () {  
  console.log('foo')
}

// 写法二
function foo() {              
  console.log('foo')
}
export default foo

// 写法三
function foo(x, y) {          
  console.log('foo')
}
export {add as default}

// 写法四
export default 42     

引入时

import bar from './3.js'                   // 写法一
bar()    
// 输出：foo

import { default as bar } from './3.js'    // 写法二
bar()    
// 输出：foo

。。。。。。。。。。》未完待续