The cause of

  • A few days ago created a front-end technology exchange group. Today, a group member shared a question in the group

  • I knew something was wrong when I saw it, because I didn’t know how to do it, I didn’t even notice it

  • I guess one answer
  • However, guess, not my style, according to the learning website provided by the group of friends, today I re-learned the modularity of ES6

The following is a summary of my own understanding of Jake Archibald’s blog

The import

// module.js 
export let thing = 'initial'; 
setTimeout(() = > { thing = 'changed'; }, 500);
Copy the code
// main.js 
import { thing as importedThing } from './module.js'; 
const module = await import('./module.js'); 
let { thing } = await import('./module.js'); 
setTimeout(() = > { 
    console.log(importedThing); // "changed" 
    console.log(module.thing); // "changed" 
    console.log(thing); // "initial" 
}, 1000);
Copy the code

When main.js imports the module.js module in the normal way, the module.js changes to thing are synchronized to mian.js. However,

Destructuring does not accept changes to module.js because destructuring reassigns an identifier

  • To summarize

export

  • Ordinary export
export { thing };
export { thing as otherName };
Copy the code

Pass by reference

  • The default is derived
// module.js 
let thing = 'initial'; 
export { thing }; 
export default thing; 
setTimeout(() = > { thing = 'changed'; }, 500);
Copy the code
// main.js 
import { thing, default as defaultThing } from './module.js'; 
import anotherDefaultThing from './module.js'; 

setTimeout(() = > { 
    console.log(thing); // "changed" 
    console.log(defaultThing); // "initial" 
    console.log(anotherDefaultThing); // "initial" 
}, 1000);
Copy the code

Export default… The thing followed is treated as an expression, as if it were assigned to a hidden variable before being exported

  • export {thing as default}
// module.js 
let thing = 'initial'; 
export { thing, thing as default }; 
setTimeout(() = > { thing = 'changed'; }, 500);
Copy the code
// main.js 
import { thing, default as defaultThing } from './module.js'; 
import anotherDefaultThing from './module.js'; 

setTimeout(() = > { 
    console.log(thing); // "changed" 
    console.log(defaultThing); // "changed" 
    console.log(anotherDefaultThing); // "changed" 
}, 1000);
Copy the code

Always pass by reference, because we can’t export values directly through export {},

  • Export the defaultfunction
// module.js 
export default function thing() {} 
setTimeout(() = > { thing = 'changed'; }, 500);
Copy the code
// main.js 
import thing from './module.js'; 
setTimeout(() = > { 
    console.log(thing); // "changed" 
}, 1000);
Copy the code

Export Default Function has its own pet peeves. In this case, the function is passed by reference

  • willmodule.jschange
// module.js 
function thing() {} 
export default thing

setTimeout(() = > { thing = 'changed'; }, 500);
Copy the code

At this point, it will be passed by value

  • conclusion