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 XML数据显示为HTML一例
Dec 23 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
用js获取电脑信息(是使用与IE浏览器)
Jan 15 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
React-router4路由监听的实现
Aug 07 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
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
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
JS实现前端路由功能示例【原生路由】
2020/05/29 Javascript
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
python日志记录模块实例及改进
2017/02/12 Python
python脚本替换指定行实现步骤
2017/07/11 Python
使用python编写监听端
2018/04/12 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
python实现的汉诺塔算法示例
2019/10/23 Python
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
小学教师学期末自我评价
2013/09/25 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
婚礼主持词
2014/03/13 职场文书
酒店温馨提示语
2015/07/14 职场文书
Python基础 括号()[]{}的详解
2021/11/07 Python