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 相关文章推荐
javascript跨域刷新实现代码
Jan 01 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
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生成xml时添加CDATA标签的方法
2014/10/17 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
javascript中 try catch用法
2015/08/16 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
详解nodejs模板引擎制作
2017/06/14 NodeJs
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
python中如何设置代码自动提示
2020/07/15 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
分公司经理岗位职责
2013/11/11 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
技术总监管理职责范本
2014/03/06 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
五年级小学生评语
2014/12/26 职场文书
会计求职信怎么写
2015/03/20 职场文书
给校长的建议书作文300字
2015/09/14 职场文书