模块化开发

简介: 模块化开发

1、export基本使用


export指令用于导出变量,比如下面的代码:


image.png

image.png


上面的代码还有另外一种写法:


image.png

image.png


2、导出函数或类


上面我们主要是输出变量,也可以输出函数或者输出类

上面的代码也可以写成这种形式:


image.png

image.png


image.png

image.png


3、export default


某些情况下,一个模块中包含某个的功能,我们并不希望给这个功能命名,而且让导入者可以自己来命名

这个时候就可以使用export default


image.png

image.png


我们来到main.js中,这样使用就可以了

这里的myFunc是我自己命名的,你可以根据需要命名它对应的名字


image.png

image.png


另外,需要注意:

export default在同一个模块中,不允许同时存在多个。


4、import使用


我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了

首先,我们需要在HTML代码中引入两个js文件,并且类型需要设置为module


image.png

image.png


import指令用于导入模块中的内容,比如main.js的代码


image.png


image.png


如果我们希望某个模块中所有的信息都导入,一个个导入显然有些麻烦:

通过可以导入模块中所有的export变量
但是通常情况下我们需要给
起一个别名,方便后续的使用


image.png

image.png



相关文章
|
18天前
|
JavaScript 前端开发
必知的技术知识:esm前端模块化
必知的技术知识:esm前端模块化
|
2月前
|
缓存 JSON 前端开发
前端模块化的前世今生(上)
前端模块化的前世今生(上)
|
8月前
|
缓存 JavaScript 前端开发
模块化
模块化
33 0
|
11月前
|
缓存 前端开发 JavaScript
模块化开发与前端打包工具
模块化开发与前端打包工具
150 0
|
11月前
|
缓存 开发工具 Android开发
其实,模块化并没有你想的那么难
其实,模块化并没有你想的那么难
|
缓存 JavaScript 前端开发
前端模块化 #116
前端模块化 #116
85 0
|
设计模式 缓存 前端开发
骚年,你对前端模块化了解多少
不管是前端老司机还是刚接触前端的"菜鸟"。模块化想必在每天工作中,或多或少都会接触到。尤其针对一些针对React、Vue开发的同学来说,那就是每天都会脱口而出的一个必备术语。并且在很多技术文档中,都常常看到AMD、UMD、COMMONJS还有ES6中的module。 但是,模块化的本质是什么!前端是如何从"茹毛饮血"的<script>到现在es6的module的呢。 今天我们就来唠唠这段鲜为人知的故事。
|
编解码 JavaScript 前端开发
前端模块化!
模块化 1、 简介 模块化产生的背景 随着网站逐渐变成”互联网应用程序”,嵌入网页的Javascript代码越来越庞大,越来越复杂。 Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。但是,Javascript不是一种模块化编程语言,它不支持”类”(class),包(package)等概念,也不支持”模块”(module)。
|
小程序
小程序模块化开发
小程序模块化开发
210 0
小程序模块化开发
|
自然语言处理 前端开发 JavaScript
前端模块化的全面总结(上)
随着前端功能越来越复杂,前端代码日益膨胀,为了减少维护成本,提高代码的可复用性,前端模块化势在必行。
251 0
前端模块化的全面总结(上)