前端进阶之——模块化

        在做项目的时候越来越发现模块化的重要性,做好模块化开发不仅给后期的维护带来不少好处而且大大提升项目开发效率,接下来整理一下模块化相关知识吧。

模块化开发的优点

  1. 封装方法、提高代码的复用性、可维护性和可读性
  2. 隔离作用域,避免污染全局作用域
  3. 避免变量冲突

模块化开发的各种方法

立即执行函数(IIFE)

  • 立即执行函数来创建模块,将私有成员放在函数作用域以内,不暴露在外部。将公共的方法返回。
var module = (function() {var privateVar = 'Private Variable';function privateMethod() {console.log('This is a private method');}function publicMethod() {console.log('This is a public method');}return {publicMethod: publicMethod};
})();module.publicMethod(); // Output: This is a public method

CommonJS:

  • node中自带的,同步使用require导入模块,module.exports或exports导出模块,适用于服务器端
// math.js
function add(a, b) {return a + b;
}function subtract(a, b) {return a - b;
}module.exports = {add,subtract
};// app.js
const math = require('./math');
console.log(math.add(2, 3)); // Output: 5
console.log(math.subtract(5, 2)); // Output: 3

AMD(Asynchronous Module Definition)

  • 使用define定义模块,异步加载模块,适用于浏览器、按需加载模块
// math.js
define([], function() {function add(a, b) {return a + b;}function subtract(a, b) {return a - b;}return {add,subtract};
});// app.js
require(['math'], function(math) {console.log(math.add(2, 3)); // Output: 5console.log(math.subtract(5, 2)); // Output: 3
});

CMD

  • 使用define定义模块,异步加载模块,适用于浏览器、就近依赖
define(function(require, exports) {// 对外提供name属性exports.name = 'myModule';// 对外提供hello方法exports.hello = function() {console.log('Hello myModule');};
});
<!DOCTYPE html>
<html><head><script type="text/javascript" src="sea.js"></script><script type="text/javascript">//加载一个模块,在加载完成时,执行回调seajs.use('myModule', function(a) {console.log(a.name);a.hello();});</script></head><body></body>
</html>

ES6模块

  • 使用 import 导入模块,使用 export 导出模块,浏览器与服务器通用
// math.js
export function add(a, b) {return a + b;
}export function subtract(a, b) {return a - b;
}// app.js
import { add, subtract } from './math';console.log(add(2, 3)); // Output: 5
console.log(subtract(5, 2)); // Output: 3

异步加载JS有哪些方法

 1 设置<script>属性async = 'async'

  • 脚本将异步加载并立即执行,不会阻塞页面的解析和渲染、加载完成后,将在页面任何位置执行
<script src='script.js' async="async"><script>

2 动态创建script DOM:

  • 使用JS动态创建<script>元素,通过设置src属性指定脚本的URL,

var script = document.creatElement('script');
script.src = 'script.js';
document.head.appendChild(script)

3 defer属性

<script src="script.js" defer></script>

4 XmlHttpRequest脚本注入

  • 利用对象加载脚本内容,将其注入到页面当中,使用eval()函数执行脚本。

var xhr = new XMLHttpRequest();
xhr.open('GET','script.js',true);
xhr.onreadystatechange = function(){if(xhr.readyState === 4 && xhr.status === 200){eval(xhr.responseText);}
};
xhr.send();

5 异步加载库LABjs

  • LABjs是一个异步加载JS的库,可以控制JS的加载顺序,可用它来的API定义和加载依赖关系
 
$LAB.script('A.js').wait().script('B.js')

6 模块加载器 Sea.js

  • 用于web端模块化开发的加载器,可以异步加载和管理模块,加载完成后执行回调函数。
seajs.use(['module1','module2'],function(module1,module2){console.log('Hello')
});

7 Dederred Scripts(延迟脚本):

  • defer属性可以将脚本延迟到文档解析之后再执行,并且会按照他们在文档中出现的顺序执行,但在DOMContentLoaded事件触发之前执行。
<script src="script.js" defer></script>

8 Dynamic Import(动态导入):

  • import()可以异步加载JS模块,并返回一个Promise对象,链式调用
