📖
blog
  • README
  • JavaScript
    • 元素的宽高位置信息梳理
    • dom-align 源码浅析
    • Event Loop
    • 函数实参为对象时的陷阱
    • export 与 utils 方法书写规范
    • 手写 Promise 及相关代码理解
    • call,apply,bind 等函数的模拟实现
    • JavaScript继承
    • JavaScript 数据类型与类型判断
    • for..of 和 for..in 的区别
    • 写给自己看的 next 函数
    • JS 可选链与双问号
    • mouseenter 与 mouseover 事件的区别
    • Immutable相关知识
  • CSS
    • 不简单的 z-index
    • 两列布局,三列布局
    • CSS 居中方案整理
    • CSS 像素,设备像素,2倍图梳理
    • iconfont 的使用
  • Node JS
    • 实现简易的 express
  • React 核心知识点整理
    • 高阶组件
    • React 事件处理
    • React Hooks
    • React Context
  • React 状态管理
    • Redux 基础概念
    • Redux 中间件和异步操作
    • Redux Saga
    • Redux 只能有一个 store 对象嘛
  • React 开发实践
    • Ant Design Menu 组件的使用与深入
    • 讲讲吸顶效果与 react sticky
    • 基于 express,搭建 react 的开发环境
    • 通过 antd input 组件分析受控与非受控组件
    • DebounceClick 组件
    • react component Align 组件分析
    • React Portal 之事件冒泡
    • React Transition Group 源码浅析
    • React.cloneElement 父组件向子组件注入 props
    • 一次 Align 组件的问题记录
    • 如何知道子组件的类型
    • React Router 源码简单分析
    • React Redux 源码简单分析
  • Vue.js
    • Vue.js 概览
    • scoped 样式中的 deep
  • TypeScript 语法
    • 基础类型
    • 变量声明
    • 接口
    • 类
    • 函数
    • 泛型
    • 枚举
    • 类型推论
    • 类型兼容性
    • 高级类型
    • Symbol
    • 迭代器和生成器
    • 模块
    • 命名空间
    • JSX
  • 玩转 webpack
    • 第一章: webpack 与构建发展简史
    • 第二章:webpack基础用法
    • 第三章:webpack进阶用法
    • 第四章:编写可维护的 webpack 构建配置
    • 第五章:webpack构建速度和体积优化策略
    • 第六章:通过源代码掌握webpack打包原理
    • 第七章:编写Loader和插件
  • webpack 实践
    • 如何配置 output.library
  • 测试
    • 初识代码测试
    • Jest 中 如何测试 setTimeout
    • Jest Enzyme React 测试实践记录
  • WEB 开发,过往工作沉淀
    • Web安全(DVWA)
    • 内存泄露与事件移除的必要性
    • url to pdf api 与 服务部署踩坑记录
    • 前端调试指南
    • Markdown 转 email
    • github travis ci 自动部署
    • 浏览器缓存知识梳理
    • WEB 系统登录相关知识梳理
    • 将-Axios-请求参数和返回值进行格式化
    • source-map与源码调试
    • HTTPS
    • 使用 rollup 打造自己的 npm 包 (全流程)
    • father-build 是如何工作的
  • 书籍
    • 图解 HTTP 协议
    • 编写可维护的 JavaScript
    • 鸟哥的 Linux 私房菜
    • JavaScript Promise迷你书
  • Linux
    • vimtutor
    • CURL 使用指南
  • Nginx
    • 一次 nginx 分享
  • Git
    • Git Commit Message 须知
    • .gitignore 模板
    • git tag标签
  • 摄影
    • 摄影基础知识
    • 手机摄影从小白到大师
  • 翻译
    • log4js
    • log4js-node
    • 介绍GitLab上的CI/CD
    • 为GitLab Pages创建并调整GitLab CI/CD
    • 关于 rel=noopener
    • AngularJS 团队 Git 提交信息约定
    • JSON Schema
  • Lifehack
    • 20 个 Google 搜索 Tips 来高效使用 Google
    • 37 个高级 Google 搜索 Tips
Powered by GitBook
On this page
  • 1. export 命令
  • 2. import 命令
  • 3. 整体加载
  • 4. export default 命令
  • 5. Utils 推荐写法

Was this helpful?

  1. JavaScript

export 与 utils 方法书写规范

Previous函数实参为对象时的陷阱Next手写 Promise 及相关代码理解

Last updated 4 years ago

Was this helpful?

1. export 命令

export const firstName = 'Michael';
export const lastName = 'Jackson';
export const year = 1958;

// 等价于

const firstName = 'Michael';
const lastName = 'Jackson';
const year = 1958;

export { firstName, lastName, year };  // 优先考虑这种方式,写在文件尾部可以清晰看到输出了哪些接口

但是以上两种方式,外部都不能用 import Utils from '***' 的方式访问,因为文件没有用 export default 方式输出接口。因而只能用 import {firstName, lastName, year} 的方式访问。

export 除了输出变量,还可以输出函数或类:

export function multiply(x, y) {
  return x * y;
};

export 命令规定对外的接口,如果暴露的是常量而不是接口,则会报错:

// error
const a = 1;
export a; 

// ok
export const a;

// error
function a () {
  console.log(123)
}
export a;

// ok
export function a () {
  console.log(123)
}

2. import 命令

import 命令接受一对"大括号",指定要从其它模块导入的变量名。该大括号不允许解构:

// a.js
export const A = {a:1}

// b.js
import { A:{a} } from './a.js'     // error

import 会执行所加载的模块,但是只会执行一次:

// main.js
console.log('i am main')
const A = 'main'
export default A

// utils1.js
import A from './main.mjs'
console.log('i am utils1')
export default () => {}

// utils2.js
import A from './main.mjs'
console.log('i am utils2')
export default () => {}

// index.js
import u1 from './utils1.mjs'
import u2 from './utils2.mjs'


// 打印
// i am main  // 即该模块被引用两次,但只会执行一次
// i ma utils1
// i ma utils2

3. 整体加载

// utils.js
export const A = { a: 1 }
export const B = { b: 1 }

// index.js
import Utils from './utils.mjs';  // error, utils 没有 export default

import * as Utils from './utils.mjs';
// { A: { a: 1 }, B: { b: 1 } }, 即可以通过 * 指定一个对象,将所有值加载到该对象上

4. export default 命令

// utils.js
export const A = { a: 1 }

// index.js  
import {A} from './utils.mjs';
// {a:1}

import * as A from './utils.mjs';
// {A:{a:1}}

即对于以上的形式,使用import加载模块需要知道模块内部的属性方法名,或者使用整体加载的形式。

而使用 export default 可以使得在 import 时指定任意名字:

// utils.js
const A = { a: 1 }
export default A

import A from './utils.mjs';
// {a:1}  即通过 export default 的形式,可以在不知道接口名的情况下,引入默认的接口

export default 用于指定模块的默认输出,因此一个模块只能有一个默认输出。

export default 命令的本质是将后面的值,赋给 default 变量,所以:

// ok
export default 1
// error
export 1

// ok
const a = 1;
export default a;
// error
export default const a = 1;

// ok
export default function a(){}
// ok
function a(){}
export default a;

5. Utils 推荐写法

export default {
  a () {
    console.log('a')
  },
  b () {
    this.a()      // console.log('a') 
    console.log('b')
  }
}

即能在 {} 中通过 this 获取到当前的对象的别的 Util 方法.

外部模块需要调用时只需 import Utils from './utils.mjs'

use es6 import export in node
阮一峰 es6 module