前端模块化(ES6 Import和CommonJS)

182 阅读1分钟

import

方式一:

导出:

# out.js
let name = 'is me'
let sum = function(a,b) {
  return a+b;
}
export{name,sum}

获取并使用:

# in.js
import {name,sum} from './a.js'
console.log(name);
console.log(sum(10,20));

方式二:

导出:

//in.js
// 导出类
export class Person{
  run(a,b){
    return a*b
  }
}

// 导出变量
export let age = 22

// 导出函数
export function game(){
  console.log('12');
}

获取并使用:

// out.js
import {Person,game,age} from './a.js'

let p = new Person()
console.log(p.run(20,20))
game()
console.log(ii);
console.log(age)

CommonJS

方式一:

导出:

// out.js
var x = 2;
var get_name(first_name,last_name){
    return first_name + '-' + last_name
}

module.exports.x = x
module.exports.get_name = get_name

获取并使用:

// in.js    
var example = require(./out.js)
console.log(example.x)
console.log(example.get_name('jhon','jack'))

方式二:

导出:

// out.js
module.exports = {
    flag:true,
    add(value1,value2){
        return value1+value2
    }
}

获取并使用:

// in.js
let {flag,add} = require('./out.js')

// 或者使用:
let example = require(./out.js)
console.log(example.flag)