import('module.js').then(module => {// 执行模块加载完成后的逻辑}).catch(error => {// 处理加载失败的情况});

9 Web Workers(Web工作者)

  • Web Workers运行在后台的JS脚本,可以耗时操作而不会阻塞主线程。
  • 可以异步加载和执行JS脚本,提高页面的响应性
var worker = new Worker('worker.js');
worker.onmessage = function(event) {// 处理从 Worker 返回的消息
};
worker.postMessage('start');

参考文章

前端进阶之旅

第25题 谈谈模块化的发展历程以及各自的特_请定义一个文件模块mymodule.js,定义一个name变量及一个sayhello的方法,暴露_crazy的蓝色梦想的博客-CSDN博客

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

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

相关文章

【LeetCode】《LeetCode 101》第十二章:字符串

文章目录 12.1 字符串比较242 . 有效的字母异位词&#xff08;简单&#xff09;205. 同构字符串&#xff08;简单&#xff09;647. 回文子串&#xff08;中等&#xff09;696 . 计数二进制子串&#xff08;简单&#xff09; 12.2 字符串理解224. 基本计算器&#xff08;困难&am…

常用Web漏洞扫描工具汇总(持续更新中)

常用Web漏洞扫描工具汇总 常用Web漏洞扫描工具汇总1、AWVS&#xff0c;2、OWASP Zed&#xff08;ZAP&#xff09;&#xff0c;3、Nikto&#xff0c;4、BurpSuite&#xff0c;5、Nessus&#xff0c;6、nmap7、X-ray还有很多不是非常知名&#xff0c;但可能也很大牌、也较常见的。…

前端基础4——jQuery

文章目录 一、基本了解1.1 导入jQuery库1.2 基本语法1.3 选择器 二、操作HTML2.1 隐藏和显示元素2.2 获取与设置内容2.3 获取、设置和删除属性2.4 添加元素2.5 删除元素2.6 设置CSS样式 三、jQuery Ajax3.1 基本语法3.2 回调函数3.3 常用HTTP方法3.4 案例一3.4.1 准备工作3.4.2…

react学习之路:InputNumber的parser在ts里面报类型错误

错误提示&#xff1a; Type ‘(value: string | undefined) > string’ is not assignable to type ‘(displayValue: string | undefined) > 0 | 2 | 20’. Type ‘string’ is not assignable to type ‘0 | 2 | 20’. 代码示例&#xff1a; <InputNumbermin{0}m…

2511. 最多可以摧毁的敌人城堡数目

文章目录 Tag题目来源题目解读解题思路复杂度分析写在最后 Tag 【数组】 题目来源 2511. 最多可以摧毁的敌人城堡数目 题目解读 在数组 forts 中&#xff0c;forts[i] 有三种数值&#xff1a; -1&#xff1a; 表示第 i 个位置没有城堡&#xff0c;是空地&#xff1b;0&…

从零开始,探索C语言中的字符串

字符串 1. 前言2. 预备知识2.1 字符2.2 字符数组 3. 什么是字符串4. \04.1 \0是什么4.2 \0的作用4.2.1 打印字符串4.2.2 求字符串长度 1. 前言 大家好&#xff0c;我是努力学习游泳的鱼。你已经学会了如何使用变量和常量&#xff0c;也知道了字符的概念。但是你可能还不了解由…

layui框架学习(40:数据表格_主要事件)

Layui数据表格模块主要通过各类事件响应工具栏操作、单元格编辑或点击等交互操作&#xff0c;本文学习table数据表格模块中的主要事件及处理方式。   头部工具栏事件。通过代码“table.on(‘toolbar(test)’, function(obj))”获取lay-filter属性为test的数据表格的头部工具栏…

蒲公英路由器如何设置远程打印?

现如今&#xff0c;打印机已经是企业日常办公中必不可少的设备&#xff0c;无论何时何地&#xff0c;总有需要用到打印的地方&#xff0c;包括资料文件、统计报表等等。 但若人在外地或分公司&#xff0c;有文件急需通过总部的打印机进行打印时&#xff0c;由于不在同一物理网络…

每日一题-动态规划(从不同类型的物品中各挑选一个,使得最后花费总和等于1000)

四种类型的物品&#xff0c;每一种类型物品数量都是n&#xff0c;先要从每种类型的物品中挑选一件&#xff0c;使得最后花费总和等于1000 暴力做法10000^4 看到花费总和是1000&#xff0c;很小且固定的数字&#xff0c;肯定有玄机&#xff0c;从这里想应该是用dp&#xff0c;不…

记一次反弹shell的操作【非常简单】

#什么是反弹shell 通常我们对一个开启了80端口的服务器进行访问时&#xff0c;就会建立起与服务器Web服务链接&#xff0c;从而获取到服务器相应的Web服务。而反弹shell是我们开启一个端口进行监听&#xff0c;转而让服务器主动反弹一个shell来连接我们的主机&#xff0c;我们再…

Git企业开发控制理论和实操-从入门到深入(四)|Git的远程操作|Gitee

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总 然后就是博主最近最花时间的一个专栏…

无涯教程-Android - Broadcast Receivers

Broadcast Receivers 仅响应来自其他应用程序或系统本身的广播消息&#xff0c;这些消息有时称为events或intents。例如&#xff0c;应用程序还可以启动广播&#xff0c;以使其他应用程序知道某些数据已下载到设备并可供他们使用&#xff0c;因此广播接收器将拦截此通信并启动适…

网络中的问题2

距离-向量算法的具体实现 每个routerY的路由表表项 involve<目的网络N&#xff0c;距离d&#xff0c;下一跳X> 对邻居X发来的报文,先把下一跳改为X,再把距离1,if original route table doesn’t involve N,add this item&#xff1b; else if original table’s relate…

VC++使用Microsoft Speech SDK进行文字TTS朗读

Microsoft Speech SDK下载地址 https://www.microsoft.com/en-us/download/details.aspx?id10121 需要msttss22L.exe、SpeechSDK51.exe、SpeechSDK51LangPack.exe三个&#xff0c;下载后全部安装 使用VS2005建立一个win32控制台项目 朗读"hello word"、中文“你好”…

[dasctf]misc3 chrchrchr.pcapng

webshell 流量分析 php代码部分没啥看的&#xff0c;主要在标黄的部分&#xff0c;裁剪掉前面的字符可base解码 能看到在向a.txt中写入数据 wp # tshark.exe -r chrchrchr.pcapng -T fields -e urlencoded-form.value -Y "urlencoded-form.keyzd2ebbfb26dd" >…

【Sql】把数据库字段用函数根据逗号分裂成列表,然后判断列表中是否包含目标值

【Sql】把数据库字段用函数根据逗号分裂成列表&#xff0c;然后判断列表中是否包含目标值 【1】问题描述【2】Oracle内置函数解决【3】mysql的内置函数INSTR()【4】mysql的内置函数FIND_IN_SET() 【1】问题描述 数据库中【库信息db】和【集群信息cluster】是一对多的关系&…

Remmina在ubuntu22.04中无法连接Windows

Remmina在ubuntu22.04中无法连接Windows 问题 提示为&#xff1a; 无法通过TLS到RDP服务器… 分析 原因是Remmina需要使用openssl通过RDP加密与Windows计算机连接&#xff0c;而ubuntu22.04系统中OpenSSL版本为3.0&#xff0c;Openssl3 将 tls<1.2 和 sha1 的默认安全级别…

管理类联考——逻辑——形式逻辑——汇总篇——知识点突破——形式逻辑——联言选言假言——矛盾

角度 角度——汇总——持续优化 性质 &#xff08;1&#xff09; 所有的 S 是 P 所有的S是P 所有的S是P 与 有的 S 不是 P 有的S不是P 有的S不是P矛盾 &#xff08;2&#xff09; 所有的 S 不是 P 所有的S不是P 所有的S不是P 与 有的 S 是 P 有的S是P 有的S是P 矛盾 &#xf…

Git——Windows平台创建gitee私有仓库详解

目录 1. 安装git 2. gitbash配置 2.1 设置 2.2 生成key 2.3 项目管理 2.3.1 本地新建 2.3.2 clone远程仓库的工程到本地改文件 1. 安装git 默认安装。 2. gitbash配置 2.1 设置 打开gitbash&#xff0c;设置用户名和邮箱&#xff1a; git config --global user.name …

excel功能区(ribbonx)编程笔记--2 button控件与checkbox控件

我们上一章简单先了解了ribbonx的基本内容,以及使用举例实现自己修改ribbox的内容,本章紧接上一章,先讲解一下ribbonx的button控件。 在功能区的按钮中,可以使用内置图像或提供自已的图像,可以指定大按钮或者更小的形式,添加少量的代码甚至可以同时提供标签。此外,可以利…