前端模块化

贤儒

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'
阅读 679
9 声望
0 粉丝
0 条评论
9 声望
0 粉丝
文章目录
宣传栏