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

在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>

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

(0)

相关推荐

  • ES6新特性之模块Module用法详解

    本文实例讲述了ES6新特性之模块Module用法.分享给大家供大家参考,具体如下: 一.Module简介 ES6的Class只是面向对象编程的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题.Module功能就是为了解决这个问题而提出的. 历史上,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能. 在ES6之前,社区制定了一些模块加载方案,最主要的有CommonJS和AMD两种.前者用

  • 详谈commonjs模块与es6模块的区别

    到目前为止,已经实习了3个月的时间了.最近在面试,在面试题里面有题目涉及到模块循环加载的知识.趁着这个机会,将commonjs模块与es6模块之间一些重要的的区别做个总结.语法上有什么区别就不具体说了,主要谈谈引用的区别. commonjs 对于基本数据类型,属于复制.即会被模块缓存.同时,在另一个模块可以对该模块输出的变量重新赋值. 对于复杂数据类型,属于浅拷贝.由于两个模块引用的对象指向同一个内存空间,因此对该模块的值做修改时会影响另一个模块. 当使用require命令加载某个模块时,就会运

  • ES6新特性之解构、参数、模块和记号用法示例

    本文实例讲述了ES6新特性之解构.参数.模块和记号用法.分享给大家供大家参考,具体如下: 一.解构 解构提供了一个方便的地从对象或数组中提取数据的方法,请看下面的例子: //ES6 let [x,y]=[1,2];//x=1,y=2 //ES5 var arr=[1,2]; var x=arr[0]; var y=arr[1]; 使用这个语法,可以一次性给多个变量赋值.一个很好的附加用处是可以很简单的交换变量值: let x=1,y=2; [x,y]=[y,x];x=2 y=1 解构也可以用于对

  • ES6模块化的import和export用法方法总结

    ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范.commonjs主要应用于服务器,实现同步加载,如nodejs.AMD规范应用于浏览器,如requirejs,为异步加载.同时还有CMD规范,为同步加载方案如seaJS. ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案. ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件可以

  • ES6中module模块化开发实例浅析

    本文实例讲述了ES6中module模块化开发.分享给大家供大家参考,具体如下: 多人开发JavaScript时伴随着命名冲突等问题,先后有了模拟块级作用域.命名空间.模块化开发等方法. 之前,模块化开发一直是由第三方库来模拟的,比较知名的有AMD规范和CMD规范. 两个规范分别对应requirejs和seajs. 而现在,ES6提出了自己的模块化统一标准. 一个ES6的模块是一个包含了js代码的文件.ES6里没有所谓的module关键字,一个模块就是一个普通的脚本文件,除了以下两个区别: 1.

  • 如何让node运行es6模块文件及其原理详解

    最新版的 node 支持最新版 ECMAScript 几乎所有特性,但有一个特性却一直到现在都还没有支持,那就是从 ES2015 开始定义的模块化机制.而现在我们很多项目都是用 es6 的模块化规范来写代码的,包括 node 项目,所以,node 不能运行 es6 模块文件就会很不便. 让 node 运行 es6 模块文件的方式有两种: 转码 es6 模块为 commonjs 模块 hook node 的 require 机制,直接让 node 的 require 加载 import/expor

  • 详解CommonJS和ES6模块循环加载处理的区别

    CommonJS模块规范使用require语句导入模块,module.exports导出模块,输出的是值的拷贝,模块导入的也是输出值的拷贝,也就是说,一旦输出这个值,这个值在模块内部的变化是监听不到的. ES6模块的规范是使用import语句导入模块,export语句导出模块,输出的是对值的引用.ES6模块的运行机制和CommonJS不一样,遇到模块加载命令import时不去执行这个模块,只会生成一个动态的只读引用,等真的需要用到这个值时,再到模块中取值,也就是说原始值变了,那输入值也会发生变化

  • ES6知识点整理之模块化的应用详解

    本文实例讲述了ES6知识点整理之模块化的应用.分享给大家供大家参考,具体如下: 目前浏览器还不能完全支持模块化,需要引入很多编译环境,下面在nodejs中来模拟ES6中的模块化 nodejs中针对模块化演示的配置 环境的安装:$ npm install --save babel-cli babel-preset-node6 运行:$ ./node_modules/.bin/babel-node.js --presets node6 ./your_script.js 添加.babelrc文件, 编

  • NodeJS模块与ES6模块系统语法及注意点详解

    社区模块规范: 1.CommonJS规范 规范实现者: NodeJS 服务端 Browserify 浏览器 2.AMD规范 全称 异步模块定义 规范实现者: RequireJS 浏览器 3.CMD规范 通用模块定义 规范实现者: seaJS 服务端和浏览器通用 官方模块规范 1.ESM规范 就是ES6 Module 各浏览器和服务端 目前常用的就是浏览器端的RequireJS.NodeJS.以及ESM CommonJS语法分析 module.export 关键 1.module.exports实

  • ES6新特性:使用export和import实现模块化详解

    在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库,  而像seaJS是基于CMD规范的模块化库,  两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD的区别, 后面参考给了几个链接: 现在ES6自带了模块化, 也是JS第一次支持module, 在很久以后 ,我们可以直接作用import和export在浏览器中导入和导出各个模块了, 一个js文件代表一个js模块: 现代浏览器对模块(module)支持程度不同, 目前都是

  • ES6与CommonJS中的模块处理的区别

    ES6和CommonJS都有自己的一套处理模块化代码的措施,即JS文件之间的相互引用. 为了方便两种方式的测试,使用nodejs的环境进行测试 CommonJS的模块处理 使用require来引入其他模块的代码,使用module.exports来引出 // exportDemo.js count = 1; module.exports.count = count; module.exports.Hello = function() { var name; this.setName = funct

随机推荐