Module exposure mode

Expose export XXX separately

module1.js

export function foo() {
  console.log('module1 foo()')}export function bar() {
  console.log('module1 bar()')}export const DATA_ARR = [1.3.5.1]

Copy the code

Export {XXX,YYY}

module2.js

let data = 'module2 data'

function fun1() {
  console.log('module2 fun1() ' + data);
}

function fun2() {
  console.log('module2 fun2() ' + data);
}

// Unify the exposed object
export {fun1, fun2}

Copy the code

By default, only one export default XXX is exposed

Module3. js can only expose one by default

// Default exposure: Any data type can be exposed. What data can be exposed, what data can be received

// 1. An arrow function is exposed by default
export default() = > {console.log('I'm the default exposed arrow function')}// 2. Expose an object by default
export default {
    msg: 'hello world'.foo() {
        console.log('I am exposing the callback function inside by default:'+this.msg.toUpperCase())
    }
}
Copy the code

Main.js: main module file

Import {foo, bar, dataArr} from './module1'; import {foo, bar, dataArr} from './module1'; import {fun1, fun2} from './module2'; * * /

// Use separate or unified exposure: introduce a modular approach
import {foo, bar, DATA_ARR} from './module1';
import {fun1, fun2} from './module2';

fun1();
fun2();
foo();
bar();
console.log(DATA_ARR);


// Use the default exposure method (only one object is exposed by default) : the method of introducing modules
import module3 from './module3'

module3();
import module4 from './module4'

module4.foo();


// Introduce third-party modules
import $ from 'jquery';

$('body').css('background'.'red')

Copy the code