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学习笔记4 Eval函数
Jan 11 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
JS常用算法实现代码
Nov 14 Javascript
javascript学习之json入门
Dec 22 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 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实现jQuery扩展函数
2009/10/30 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
php实现购物车功能(上)
2020/07/23 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
php数组和链表的区别总结
2019/09/20 PHP
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
ES6新特性之Symbol类型用法分析
2017/03/31 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
python实现两个文件合并功能
2018/04/01 Python
python自定义时钟类、定时任务类
2021/02/22 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
社区端午节活动方案
2014/01/28 职场文书
环保建议书100字
2014/05/14 职场文书
学生党员公开承诺书
2014/05/28 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
警察群众路线整改措施
2014/09/26 职场文书
小班下学期个人总结
2015/02/12 职场文书
法人代表资格证明书
2015/06/18 职场文书
python中print格式化输出的问题
2021/04/16 Python
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle