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 相关文章推荐
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
jQuery插件开发详细教程
Jun 06 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
深入理解vue中的$set
Jun 01 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 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
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
学习python (1)
2006/10/31 Python
python的多重继承的理解
2017/08/06 Python
flask使用session保存登录状态及拦截未登录请求代码
2018/01/19 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python实现可逆简单的加密算法
2019/03/22 Python
python爬虫之遍历单个域名
2019/11/20 Python
python 一维二维插值实例
2020/04/22 Python
python解释器安装教程的方法步骤
2020/07/02 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
会计专业毕业生自我鉴定
2013/10/29 职场文书
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
审计工作个人的自我评价
2013/12/25 职场文书
党员违纪检讨书
2014/02/18 职场文书
报关专员求职信范文
2014/02/22 职场文书
法制报告会主持词
2014/04/02 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
英语演讲开场白
2015/05/29 职场文书
apache ftpserver搭建ftp服务器
2022/05/20 Servers
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL