我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript模块化的示例分析

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

JavaScript模块化的示例分析

小编给大家分享一下JavaScript模块化的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

1. 浏览器支持

使用JavaScript 模块依赖于 import 和 export,import 和 export 的浏览器支持程度是最新的浏览器版本都是支持的,但 IE 和旧版本的浏览器不支持,因此若想兼容 IE 和旧版本的浏览器基本就不能使用了。

export 和 import 是成对出现,配合工作的

JS模块化是各种JS框架学习的前提基础

import 和 export 语句用于将一个模块里实现某些功能的变量或函数导入/导出,也可导入/导出类

2. export 导出模块

默认导出

一个模块只能有一个默认导出,默认导出的变量只能有一个,且不能有大括号{}

语法为export default 变量名

model.js

function Test1(){    console.log("这是默认导出")}function Test2(){    console.log('这是命名导出')}export default Test1

批量导出

语法为export {变量名,变量名……}

function Test1(){    console.log("这是默认导出")}function Test2(){    console.log('这是命名导出')}export {Test1, Test2}

3. import 导入模块

默认导入

main.js

import Test1 from "./model.js"Test1()

默认导入的重命名

main.js

import x from "./model.js"//x就是默认导出的Test1x()

批量导入

main.js

import {Test1, Test2} from "./model.js"Test1();Test2();

批量导入的重命名

as关键字跟一个新名字实现重命名

main.js

import {Test1 as x1, Test2 as x2} from "./model.js"x1();x2();

也可在导出时用as关键字重命名

model.js

function Test1(){    console.log("这是默认导出")}function Test2(){    console.log('这是命名导出')}export {Test1 as x1, Test2 as x2}

应用模块

html

<script class="lazy" data-src="main.js"></script>

4. 创建模块对象

使用对象,在as关键字重命名的基础上进一步简单化

import * as Model from "./model.js"Model.x1();Model.x2();

5. export import 中转站

有时候可以将多个子模块组合到一个父模块中,再由父模块决定导出哪个,这个父模块文件就像是个组合各个模块的中转站

语法为export {变量名} from 模块路径

当前目录结构结构

class="lazy" data-src

    index.html

    main.js

    redirection.js

    models

        model.js

        model2.js

model.js

function Test1(){    console.log("这是子模块1")}export {Test1}

model2.js

function Test2(){    console.log('这是子模块2')}export {Test2}

redirection.js

export {Test1} from "./models/model.js"export {Test2} from "./models/model2.js"

main.js

import * as Model from "./redirection.js"Model.Test1()Model.Test2()

html

<script class="lazy" data-src="./main.js"></script>

6. 动态加载模块

动态加载模块用于在导入模块时不必预先加载所有模块,可以在需要时使用 import() 作为函数调用,将其参数传递给模块的路径,它返回一个 promise,使用 Promise 对象对模块加载结果操作。

语法为import(动态加载的模块路径)

dynamic.js

function TestDy(){    console.log("这是动态模块")}export default TestDy

main.js

document.querySelector('.load').onclick = function(){    import('./dynamic.js').then((Model)=>{        Model.default()    })}

JavaScript的作用是什么

1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies,包括创建和修改等。7、基于Node.js技术进行服务器端编程。

以上是“JavaScript模块化的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript模块化的示例分析

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JavaScript模块化的示例分析

小编给大家分享一下JavaScript模块化的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1. 浏览器支持使用JavaScript 模块依赖于 impo
2023-06-15

python模块的示例分析

小编给大家分享一下python模块的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Python的优点有哪些1、简单易用,与C/C++、Java、C# 等传
2023-06-14

Python模块cachetools的示例分析

Python模块cachetools的示例分析,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。前言cachetools 是一个 Python 模块,提供各种记忆集合和修饰符,包括
2023-06-02

Android开发之项目模块化的示例分析

这篇文章主要为大家展示了“Android开发之项目模块化的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Android开发之项目模块化的示例分析”这篇文章吧。项目协同项目协同,也叫多项目
2023-05-30

C# Windows CE特点之模块化的示例分析

小编给大家分享一下C# Windows CE特点之模块化的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!C# Windows CE特点之模块化是什么呢?C# Windows CE是模块化的,这对可配置的操作系统来说
2023-06-17

python中OS模块和time模块的示例分析

这篇文章将为大家详细讲解有关python中OS模块和time模块的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、OS模块概述Python OS模块包含普遍的操作系统功能。如果你希望你的程序能够
2023-06-15

Python中os模块和shutil模块的示例分析

这篇文章将为大家详细讲解有关Python中os模块和shutil模块的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。python可以做什么Python是一种编程语言,内置了许多有效的工具,Pyth
2023-06-06

Angular根模块与特性模块的示例分析

这篇文章主要介绍Angular根模块与特性模块的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!前提是安装了 Angular cli,以下的大部分文件创建都是依赖于cli提供的指令Angular中的特性模板和根
2023-06-14

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录