基本介绍

CommonJS模块化

module.exports导出

require导入

ES6模块化

按需导入导出

导出方式

导入方式

默认导出

默认导出方式

默认导入的方式

注意事项

基本介绍

前端模块化编程就是为了解决命名冲突，文件依赖的问题。我们使用模块化编程，可以仅仅引入需要用到的模块，也能解决命名冲突问题。

CommonJS模块化

模块化肯定有导入和导出功能，下面分别进行介绍

module.exports导出

每个 js 文件就是一个模块，有自己的作用域。在文件中定义的变量、函数、类/对象，
都是私有的，对其他 js 文件不可见。我们如果想要其他js进行引用，就需要将其进行导出。

导出的语法为modele.expoets={}，导出的是一个对象，将需要导出的内容放入对象就行了。

let dog = {name:'jack',age:18
}
let describe = '这是一封离别信'//导出dog对象，describe属性
module.exports = {dog,describe
}

require导入

我们想要使用其他js里面的内容，那么肯定就需要进行导入，就像是java的导包一样，js中的导包语法为require(js文件)。

//导入export.js文件，取名为ok
let ok = require('./export')//访问对象的内容
console.log(ok.dog);
console.log(ok.describe);

ES6模块化

前面介绍的是传统的模块化编程，现在来介绍ES6模块化中的模块化编程，相对于传统的模块化编程，更加的灵活。下面进行介绍。

按需导入导出

我们在进行导出的时候可以进行选择导出哪些文件，使用export{}进行导出，{}里面写要导出的内容。也可以在变量定义的时候直接进行导出，下面代码进行演示

导出方式

export const a = 1;
export const b = 2;const dog = {name: '旺财',age: 1
};
export {dog
}

上面代码就导出了三个变量，一个dog对象，还有a，b变量。

导入方式

我们在es6中导入是按需进行导入，即就是用到上面导入什么。使用import {} from '路径'进行导入，{}里面对导出的内容进行接收，就是对象解构的方式，名字必须相同，下面的代码对上面导出的内容进行接收。

import {a,b,dog} from "./export_02"console.log(a)
console.log(b)
console.log(dog.age)

默认导出

这种方式比较灵活，使用的也最多，因为这种方式可以可以不需要导入和导出的名字一致。

默认导出方式

使用export default {}来进行导出，要导出的内容写在{}就行，和其他的导出方式没什么区别，就是多了一个default

export default {sum(a, b) {return a + b;},sub(a, b) {return a - b;}
}
export const a = 1;

上面的形式就是导出了一个匿名对象，一个a变量。

默认导入的方式

使用默认导出方式的文件引入的时候就不是通过对象解构的方式来进行引入而是直接使用一个变量名来进行接收。

import m from "./export_03"
import {a} from "./export_03"console.log(m.sum(1,2))
console.log(a)

上面代码就使用一个m变量接收了导出的匿名对象。

注意事项

ES6 的模块化无法在 Node.js 中执行，需要用 Babel 转码 ES5 后再执行，在导入的时候，没有导出的不能使用。

前端模块化编程(import,export)相关推荐

【JavaScript】前端模块化：import 和 export 的使用
为什么要有模块化? 多人开发时会遇到变量作用域问题. 解决方案:匿名函数,但是会带来代码不可复用的问题解决代码不可复用的问题,可以使用模块化: ES6 规范里的模块化实现比如可以使用type=mo ...
vue的路由与es6的import, export
vue主要用来实现前端模块化编程, 它的最终代码是一些序列化的js,简单的index.html访问入口,和一些image, vue的js使用es6来模块化设计, 为什么要这么做呢,我想主要是为了前端与 ...
Web前端进阶之JavaScript模块化编程知识
JavaScript是前端三要素之一,也是很多初学Web前端的人遭遇的第一条拦路虎.很多同学表示JavaScript涵盖的知识点太多太复杂.应用也是五花八门完全摸不着头脑.但只要我们一点一点由基础到进 ...
前端模块化（二）：模块化编程
所谓的模块化编程就是封装细节,提供使用接口,彼此之间互不影响,每个模块都是相互独立,实现某一特定的功能.如果其他模块想调用的时候,可以暴露我们所希望对外的公开的方法与数据. 1.函数写法 functi ...
模块化加载_前端模块化简单总结
来源 | http://www.fly63.com/article/detial/9827 前言 JavaScript初期就是为了实现简单的页面交互逻辑,如今CPU.浏览器性能得到了极大的提升,很多页 ...
JavaScript模块化编程知识分享！
JavaScript是前端三要素之一,也是很多初学Web前端的人遭遇的第一条拦路虎.很多同学表示JavaScript涵盖的知识点太多太复杂.应用也是五花八门完全摸不着头脑.但只要我们一点一点由基础到进 ...
JavaScript 中的 require / exports、import / export、浅谈JavaScript、ES5、ES6
Node.js 的基础教学之 exports 和 module.exports:https://zhuanlan.zhihu.com/p/82057593 浅谈 JavaScript.ES5.ES6 ...
❤️《大前端—模块化》
<大前端-模块化> 1.简介模块化产生的背景随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. Javascript ...
最全面、最详细的“前端模块化”总结
背景随着前端功能越来越复杂,前端代码日益膨胀,为了减少维护成本,提高代码的可复用性,前端模块化势在必行. 所有js文件都在一个html中引入,造成以下不良影响: 请求过多.首先我们要依赖多个模块,那 ...

前端模块化编程(import,export)

基本介绍

CommonJS模块化

module.exports导出

require导入

ES6模块化

按需导入导出

导出方式

导入方式

默认导出

默认导出方式

默认导入的方式

注意事项

前端模块化编程(import,export)相关推荐

最新文章

热门文章