javascript中导出与导入实现模块化管理教程


Posted in Javascript onDecember 03, 2020

在理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。但是,在ES6以前,JavaScript一直没有自己模块体系(module),无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。如果要想在前端做模块化开发,必须依赖第三方框架来实现,如:requireJS与seaJS。

javascript中的导出和导入实现模块化管理

requireJS是AMD规范的起源,seaJS是CMD规范的起源,由于两者功能高度重合,后来seaJS不再维护,从此淡出人们的视野,于是requireJS一家独大,直到ES6的出现,且迅速成为前端和服务器端通用的模块解决方案,完全可以取代AMD 规范和NodeJS支持的CommonJS 规范。

ES6中首次引入模块化开发规范ES Module,让JavaScript首次支持原生模块化开发,使用 export 和 import 关键字进行模块化开发。

1 export:用于对外输出本模块

方法1 声明时直接导出

export var str = '1';

export function func1() {
 return 'hello word'
} 

export const func2 = () => {
 // 箭头函数导出
 return 'hello word'
}

方法2 统一在最后导出

var str = '1';

function func1() {
 return 'hello word'
}

const func2 = () => {
 return 'hello word'
}

export {
 str,
 func1,
 func2,
}

方法3 起别名

var str = '1';

function func1() {
 return 'hello word'
}

const func2 = () => {
 return 'hello word'
}

export {
 str as str1,
 func1 as f1,
 func2 as f2,
}

方法4 对导入的方法直接导出

这种方法常用于统一文件导出

// 这是一个utils.js 导出一个变量两个方法
var str = '1';

function func1() {
 return 'hello word'
}

const func2 = () => {
 return 'hello word'
}

export {
 str as str1,
 func1 as f1,
 func2 as f2,
}
// 这是引用utils.js的文件-config.js
export {str,func1,func2} from ‘./config.js'

方法5 默认导出(default)

这种导出方式一个js文件只能有一个default,所以它后面不能跟变量声明语句。

export default function() {}

方法6 导出类

// 这是一个utils.js 导出一个变量两个方法
export class utils {

 format(){
  // 类方法1
 };
 cheackData(){
  // 类方法2
 }
}
// 调用utils文件中
import {utils} from ‘./utils.js'

const utils = new utils();
utils.format();
utils.cheackData();

2 import:用于在模块中加载含有export接口的模块

方法1 直接导出

import {str,func1,func2} from ‘./utils.js'

方法2 起别名

这种情况一般用于导入的两个或者多个模块中存在相同的导入内容

import {str as str1,func1 as f1,func2 as f2} from ‘./utils.js'

方法3 一次导入文件中所有

import * as utils from ‘./utils.js'

utils.str
utils.func1
utils.func2

方法4 导入使用default方式导出的模块

import utils from ‘./utils.js'

到此这篇关于javascript中导出与导入实现模块化管理教程的文章就介绍到这了,更多相关javascript导出与导入模块化管理内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
js中常用的Math方法总结
Jan 12 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
vuex存取值和映射函数使用说明
Jul 24 Javascript
JavaScript实现京东快递单号查询
Nov 30 Javascript
vue 自定义组件添加原生事件
Apr 21 Vue.js
JS如何实现在弹出窗口中加载页面
Dec 03 #Javascript
对vue生命周期的深入理解
Dec 03 #Vue.js
在实例中重学JavaScript事件循环
Dec 03 #Javascript
js 数据类型判断的方法
Dec 03 #Javascript
用vue设计一个日历表
Dec 03 #Vue.js
JS闭包原理及其使用场景解析
Dec 03 #Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 #Vue.js
You might like
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
Php图像处理类代码分享
2012/01/19 PHP
解析PHP提交后跳转
2013/06/23 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
vue实现弹幕功能
2019/10/25 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
python实现矩阵乘法的方法
2015/06/28 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
思想品德自我鉴定
2013/10/12 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
婚前保证书范文
2015/02/28 职场文书
热血教师观后感
2015/06/10 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers