前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >关于ES6中的模块化的规范:export与import

关于ES6中的模块化的规范:export与import

作者头像
无道
发布2019-11-13 16:25:20
7410
发布2019-11-13 16:25:20
举报
文章被收录于专栏:无道编程无道编程

前言

其实对我个人来说,开始的时候对于export 与 import 用法挺模糊的。到现在为止也终于清楚一点了。

有一些前提我们需要了解清楚:

1、JS以前是没有模块化这个概念的,没有的后果就是代码显得较乱。后来社区出现了两种规范:CommonJS、AMD

2、对于我来说,问题出现就出现在这两个规范上,由于没有系统的学习,一会import 一会export 、一会require()

清楚了有两个规范后(CommonJS、AMD),就要知道下面的事情:

1、CommonJS 是同步代码规范,Node.js的模块系统,就是参照CommonJS规范实现的。还有NPM也是遵循commonJS定义的规范。

2、AMD意思是"异步模块定义",是前端模块规范。RequireJS就是实现了AMD规范的。

把上面我写到的理解,对于我来说大致就能理解清楚了,下面就说一下相应的语法(主要CommonJS语法)

具体语法

CommonJS模块规范

1、模块引用

代码语言:javascript
复制
var math = require('math')

在CommonJS 规范中,通过require()方法,引入一个模块的API。

2、模块定义

代码语言:javascript
复制
// math.js
exports.add = function() {
    var sum=0,
        i = 0,
        args = arguments,
        l = args.length;
    .....
}

CommonJS通过require引入模块,那么通过什么定义呢? 通过:exports,上下文提供了exports对象用于导出当前模块的方法或变量,并且它是唯一的导出的接口。在模块中,还存在一个module对象,它代表模块本身,而exports是module的属性。 在Node中,一个文件就是一个模块。

export 和 import

export

export就是向外导出一些东西,那么这些东西有哪些呢?其实用一句前辈的话来说,你能想到的基本都能导出。

比如有:变量、常量、函数、类等等。

代码语言:javascript
复制
export let a  = xxx;

export const a  = xxx;

export {xx, xx, xx, xxxx}; // xx xxx 是已经定义好了的东西

export function sum(a, b) {

}

export class Person {

}

有一个特殊的是默认导出

也即:

代码语言:javascript
复制
export default 'aaa';

什么意思,这需要和下面的import连着。

import

import 就是导入,和export对应。

代码语言:javascript
复制
import * as mode from "./xxx";

import {aa,vv,cc, ...} from "./xxx";

以上第一条就是导入所有,并重命名为mode 第二条导入aa,vv,cc

还有就是导入默认导出的!

代码语言:javascript
复制
import xxx from "./yyyy"; // 引入默认成员 即前文的export default

这就是和前文默认导出配合使用的:export default 'aaa';

还有就是以下的:

代码语言:javascript
复制
// 模块的代码引进来,不引入内部成员
import "./1.jpg"; // 通常需要使用webpack配合某个loader

// 异步引入
let promise = import("./mode"); // 返回的是promise,异步加载需要绝对路径
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-09-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 具体语法
    • CommonJS模块规范
      • export 和 import
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档