ES6模块化

模块化技术有哪些：
- CommonJS(nodejs)、ES6模块化、AMD、CMD等

CommonJS：
CommonJS模块化 是2009年发布的，是民间出品的，相对不正规，可以在nodejs中应用

  // 导出
  module.exports = 对象
 // 导入
 var obj = require(模块文件)

导出语法:

// 导出：
 export default  对象

导入语法:

// 导入：
  import 名称  from  模块文件名字(路径名)

例子如下:

• 导出文件

    var a = 100
    var b = 200
    var c = 300
    function getInfo(){
      return 'hello'
    }

  // 当前文件对外部导出内容，以便被使用
  // 01. 默认导出：通过一个大对象把所有的信息都导出出去
  // CommonJS: module.exports = {}
  // ES6: export default 对象
  export default {
    name:'kitty',
    age:6,
    walk:function(){
      console.log('hello kitty')
    }
  }

• 导入文件

  // 01.默认导入
 // import 名称 from '模块js文件路径名'
 import cat from './modules/01-默认导出.js'
   console.log(cat)

按需导出和导入

• 导出语法(在导出的位置前加export)

 export const  a = 10       // 常量
 export function ab(){}  // 函数
 export const  b = 20
 export const cat = {name:'kitty',age:5} // 对象

注意：一般按需只做常量、函数导出，var/let变量不导出，本身没有意义

• 导入语法

  import {xx,yy,zz} from 模块文件
  import {xx as kk,yy as mm,zz as qq} from 模块文件     // 根据需要可以设置别名

注意：1. xx,yy,zz代表被导入的成员名称，与导出的要求一致;
2. 成员不用全部都导入，根据需要，导入 1个或多个或全部 都可以;
3. 如果导入进来的成员名称 与 当前环境名称 有冲突，可以使用 as 设置别名

例子如下:

• 导出

    // 02. 按需导出，根据需要导出相关的成员
    // 语法： export 常量声明/函数声明/对象声明
    //     (module.exports.xx = yy)
    var a = 100
    var b = 200
    let c = 300
  function getInfo(){
    return 'hello world'
  }

  export const city = 'beijing'
  const people = 2000

  export function getApple(){
    return '苹果'  
  }
  function getPear(){
    return '大白梨'
  }

export const tiger = {color:'yellow and black'}
const dog = {name:'旺财'}

• 导入

  // 02. 按需导入
  // import {名称，名称。。} from '模块文件'
  import {city as ct,getApple,tiger} from './modules/02-按需导出.js'
  console.log(ct)
  console.log(getApple)
  console.log(tiger)

默认和按需同时导出和导入

• 导出

  export const  a = 10    // 按需导出
  export function ab(){}  // 按需导出
  export default  对象/{}  // 默认导出
  export const  b = 20
  export function abc(){}  

1. 一个模块只能 默认导出一次，按需导入可以设置多次
2. 默认导出 的语句没有摆放位置要求

• 导入

  // 1) 分别导入
  import 名称  from  模块
  import  {xx,yy}  from  模块

  // 2) 一并导入
  import 名称,{xx,yy} from 模块

** 一并导入必须是 默认在"前"，按需在"后"**

例子如下:

• 导出

   // 03. 默认和按需同时导出
// 语法： export 常量声明/函数声明/对象声明
//     (module.exports.xx = yy)
var a = 100
var b = 200
let c = 300
function getInfo(){
  return 'hello'
}
// 默认
export default {
  City:'changchun'
}

// 按需
const Locals = '东北人'
export const people = 1000

function getApple(){
  return '国光苹果'  
}
export function getPear(){
  return '苹果梨'
}

const tiger = {color:'yellow and black'}
export const dog = {name:'旺财'}

• 导入

  // 03. 默认和按需同时导入
  // A. 分别导入(具体参考 01 和 02)
  //    import 名称 from 模块
  //    import {名称,名称……} from 模块
  // B. 一并导入
  //    import 名称(默认),{名称，名称……} from 模块
  import obj,{people as pp,getPear} from './modules/03-默认和按需同 时导出.js'
  console.log(obj)
  console.log(pp)
  console.log(getPear)

没有导出应用

项目开发时有的文件没有做导出动作(例如 css、less)，这样文件可以称为为 非模块文件，那么可以通过如下方式做导入

语法:
import 文件路径名
例子:

• 导出

   // 4. 没有导出
  for(var i=0; i<5; i++){
    console.log(i)
  }

• 导入

 // 4. 导入空的模块
 // import  xx模块名字
 import './modules/04-没有导出'