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)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容