JS module的导出和导入的实现代码


Posted in Javascript onFebruary 25, 2019

最近看了些Vue框架写的程序,发现自己的前端知识还停留在几年以前,发现现在Javascript程序里有各种各样的对module的导入和到处,导入乍一看跟python的语法挺像的无非就是把from和import这两个关键词的使用颠倒了一下顺序。仔细看下来还是和python挺不一样的import模块的前提是模块有导出,并且还分默认导出和命名导出,有些麻烦。所以今天这篇文章就把所有的export形式和相应的import使用汇总一下。

ES6在语言标准的层面上,实现了模块功能,成为浏览器和服务器通用的模块解决方案,完全可以取代 CommonJS 和 AMD 规范,基本特点如下:

  • 每一个模块只加载一次, 每一个JS只执行一次, 如果下次再去加载同目录下同文件,直接从内存中读取;
  • 每一个模块内声明的变量都是局部变量, 不会污染全局作用域;
  • 模块内部的变量或者函数可以通过export导出;
  • 一个模块可以导入别的模块

2.模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能;

3.一个模块就是一个独立的文件,该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量;

var year = '2018';
var month = 'Febuary';
export {year, month};

export 导出模块

export语法声明用于导出函数、对象、指定文件(或模块)的原始值。 有两种模块导出方式:命名式导出(名称导出)和默认导出(定义式导出),命名式导出每个模块可以有多个,而默认导出每个模块仅一个 。

命名式导出

模块可以通过export前缀关键词声明导出对象,导出对象可以是多个。这些导出对象用名称进行区分,称之为命名式导出

export { func }; // 导出一个已定义的函数func
export const foo = Math.sqrt(100); // 导出一个常量

我们可以使用*和from关键字来实现的模块的继承:

export * from 'base_module';

模块导出时,可以指定模块的导出成员。导出成员可以认为是类中的公有成员,而非导出成员可以认为是类中的私有成员:

var name = 'Kevin的居酒屋';
var domain = 'http://coffee.toast.com';
 
export {name, domain}; // 相当于导出{name:name,domain:domain}

模块导出时,我们可以使用as关键字对导出成员进行重命名,上面的导出可以这样写:

export {name as siteName, domain}

注意一下语法错误:

export 1; 
var a = 100;
export a;

export在导出接口的时候,必须与模块内部的变量具有一一对应的关系。直接导出1没有任何意义,也不可能在import的时候有一个变量与之对应export a虽然看上去成立,但是a的值是一个数字,根本无法完成解构,因此必须写成export {a}的形式。即使a被赋值为一个函数,也是不建议使用上面的形式导出的因为大部分风格都建议,模块中最好在末尾用一个export导出所有的接口,就像上面那些例子一样。

默认导出

默认导出也被称做定义式导出。命名式导出可以导出多个值,但在import引用时,也要使用相同的名称来引用相应的值。默认导出只有导出一个单一值,这个输出可以是一个函数、类或其它类型的值,这样在模块import导入时也会更 容易引用。

export default function() {}; // 导出一个函数
export default class(){}; // 导出一个类

默认导出可以理解为另一种形式的命名导出,默认导出可以认为是使用了default名称的命名导出。

下面两种导出方式是等价的:

const D = 123; 
export default D;
export { D as default };

使用名称导出一个模块时:

// "my-module.js" 模块
function cube(x) {
  return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { cube, foo };

在另一个模块(js文件)中,我们可以像下面这样引用:

import { cube, foo } from 'my-module';
console.log(cube(3));
console.log(foo);

使用默认导出一个模块时:

// "my-module.js"模块
export default function (x) {
return x * x * x;
}

在另一个模块中,我们可以像下面这样引用,相对名称导出来说使用更为简单:

import cube from 'my-module';
console.log(cube(3)); // 27

import导入模块

import语法声明用于从已导出的模块、脚本中导入函数、对象、指定文件(或模块)的原始值。import模块导入与export模块导出功能相对应,也存在两种模块导入方式:命名式导入(名称导入)和默认导入(定义式导入)。

注意事项: import必须放在文件的最开始,且前面不允许有其他逻辑代码,这和其他所有编程语言的导入风格一致。

命名导入

我们可以通过指定名称将导入成员插入到当作用域中。可以导入单个成员或多个成员:

注意,花括号里面的变量与export后面的变量一一对应

import {myMember} from "my-module";
import {foo, bar} from "my-module";

通过*符号,我们可以导入模块中的全部属性和方法。当导入模块全部导出内容时,就是将导出模块('my-module.js')所有的导出绑定内容,插入到当前模块('myModule')的作用域中:

import * as myModule from "my-module";

默认导入

在模块导出时,可能会存在默认导出。同样的,在导入时可以使用import指令导入这些默认值。直接导入默认值:

import defaultName from "my-module";
import myDefault, {foo, bar} from "my-module"; // 指定成员导入和默认导入

default关键字

// my-module.js
export default function() {}
 
// 等效于:
function func() {};
export {func as default};

在import的时候,可以这样用:

import a from './my-module';
// 等效于,或者说就是下面这种写法的简写
import {default as a} from './my-module';

这个语法糖的好处就是import的时候,可以省去{}。

简单的说,如果import的时候,你发现某个变量没有花括号括起来(没有*号),那么你在脑海中应该把它还原成有花括号的{default as ...}语法,所以import $,{each,map} from 'jquery';import后面第一个${default as $}的替代写法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery UI皮肤定制
Jul 27 Javascript
测试你的JS的掌握程度的代码
Dec 09 Javascript
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
JavaScript 事件对内存和性能的影响
Jan 22 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
js生成word中图片处理方法
Jan 06 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 #Javascript
js实现网页同时进行多个倒计时功能
Feb 25 #Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 #Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 #Javascript
写一个Vue Popup组件
Feb 25 #Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 #Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 #Javascript
You might like
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
php setcookie函数的参数说明及其用法
2014/04/20 PHP
PHP中有关长整数的一些操作教程
2019/09/11 PHP
基于jquery的让页面控件不可用的实现代码
2010/04/27 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
python实现排序算法
2014/02/14 Python
在Python中使用元类的教程
2015/04/28 Python
Python的Django框架中的数据过滤功能
2015/07/17 Python
详解Python设计模式编程中观察者模式与策略模式的运用
2016/03/02 Python
python实现杨辉三角思路
2017/07/14 Python
python用户管理系统的实例讲解
2017/12/23 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
python 批量将中文名转换为拼音
2021/02/07 Python
印度低票价航空公司:GoAir
2017/10/11 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
职业生涯规划书基本格式
2014/01/06 职场文书
温馨提示标语
2014/06/26 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
单位未婚证明范本
2014/11/25 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL