JS基础之模块化

JS基础之模块化

  • JS模块化
    • 模块化
      • 前端发展
    • 什么是模块?
    • 怎么定义模块化
    • IIFE匿名函数自调用
    • IIFE模式增强
    • 模块化的好处

JS模块化

模块化

JS DOM操作 代码规范管理的标准

  1. 不同模块间的管理
  2. 模块内部自组织 标准
  3. bundler (模块构建工具) ESNext TS -> ES5

前端发展

生态 ------------------ 诞生时间
Node.js -------------- 2009年
NPM(包管理器) ---- 2010年
requireJS(AMD) — 2010年
seaJS(CMD) ------- 2011年
broswerify ----------- 2011年
webpack ------------ 2012年
grunt ----------------- 2012年
gulp ------------------ 2013年
react ----------------- 2013年
vue ------------------- 2014年
angular -------------- 2016年
redux ----------------- 2015年
vite -------------------- 2020年
snowpack ----------- 2020年

  1. 09年Nodejs出现
  2. 10年 npm 包管理器出现
  3. 10 年 requireJS amd async module definition 异步模块定义出现
  4. 11年 CommonJS 出现
  5. 11年 browserify 浏览器化
  6. webpack grunt gulp 构建工具,解决代码编码之后的标准化的产物
  7. 13 14年VDOM react vue
  8. 跨端
  9. vite snowpack truopack bun
  1. 对外:封装标准 ,组合
  2. 对内:私有化 scope 对外自定义接口方法

什么是模块?

  • 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件),并进行组合在一起;
  • 块的内部数据与实现是私有的,只是向外部暴露一些接口(方法)与外部其他模块通信;

怎么定义模块化

思考:可以从哪方面出发?
闭包、自执行函数等

IIFE匿名函数自调用

匿名函数自调用(闭包)

  • 作用:数据私有化,外部只能通过暴露的方法操作
  • 编码:将数据和行为封装到一个函数内部,通过给window添加属性来向外暴露接口

IIFE问题:

  • 依赖顺序问题
  • 代码可维护性问题
//index.html文件
<script type="text/javascript" src="module.js"></script>
<script type="text/javascript">myModule.foo()myModule.bar()console.log(myModule.data)//undefined不能访问模块内部的数据myModule.data = 'xxxx'//不是修改的模块内部的datamyModule.foo()//没有改变
</script>//module.js文件
(function(window){let data = 'www.baidu.com';//操作数据的函数function foo (){//用于暴露的函数console.log(`foo is : ${data}`);}function bar(){//用于暴露有函数console.log(`bar is : ${data}`);otherFun();//内部调用}function otherFun(){//内部私有的函数console.log('otherFun()')}window.myModule = {foo,bar}//ES6写法
})(window);

最后得到的结果:

foo is : www.baidu.com
bar is : www.baidu.com
otehrFun()
undefined
foo is : www.baidu.com

IIFE模式增强

这就是现代模块实现的基石:
引入JQuery库

// module.js文件
(function(window, $) {let data = 'www.baidu.com'//操作数据的函数function foo() {//用于暴露有函数console.log(`foo() ${data}`)$('body').css('background', 'red')}function bar() {//用于暴露有函数console.log(`bar() ${data}`)otherFun() //内部调用}function otherFun() {//内部私有的函数console.log('otherFun()')}//暴露行为window.myModule = { foo, bar }
})(window, jQuery)// index.html文件
<!-- 引入的js必须有一定顺序 -->
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="module.js"></script>
<script type="text/javascript">myModule.foo()
</script>

模块化的好处

  • 避免命名冲突(减少命名空间污染);
  • 更好的分离,按需加载;
  • 更高的复用性;
  • 高可维护性;

好啦这期我们就到这里啦,我们下期聊聊【模块化规范】

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/234933.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python数据处理必备:Pandas DataFrame中行迭代技巧大曝光!

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在数据分析和处理中&#xff0c;Pandas是Python中最常用的库之一&#xff0c;而DataFrame是Pandas的核心数据结构之一。迭代DataFrame中的行是一种常见的操作&#xff0c;本文将详细介绍几种迭代DataFrame行的方…

