关于前端:前端模块化

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'