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 相关文章推荐
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
canvas实现图像放大镜
Feb 06 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
Puppet的一些技巧
Sep 17 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 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
玩转虚拟域名◎+ .
2006/10/09 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
sae使用smarty模板的方法
2013/12/17 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
Linux下为不同版本python安装第三方库
2016/08/31 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
python实现浪漫的烟花秀
2019/01/30 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
七年级政治教学反思
2014/02/03 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
建国大业观后感800字
2015/06/01 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书