JavaScript 中的require，import，export

JavaScript 中的require，import，export

require

• 三种模拟模块实现方式

函数

• 定义

// require
// 三种模块实现方式
let write = function(){
  console.log('打到打发斯蒂芬')
}
let read = function () {
  return '给你'
}
export {write,read}

• 使用

import {write,read} from '@/utils/test.js'

write()
console.log(read())

对象

• 定义

// 2、对象
export default  {
  count :10,
  write : function(){
    console.log('打到打发斯蒂芬')
  },
  read:function () {
    return '给你'
  }
}

• 使用

  // 2、对象
  import tt from '@/utils/test.js'
  
   // 2、对象
  console.log(tt)
  console.log(tt.count)
  tt.write()
  console.log(tt.read())

• 在es6以前，还没有提出一套官方的规范,从社区和框架推广程度而言,目前通行的javascript模块规范有两种：CommonJS 和 AMD

CommonJS 同步加载

• 同步加载，在服务端没问题，都是本地资源。
• 在CommonJS中,暴露模块使用module.exports和exports
• 在CommonJS中，有一个全局性方法require()，用于加载模块。

var math  = require('math')
var num = math.add(1,2);

AMD 异步加载

• require 不适用与浏览器环境，因为数据可能还在服务端，需要异步加载。

• 所以出现了AMD，异步模块定义

• 模块必须采用特定的define()函数来定义

• define(id?, dependencies?, factory)

  • id:字符串，模块名称(可选)
  • dependencies: 是我们要载入的依赖模块(可选)，使用相对路径。,注意是数组格式
  • factory: 工厂方法，返回一个模块函数

• 如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。

// AMD
// 模块定义，不依赖其他模块
// 模块 add
define('add', function() {
    var sum = function(x, y) {
        return x + y;
    }
    return { add: sum }
})

// 依赖其他模块，比如上面定义的add
define('res', [add], function(add) {
    function show() {
        add.sum(10, 20)
    }

    return { res: show }
})

// 使用
require(['add', 'res'], function(add, res) {
    add.sum(120, 1)
    res.show()
})

• 目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。

CMD规范

• CMD (Common Module Definition), 是seajs推崇的规范，CMD则是依赖就近，用的时候再require。
• 定义一样

// CMD
// 模块定义，不依赖其他模块
define(function(requre, exports, module) {

})

// 模块定义，依赖其他模块,在需要的时候在require
define(['jquery'], function(require, exports, module) {
    var clock = require('clock')
    clock.start()
})

• CMD与AMD区别
  • AMD和CMD最大的区别是对依赖模块的执行时机处理不同，而不是加载的时机或者方式不同，二者皆为异步加载模块。
  • AMD依赖前置，js可以方便知道依赖模块是谁，立即加载；
  • 而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，这也是很多人诟病CMD的一点，牺牲性能来带来开发的便利性，实际上解析模块用的时间短到可以忽略。

export导出模块，import 引入模块

• export语法声明用于导出函数、对象、指定文件（或模块）的原始值。

• export

let sum = function (x, y) {
    return x + y;
}
let show = function () {
    console.log('called show function')
}
let a = '123123';
class Person {
    constructor(name) {
        this.name = name;
    }
    show(){
        console.log('this person name is '+name)
    }
}

export {sum, show, a as MY_PI, Person}

// 引入方式
 // import * as ee from '../js/export.js'
 import {sum,show,MY_PI,Person} from '../js/export.js'

• export default

let ddd = {
    a: '123',
    name: function () {
        console.log('your name is xxx')
    }
}


// export default ddd; 等价
export {ddd as default}
// 引入方式
import ddd from '../js/exportdefault.js'

• 相比较而言，使用default导出对使用者更加方便，不用知道内部到底多少东西。