export , export default, import complete usage

A. Canonical file name

We are sure we have a file that is common.js

This file is in the static folder of the root directory

The path is as follows

|-root directory/static/common.js

export and import

One, export (export) separate writing method

 export function getCookie(cname) {var name = cname + "=";var ca = document.cookie.split(';');for (var i = 0; i < ca.length; i++) {var c = ca[i];while (c.charAt(0) == ' ') c = c.substring(1);if (c.indexOf(name) != -1) {return c.substring(name.length, c.length);}}return "";}export function setCookie(cname, cvalue, exdays) {var d = new Date();d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));var expires = "expires=" + d.toGMTString();document.cookie = cname + "=" + cvalue + "; " + expires + ";path=/;domain=.baidu.cc";// setCookies(cname, cvalue, exdays);};var Domains = {baidu:'http://www.baidu.cc',};export {Domains};

The above code can see that "each is written", what is it like when it is introduced?

We import and print

Second, import (introduction)

2.1, "*" introduces all

//Introduce allimport * as commonjs from "/static/common";

console.log('commonjs==',commonjs)

We can see from the above picture that the [*] sign is used when importing, and everything can be imported

2.2, import by specified name

//Specify the name to importimport {Domains} from "/static/common";console.log('Domains==',Domains)

Three, export default

 export function getCookie(cname) {var name = cname + "=";var ca = document.cookie.split(';');for (var i = 0; i < ca.length; i++) {var c = ca[i];while (c.charAt(0) == ' ') c = c.substring(1);if (c.indexOf(name) != -1) {return c.substring(name.length, c.length);}}return "";}export function setCookie(cname, cvalue, exdays) {var d = new Date();d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));var expires = "expires=" + d.toGMTString();document.cookie = cname + "=" + cvalue + "; " + expires + ";path=/;domain=.baidu.cc";// setCookies(cname, cvalue, exdays);};var Domains = {baidu:'http://www.baidu.cc',};export {Domains};export default{name: "default"};

Introduce

//Introduce allimport * as commonjs from "/static/common";console.log('commonjs==',commonjs)

You will find that the so-called "export default" just adds an attribute named "default" when the file is imported

---

Further reading

Export default usage vue_ Thorough understanding of import and export in JavaScript ES6_ Chongqing Twistzz's blog-CSDN blog