ES6使用export和import实现模块化的方法


Posted in Javascript onSeptember 10, 2018

在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库,  而像seaJS是基于CMD规范的模块化库,  两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD的区别, 后面参考给了几个链接;

现在ES6自带了模块化, 也是JS第一次支持module, 在很久以后 ,我们可以直接作用import和export在浏览器中导入和导出各个模块了, 一个js文件代表一个js模块;

现代浏览器对模块(module)支持程度不同, 目前都是使用babelJS, 或者Traceur把ES6代码转化为兼容ES5版本的js代码;

前端模块化

1. 模块化的好处

前后端分离以来,经常提到前端工程化,前端工程化是一个高层次的思想,前端工程化主要包括四个方面:模块化、组件化、规范化、自动化。而模块化和组件化是为工程化思想下相对较具体的开发方式,因此可以简单的认为模块化和组件化是工程化的表现形式。

模块化带来的好处:

   1 避免变量污染,命名冲突
   2 提高代码复用率
   3 提高维护性
   4 依赖关系的管理

2. 什么是模块化?

那具体什么是模块化呢,还是举简单的例子,我们要写一个实现A功能的JS代码,这个功能在项目其他位置也需要用到,那么我们就可以把这个功能看成一个模块采用一定的方式进行模块化编写,既能实现复用还可以分而治之,同理在写样式的时候,如果我们需要某种特殊的样式,会在很多地方应用,那么我们也可以采用一定的方式进行CSS的模块化,具体说来,JS模块化方案很多有AMD/CommonJS/UMD/ES6 Module等,CSS模块化开发大多是在less、sass、stylus等预处理器的import/mixin特性支持下实现的,具体技术大家自行学习。

3. 没有ES6模块化之前是怎么表达模块化的?

在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工具

4. ES6的模块化

现在ES6自带了模块化, 也是JS第一次支持module,我们可以直接作用import和export在浏览器中导入和导出各个模块了, 一个js文件代表一个js模块;

ES6的模块化的基本规则或特点:

1:每一个模块只加载一次,每一个JS只执行一次,如果下次再去加载同目录下同文件,直接从内存中读取。

2:每一个模块内声明的变量都是局部变量, 不会污染全局作用域;

3:模块内部的变量或者函数可以通过export导出;

4:一个模块可以导入别的模块

5:ES6的模块自动采用严格模式

6:模块顶级作用域的this值为undefined

7:需要外部使用的部分,必须导出才可以

5.实际应用

// 普通的使用
  export var a = '1'
  export function sum(num1,num2){
    return num1+num2
  }
  
  import a from './a.js'
  import {sum} from './sum.js'
// 重命名导出与导入
  function sum(num1,num2){
    return num1+num2
  }
  export {sum as add}
  
  import {add as sum} from './sum.js'
  
// 模块的默认值

  export default function(num1,num2) {
    return num1 + num2
  }
  
// 在script标签中使用模块

  <script type="module" src="module.js"></script>
  <script type="module">
  import a from '../b.js'
  </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
Feb 19 Javascript
javascript instanceof,typeof的区别
Mar 24 Javascript
JavaScript 对象链式操作测试代码
Apr 25 Javascript
jquery实现心算练习代码
Dec 06 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
webpack项目使用eslint建立代码规范实现
May 16 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 #Javascript
浅谈微信小程序flex布局基础
Sep 10 #Javascript
微信小程序文章详情页面实现代码
Sep 10 #Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 #Javascript
JavaScript读写二进制数据的方法详解
Sep 09 #Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 #Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 #Javascript
You might like
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
微信API接口大全
2015/04/15 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
2018/03/01 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
np.dot()函数的用法详解
2020/01/17 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
局域网标准
2016/09/10 面试题
网络信息管理员岗位职责
2014/01/05 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
无保留意见审计报告
2015/06/05 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android