import export 理解

ES6 关于export和import理解

1.  ES6之前JavaScript没有模块体系,相关社区提供了一些加载方案,最主要是两种CommonJs和AMD两种。ES6在语言标准层面实现了,实现了模块功能而且实现的相当简单,成为服务器和浏览器相通用的解决方案

2.  ES6模块设计思想是静态化,使编译时确立模块之间关系,以及输入和输出对象

commonJs

上面加载方式就是整体加载fs模块然后生成fs模块对象,通过对象.方法形式进行动态加载

3. ES6不同于上面所说的规范,ES6通过静态加载也就是通过编译时分析文件,静态加载效率更高而且能实现代码检查和宏的概念

export命令

1. export命令用于规定模块对外的接口,有以下两种方式

export导出

大家尽量使用第二种更清晰的导出方法,但是不要误以为第二种是动态导出的对象

2. export 利用as关键字重命名

导出重命名

3. 大家考虑一下 为什么出错然后再评论区发表,检验export导出的理解

error1

error2

4. 还有需要注意的是export暴露的是接口,可以通过接口随时获取接口内部实时的值

实时

import理解

1. 通过export暴露的接口就可以通过import命令加载这个模块

获取上个例子暴露出的变量

import后面需要跟着一个大括号,指定从其他模块导入变量名

怎样导入的变量重新分配一个名字

import  {myname as othername} from './xx.js' // 需要额外注意 import导入的变量被动态改变的 // 但是如果导入对象可以对属性重新赋值,但是不建议这么做

import 是静态执行的所以

foo(); import { foo } from 'xxx'

上面这个是可以运行的 import 是在编译阶段执行

2. 看看下面这种写法

import   'loadash'

上面代码少了大括号之后会默认执行这个模块。

3. import语法是单例模式

4. 模块整体加载

export function area(radius){ return Math.PI * radius * radius;} export function circumference(radius) { return 2 * Math.PI * radius;}

上面的文件可以被整体进行加载采用下面这种方式

import * as circle from './circle';

类似与运行时加载 但是不是的 是静态分析引入的

5. export default 命令

import 后面不跟大括号的导入的话类似于

import customName from './export-default'; customName();

这一种会是export default 默认导入出来的   例如

// 导出匿名函数 export default function () { console.log('foo'); }

// export default 用在非匿名函数前 // export-default.js export default function foo() { console.log('foo'); } // 或者写成 function foo() { console.log('foo'); } export default foo;

我们看一下正常导出和默认导出的 import 不同的方式(起始就是大括号的区别)

区别

export default 本质上就是默认导出 default的变量或方法 但是系统值允许你默认导出一个

我们来看一下 下图导出方式,然后如何利用import导入

如何import

import _, { each, each as forEach } from 'xxxx';

也可以这样默认导出

默认导出

import和export复合写法

export {foo,bar} form 'module'

// 上面那个写法其实就类似于 import { foo,bar } from 'module' export { foo,bar }

并没有实际输出知识对外转发了接口

阮一峰上面还有这几种实例,大家看看理不理解。发表在评论区

1

2

3

跨模块常量

// constants.js 模块 export const A = 1; export const B = 3; export const C = 4;

我们可能会有以下使用场景

配置文件

index.js导出

可以了解下import()

TypeScript 模块 对比

导出

重新导出

全局导入

import "./my-module.js";

jq-ts

Ts与ES6区别

区别

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 利用接口集合实现简单算法

    用户2436820
  • string-to-integer-atoi ---> leetcode

    用户2436820
  • java基本程序设计

    保护对象实例域,提供黑盒的概念保护数据域的安全,体现了面向对象思想。数据>算法的思想

    用户2436820
  • [第20期] 全面了解 ES6 Modules

    当下, 模块化已经深入到我们日常开发中。即:把一个大的 Javascript 程序分割成不同的部分, 哪个部分要被用到,就取那一部分, 按需取用。

    用户6900878
  • QML如何构建第三方包

    模块是一种封装的方式,设计它的人可以单独更新模块内容,然后更新版本号,对使用模块的人没有影响。在项目中,不同窗口可以使用同一模块中的一些类型。

    Jean
  • TypeScript 模块导入那些事

    两者大部分是等价的,但 ES6 规范对 import * as 创建出的模块对象有一点限制。 根据该规范,该模块对象不可被调用,也不可被实例化,它只具有属性。

    三毛
  • [android] 手机卫士手机定位的原理

    获取LocationManager对象,通过getSystemService(LOCATION_SERVICE)

    陶士涵
  • scrapy设置代理ip

    版权信息所有者:chenjiabing 如若转载请标明出处:chenjiabing666.github.io6

    爱撒谎的男孩
  • 实例分析+ 实践步骤,手把手教你编写以太坊、EOS智能合约!

    来源 | 《人人都懂区块链》 作者 | Carol 出品 | 区块链大本营(blockchain_camp)

    区块链大本营
  • 移动端手势的七个事件库

    祈澈菇凉

扫码关注云+社区

领取腾讯云代金券