es6 export and import syntax (one piece is enough)

Module package code

  • JavaScript uses the "shared everything" method to load code, which is the most error-prone part of this language.
  • Web applications have become more complex, the use of JavaScript code has also begun to grow, and variable naming is enough to make people bald.
  • One of the goals of ECMAScript 6 is to solve the scope problem. In order to make JavaScript applications appear orderly, modules are introduced.

Default export and default import (Note: The default export can only be one time in a module)

//导出
let a = 10
let c = 20
let d = 30
function show() {
    
    
  console.log('1111111111111')
}
export default {
    
    
  a,
  c,
  show
}
//导入
import m1  from './m1.js'

//导入之后m1结果
{
    
    a: 10,c:20,show:[Function: show]}

On-demand export and on-demand import

//1、声明赋值的时候直接进行一个导出----------------------
//导出数据
export var color = "red"
export let name = "fanfusuzi"
export const num = 6
//导出函数
export function getSum (num1,num2) {
    
    
	returm num1 + num2
}
//接收
import m1, {
    
     color, name as name2, num, getSum } from './m1.js' //as是将name重新命名为name2

//这个函数将是模块私有的
const getCarouselImg = () => {
    
    
  return request({
    
    
    method: 'get',
    url: '/teaHouse/banner/selectList'
  })
}

//2、先进行一个声明赋值,然后进行一个导出------------
function multiplay(num1,num2) {
    
    
	return num1 * num2
}
export multiply

Import and execute module code directly
//m2
for (let i = 0; i < 3; i++) {
    
    
  console.log(i)
}
import './m2.js'

Guess you like

Origin blog.csdn.net/weixin_43131046/article/details/115050217