k8s集群内部署nexus

一、前言 在k8s集群中部署nexus服务需要使用到pv、pvc服务来存储nexus的数据&#xff0c;需要使用service服务来提供对外访问nexus服务的端口&#xff0c;需要使用deployment服务来管理nexus服务&#xff0c;接下来就是用这些服务来在k8s集群中搭建nexus&#xff0c;pv服务使用…

爱芯派pro通过无线网卡rtl8188eu连接热点

爱芯派pro通过无线网卡rtl8188eu连接热点 爱芯派pro目前的底板的pcie的复位有问题&#xff0c;所以pcie接口无法挂载上去&#xff0c;所以自己购买的rtl8822网卡也用不了&#xff0c;然后想起来自己还有正点原子的rtl8188eu网卡&#xff0c;但是没有和工作人员进行摸索后才知道…

如何禁止外网访问公司内网服务器

对于企业网络&#xff0c;经常会用到访问控制&#xff0c;例如限制员工的上网时间&#xff1f;或如何控制各部门之间的网络互通等等&#xff0c;在实际企业网络项目中经常会遇到&#xff0c;这里面我们就可以用到ACL访问列表控制了&#xff0c;本期我们一起来看下&#xff0c;如…

SpringBoot已经禁掉了循环依赖!

还在问循环依赖嘛&#xff1f;SpringBoot已经禁掉了循环依赖&#xff01; 首发2023-12-18 11:26yuan人生 如果现在面试时还有人问你循环依赖&#xff0c;你就这样怼他&#xff1a;循环依赖是一种代码质量低下的表现&#xff0c;springboot2.6之后的版本已经默认禁用了。 Spr…

保护电脑安全,火绒安全助手 V5.0

火绒安全软件&#xff0c;也称为“火绒安全助手”是一款由中国研发的综合安全软件。火绒安全软件旨在为计算机用户提供全面的安全保护&#xff0c;包括防病毒、反恶意软件、网络安全、系统优化等功能。 火绒安全的功能 病毒防护&#xff1a;火绒提供实时的病毒和恶意软件扫描…

排序算法——快排

快速排序算法最早是由图灵奖获得者Tony Hoare设计出来的,他在形式化方法理论以 及ALGOL.60编程语言的发明中都有卓越的贡献,是20世纪最伟大的计算机科学家之—。 而这快速排序算法只是他众多贡献中的—个小发明而已。 快速排序&#xff08;Quick Sort&#xff09;的基本算法思…

C语言—每日选择题—Day57

指针相关博客 打响指针的第一枪&#xff1a;指针家族-CSDN博客 深入理解&#xff1a;指针变量的解引用 与 加法运算-CSDN博客 第一题 1. 下面程序段&#xff08;&#xff09; char *str[] {"ABC", "DEF", "GHI"}; puts(str[1]); A&#xff1a;A…

用户行为分析遇到的问题-ubantu16,hadoop3.1.3

用户行为分析传送门 我的版本 ubantu16 hadoop 3.1.3 habse 2.2.2 hive3.1.3 zookeeper3.8.3 sqoop 1.46/1.47 我sqoop把MySQL数据往hbase导数据时候有问题 重磅&#xff1a;大数据课程实验案例&#xff1a;网站用户行为分析&#xff08;免费共享&#xff09; 用户行为分析-小…

5G+云渲染技术:将如何快速推进XR和元宇宙?

XR&#xff08;扩展现实&#xff09;领域正在以惊人的速度增长。目前&#xff0c;到 2024 年&#xff0c;一些专家表示这个行业的价值将达到 3000 亿美元。 这个行业发展如此迅速的部分原因是 XR 将在商业环境中的带来巨大利益。近年来&#xff0c;很多企业遇到了将增强现实和…

RabbitMQ不公平分发问题分析及问题解决

1.不公平分发 1.1 不公平分发策略是什么&#xff1f; 在 RabbitMQ 中&#xff0c;不公平分发&#xff08;Unfair Dispatch&#xff09;是指当多个消费者&#xff08;Consumers&#xff09;同时订阅同一个队列&#xff08;Queue&#xff09;时&#xff0c;消息的分发机制是不公…

