前端模块化

Node.js 中的模块化

• Module.exports
• exports
• require()

/* 原理 */
var module = {
  exports: {
    ...
  }
}

var exports = module.exports

return module.exports

/* 使用 exports 接口对象 导出成员 */

// exports.js
var foo = 'hello'

var bar = function (x, y) {
  console.log(x + y)
}

exports.bar = bar

// require.js
var reqRes = require('./exports.js')

console.log(reqRes.bar(1, 1))  // 2
console.log(reqRes.foo)  // 报错

/* 使用 module.exports 导出成员 */

// exports.js
var foo = 'hello'

var bar = function (x, y) {
  console.log(x + y)
}

module.exports = bar

// require.js
var reqRes = require('./exports.js')

console.log(reqRes(1, 1))  // 2

ES6 Module

• export
• export default
• import

• import()

  import 是静态加载（编译时加载），require() 是动态加载（运行时加载）。
  import() 函数可以实现动态加载，与 require() 不同的是，import() 函数是异步加载，require() 函数是同步加载。

/* 使用 export 导出成员 */

// export.js
export var a = 1

export function sum (x, y) {
  console.log(x + y)
}

var age = [1, 2, 3, 4]

var names = {'张三', '李四'}

export age // 报错

export {age}

export {names as enNames}

// import.js
import {a, sum as add, age, enNames} from './export.js'

/* 使用 export default 导出单一成员 */

// export_default.js
export default {
  name: '',
  props: '',
  data: '',
  methods: ''
}

// import.js
import login from './export_default.js'