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 相关文章推荐
本地对象Array的原型扩展实现代码
Dec 04 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
解决Mac安装thrift因bison报错的问题
May 17 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
JS实现手写 forEach算法示例
Apr 29 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
PHP图片上传类带图片显示
2006/11/25 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
python直接访问私有属性的简单方法
2016/07/25 Python
python实现自动发送邮件
2018/06/20 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
python计算无向图节点度的实例代码
2019/11/22 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
优秀研究生主要事迹
2014/06/03 职场文书
高三励志标语
2014/06/05 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
新郎新娘答谢词
2015/01/04 职场文书
电影复兴之路观后感
2015/06/02 职场文书
2015年暑期见闻
2015/07/14 职场文书