I.MX6ULL_Linux_驱动篇(48)linux I2C驱动

I2C 是很常用的一个串行通信接口&#xff0c;用于连接各种外设、传感器等器件。本章我们来学习一下如何在 Linux 下开发 I2C 接口器件驱动&#xff0c;重点是学习 Linux 下的 I2C 驱动框架&#xff0c;按照指定的框架去编写 I2C 设备驱动。本章同样以 I.MX6U-ALPHA 开发板上的 …

Java数据结构-模拟ArrayList集合思想,手写底层源码(1),底层数据结构是数组,编写add添加方法,正序打印和倒叙打印

package com.atguigu.structure; public class Demo02_arrayList {public static void main(String[] args) {MyGenericArrayListV1 arrayListV1 new MyGenericArrayListV1();//arr.add(element:100,index:1);下标越界&#xff0c;无法插入//初始化&#xff08;第一次添加&…

Java 栈和队列的交互实现

文章目录 队列和栈的区别一.用队列模拟实现栈1.1入栈1.2出栈1.3返回栈顶元素1.4判断栈是否为空 二.用栈模拟实现队列2.1 入队2.2出队2.3peek2.4判断队列是否为空 三.完整代码3.1 队列模拟实现栈3.2栈模拟实现队列 队列和栈的区别 栈和队列都是常用的数据结构&#xff0c;它们的…

令人惊叹的代码技巧

在编程世界中&#xff0c;有一些令人惊叹的代码技巧和巧妙的实现方式。以下是一些我见过的令人印象深刻的代码技巧&#xff1a; 函数式编程魔法&#xff1a; 使用函数式编程的一些特性&#xff0c;比如高阶函数、匿名函数和Lambda表达式&#xff0c;可以使代码更为简洁、易读。…

飞天使-k8s知识点1-kubernetes架构简述

文章目录 名词功能要点 k8s核心要素CNCF 云原生框架简介k8s组建介绍 名词 CI 持续集成, 自动化构建和测试&#xff1a;通过使用自动化构建工具和自动化测试套件&#xff0c;持续集成可以帮助开发人员自动构建和测试他们的代码。这样可以快速检测到潜在的问题&#xff0c;并及早…

揭秘Spark学习框架网站:让你轻松掌握大数据处理神器!

介绍&#xff1a;Apache Spark是一个开源的大数据处理框架&#xff0c;它致力于实现高速、易用和复杂分析。Spark最初由加州大学伯克利分校的AMPLab于2009年开始开发&#xff0c;并于2010年成为Apache的开源项目之一。由于其出色的性能表现与丰富的功能特性&#xff0c;Spark已…

【计算机四级(网络工程师)笔记】操作系统概论

目录 一、OS的概念 1.1OS的定义 1.2OS的特征 1.2.1并发性 1.2.2共享性 1.2.3随机性 1.3研究OS的观点 1.3.1软件的观点 1.3.2资源管理器的观点 1.3.3进程的观点 1.3.4虚拟机的观点 1.3.5服务提供者的观点 二、OS的分类 2.1批处理操作系统 2.2分时操作系统 2.3实时操作系统 2.4嵌…

SpringBoot之IOCDI的详细解析

3.3.2 IOC详解 通过IOC和DI的入门程序呢&#xff0c;我们已经基本了解了IOC和DI的基础操作。接下来呢&#xff0c;我们学习下IOC控制反转和DI依赖注入的细节。 3.3.2.1 bean的声明 前面我们提到IOC控制反转&#xff0c;就是将对象的控制权交给Spring的IOC容器&#xff0c;由…

c语言编写http服务器(Linux下运行)

参考文章&#xff1a;https://blog.csdn.net/baixingyubxy/article/details/125964986?spm1001.2014.3001.5506 上面是详细讲解&#xff0c;我这篇是总结了他的代码&#xff0c;因为他没给整体代码 所有代码&#xff1a; #include <stdio.h> #include <stdlib.h&g…