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 相关文章推荐
分析 JavaScript 中令人困惑的变量赋值
Aug 13 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
微信小程序 开发指南详解
Sep 27 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 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 分页原理详解
2009/08/21 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
JavaScript基本编码模式小结
2012/05/23 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
整理Python最基本的操作字典的方法
2015/04/24 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
python实现感知器
2017/12/19 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
医学专业毕业生个人求职信
2013/12/25 职场文书
个人考核材料
2014/05/15 职场文书
市场营销工作计划书
2014/09/15 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
银行委托书范本
2014/09/28 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
幼儿园教师管理制度
2015/08/05 职场文书