VUE中的模块化和Node.js中的模块化的区别

一.VUE中的模块化

1.导出 export 和 expore default

// aaa.js
let name = '小明'

function sum(num1, num2) {
  return num1 + num2
}


// 1.导出方式一:
export {
  flag, sum
}

// 2.导出方式二:
export let num1 = 1000


// 3.导出函数/类
export function mul(num1, num2) {
  return num1 * num2
}
export class Person {
  run() {
    console.log('在奔跑');
  }
}

某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名,这个时候就可以使用 export default:

注意：export default在同一个模块中，不允许同时存在多个

export default function (argument) {
  console.log(argument);
}

2.导入 import

import {name, sum} from "./aaa.js"

import * as aaa from './aaa.js'


console.log(aaa.flag);
console.log(aaa.height);

导入 export default 导出的内容，可以在导入的模块重新命名 

import addr from "./aaa.js";

addr('你好啊');

 

二.Node.js中的模块化

1.导出 module.exports 和 exports

node.js中的每个模块会导出一个 mudule.exports 对象，默认是空对象，并定义一个简化的 exports 对象指向 mudule.exports    ，将模块中需要导出的变量函数等挂载到这个mudule.exports或者 exports 上

// a.js
exports.foo = 'hello'
module.exports.name = 'world'

exports.add = function (x, y) {
  return x + y
}

需要注意的是：可以直接给mudule.exports赋值，但是不能直接给exports 赋值，因为exports 是指向mudule.exports，模块中导出的是mudule.exports

let name = 'lisa'
function add(num1,num2) {
  return num1+num2
}

module.exports = {
  name,add
}

2.导入 require

require 方法有两个作用：

1. 加载文件模块并执行里面的代码

2. 拿到被加载文件模块导出的接口对象

let aData = require('./a')

console.log(aData.name) //world
console.log(add(1,2))   //3