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 相关文章推荐
node.js中的fs.chownSync方法使用说明
Dec 16 Javascript
jquery ztree异步搜索(搜叶子)实践
Feb 25 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 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 前一天或后一天的日期
2008/06/28 PHP
怎样去阅读一份php源代码
2009/08/21 PHP
又一个php 分页类实现代码
2009/12/03 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
Python文件和目录操作详解
2015/02/08 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
python enumerate函数的使用方法总结
2017/11/15 Python
python中强大的format函数实例详解
2018/12/05 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
python判断变量是否为列表的方法
2020/09/17 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
大学生军训感想
2014/02/16 职场文书
机修工工作职责
2014/02/21 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python