当前位置: 首页 > news >正文

前端进阶之——模块化

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

模块化开发的优点

  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.lryc.cn/news/150671.html

相关文章:

  • Python爬虫抓取表情包制作个性化聊天机器人
  • 使用pip命令安装库,装到其他环境中的问题。
  • 如何使用CSS实现一个带有动画效果的进度条?
  • uni-app 报错 navigateTo:fail page “/pages/.../...“ is not found
  • 【unity插件】使用BehaviorDesigner插件制作BOSS的AI行为树
  • 概念解析 | 量子机器学习:将量子力学与人工智能的奇妙融合
  • 【Cortex-M3权威指南】学习笔记4 - 异常
  • RISC-V(2)——特权级及特权指令集
  • Linux——常用命令大汇总(带你快速入门Linux)
  • 记录 使用 git 克隆仓库报错:Warning: Permanently added‘github.com’ to the .....(ssh )
  • kafka---- zookeeper集群搭建
  • linux安装firefox
  • 【MySQL】基础语法总结
  • 【玩玩Vue】使用el-menu作为菜单时,通过一二级路由控制菜单高亮
  • 9.2 【C语言】使用结构体数组
  • leetcode原题: 最小值、最大数字
  • Prompt2Model: Generating Deployable Models from Natural Language Instructions
  • 前端埋点 sendBeacon 替代方式
  • 面试官问我MySQL和MariaDB的联系和区别,这我能不知道?
  • 1.网络空间搜素引擎
  • 《安富莱嵌入式周报》第321期:开源12导联便携心电仪,PCB AI设计,150M示波器差分探头,谷歌全栈环境IDX,微软在Excel推出Python
  • 前端开发必备的网站
  • Java运行时jar时终端输出的中文日志是乱码
  • Vue框架--Vue中el和data的两种写法
  • 【数据结构】 二叉树面试题讲解->贰
  • C和SystemVerilog联合仿真
  • 15-mongodb
  • CSS学习笔记02
  • 为什么Java接口可以多继承,而类不可以?
  • 自动化信息收集工具 水泽 使用教程