js 模块化

第一种方法 导出一个大对象

index.js 文件

const modulesA = (function () {
  const object = {}
  object.str = '123';
  object.flag = true
  return object
})()

index.html

 <script src='./index.js' ></script>
 console.log(modulesA.str, modulesA.flag)

第二种方法

var flag = true;
var obj = { name: 'zhangsan', age: '22' }
function sum (num, num2) {
  return num + num2
}
module.exports = {
  obj,
  sum
}

 var { obj, sum } = require('./index.js')
    console.log(sum(20, 10))

第三种方法 es6

var flag = true;
var obj = { name: 'zhangsan', age: '22' }
function sum (num, num2) {
  return num + num2
}
export {
  flag,
  sum
}
// 导出类
export class Person{
  run () {
    console.log('在奔跑')
  }
}

import { flag, sum, Person } from './index.js'

if (flag) {
  sum(20, 30)
}
// 导入类
const p = new Person()
p.run()

export 导出的变量名在导入的时候不可以随便更改， 可以有多个
export default 导出的变量名在导入的时候可以随便更改 注意： 在一个模块中只能有一个 export default

const address= '北京市'
export default address
improt ad from './index.js' console.log(ad) =》'北京市'

// 一次性全部导入
// import * as all from './index';
 
console.log(all.flag)