你可以说出export export default || model.exports exports 的区别吗(一)

2024年5月24日 281次阅读 来源: Pengxw

一.前言：

用模块写代码，为什么要用模块来写代码：ES6之前，在js中定义的一切，都是共享一个全局作用域的，随着web应用变得复杂，这样做会引起如：命名冲突和安全问题、于是引入了模块。

二.清楚一个概念：

  • export 和 export default 是ES6 里面的API（本文只介绍ES6的）
  • exports 和 model..exports 是node.js里面的API,更切确的说是Common.js里的（就和require 和 import 相似）

三.export

// a.js
export let a = 1          //输出变量
export fn(){...}          //输出函数
export class Class{
  constructor(a,b){
    this.a = a;
    this.b = b;
  }
}                         //输出类

fn2(){...}                //定义一个函数
export fn2;               //建议以这种在末尾统一输出的方式export
export {fn2 ,fn};         //导出多个变量，要有{}
export {fn2 as asFn2};    //导出时重命名，要有{}


// b.js
import {fn2} from 'a.js';  //export 的引入要加{},单个也要加；
import {fn2 , a , Class as Class1}  from 'a.js'   //引入多个要用 ‘,’隔开；
import * as example from 'a.js';                  //引入整个模块
example.a = 1;                                    //使用模块，在有很多需要引入时，建议这种方法；

四.export defalut（模块的默认值）

  // a.js
  export default function(num1,num2){...}   //导出默认值，只能导出一个
  export let a = 1;                         //导出变量a
  
  // b.js
  
  import any from 'a.js';                   //引入默认值,any 可以是任意的名字，不用{}
  import {a} from 'a.js';                   //引入a ;
  import any,{a} from 'a.js'                //默认值必须放在非默认值前面
  import {default as any , a} from 'a.js'   //有重命名就要大括号包起来

总结：

  • export ：

    • 单个不用括号，多个要用{}，as也要用{}； (因为export default 只能export 一个)；

  • import

    • 除了* as ,别的重命名都要用{}
    • export 要用{}
    • 既有export 和 export default时：import any,{a} from ‘a.js’ 默认写前面

by:Beast 原创：转载请声明

觉得对你有用，请点赞！欢迎探讨指点！

    原文作者：Pengxw
    原文地址: https://segmentfault.com/a/1190000014573684
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