您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

前端技术模块化发展的前因后果

时间:2023-09-06 14:02:05  来源:  作者:Onegun

说起模块化开发大家想必都不陌生,特别是随着前端应用复杂化,代码呈倍数增长,我们不得不耗费大量的时间去进行管理,模块化也就逐渐的被大家所接受。

所以具体来讲的话,模块化开发就是指将复杂的应用功能分为多个模块进行开发,这样一来一个模块就是实现特定功能的文件,有了模块,最直接的价值就是我们可以更方便地管理代码,甚至是直接引入使用别人的代码,想要什么功能,就加载什么模块。

模块化开发的发展

其实早期 JAVAScript 的模块化是基于文件划分的方式去实现的,这是我们 web 当中最原始化的模块系统,当然这个方式下有几个突出的问题,例如命名冲突、全局污染等。

后面我们采用命名空间方式,约定每一个模块只暴露一个全局的对象,所有的模块成员都挂载到这个对象下面,具体做法就是在 JavaScript 的模块化的基础上,将每一个模块包裹成为全局对象的方式去实现,类似于在模块内去为我们的模块一些成员去添加命名空间,但这种方式有一个明显的问题就是没有解决模块之间的依赖性问题。

再到后面也出现了立即执行函数的方式(IIFE),他的原理就是将每一个模块都放到函数私有作用域当中,对于需要暴露的成员,再通过挂载到全局对象的方式去实现,这里也有一个实际的例子:

;(function () {
var name = 'module1'
function moduleFn() {
console.log(name + '---> moduleFn');
}
window.module1 = {
moduleFn: moduleFn
}
})()

而发展至今,模块化开发又有了新的发展和技术实现方式,特别是在混合应用快速发展的今天,应用功能更加多样,代码更加复杂,模块化开发的重要性似乎成为一项共识。

模块化开发的优点

如果要说模块化开发和传统开发模式最大的区别,个人认为除了实现的方式不一致外,其实模块化开发还能在开发效率、便捷度上面有不小的提升。更为具体来讲,我认为主要体现在以下四个方面:

1、架构灵活,焦点分离

在模块化开发中模块化本身能够根据实际需求和变化进行灵活的调整和扩展,可以将系统划分为不同的层次,如数据访问层、业务逻辑层、表示层等。这种分层设计方式可以降低系统的耦合性,在一定程度上提升系统的扩展能力。

焦点分离上面则表现为可以将关注点分为功能需求和性能需求,然后分别进行开发和测试,从而实现系统复杂性的降低。

2、方便模块间组合、分解

在模块化开发中,组合和分解都很好理解,组合顾名思义就是指将不同的模块按照一定的方式组装起来,这样可以实现更为复杂的功能或场景,而分解反过来就是将一个复杂模块分解为若干个简单的子模块,以便更好地功能实现和维护。

3、方便单个模块功能调试、升级

当我们采用模块化开发后,很多的复杂功能成为单独的一个模块,如果对于某个模块需要进行功能的debug或者升级,那可以很快的针对这个功能模块开展,而不用牵一发而动全身。

4、多人协作互不干扰

这个非常好理解,由于模块化本身就是系统解耦方式实现的,分为多个模块化也就对应着多个代码包,这样一来相互协作不受影响也是提升效率的一种方式。

模块化开发的现状

模块化也是随着技术的发展不断的更新,例如目前受到众多开发者青睐的开发方式就包括依赖打包和依赖加载。

1、依赖加载

目前这种方式是应用较为广泛的,像 require js、sea.js等,除了编写规范不一样,实际都是通过相关require api把模块 chunk 文件拿回来,当加载完成之后再运行逻辑代码。

2、依赖打包

经典代表就 Webpack,其实就是写代码的时候分开模块,但打包的时候按依赖关系找到各个模块,最后打包到同一个文件上,并给每个chunk标识id,运行逻辑代码时将模块引用指向该id,从而实现模块化。

3、小程序

此外,随着微信、支付宝等App的实践,小程序容器技术 FinClip 也成为模块化的一种选择,他的原理其实就和前面模块化开发的模式一直,将复杂紧耦合的功能应用解耦为一个一个的小模块,但不同的是这些小模块的承载方式都换为了小程序,从开发和管理的角度来看更为简约一些。

如果以一个复杂的手机银行app为例,相当于应用小程序容器技术将臃肿的APP功能打散,功能模块互相解耦,每个业务功能都最小化、积木化、乐高化的小程序。



Tags:模块   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
MySQL 核心模块揭秘
server 层会创建一个 SAVEPOINT 对象,用于存放 savepoint 信息。binlog 会把 binlog offset 写入 server 层为它分配的一块 8 字节的内存里。 InnoDB 会维护自己的 savepoint...【详细内容】
2024-04-03  Search: 模块  点击:(5)  评论:(0)  加入收藏
MySQL 核心模块揭秘,你看明白了吗?
为了提升分配 undo 段的效率,事务提交过程中,InnoDB 会缓存一些 undo 段。只要同时满足两个条件,insert undo 段或 update undo 段就能被缓存。1. 关于缓存 undo 段为了提升分...【详细内容】
2024-03-27  Search: 模块  点击:(10)  评论:(0)  加入收藏
如何使用PHP SSH2模块执行远程Linux命令
PHP SSH2扩展是用于在PHP程序中使用SSH(安全壳协议)的一种扩展。它允许建立加密连接和执行远程命令、上传和下载文件等操作,十分方便实用。下面我将为大家详细介绍一下该扩展的...【详细内容】
2024-01-26  Search: 模块  点击:(99)  评论:(0)  加入收藏
光模块参数怎么看是千兆还是万兆
光模块的参数通常包括波长、传输速率、接口类型等。要判断光模块是否支持千兆或万兆传输,需要查看以下参数: 波长:千兆以太网(1000BASE-X)使用850nm波长的光纤传输,而万兆以太网(10...【详细内容】
2024-01-04  Search: 模块  点击:(58)  评论:(0)  加入收藏
如何为Electron应用开发原生模块
大家都知道JavaScript无论是在浏览器中运行、还是在Node.js中运行都是单线程运行的,所以并不适合在处理一些CPU密集型任务。但是Node.js允许开发者使用C、C++等语言开发像普...【详细内容】
2023-12-26  Search: 模块  点击:(80)  评论:(0)  加入收藏
数据持久化的利器,Python中的Pickle模块详解
Python数据序列化和反序列化时,pickle模块是一个非常有用的工具。它允许将Python对象转换为字节流,以便存储在文件中或通过网络传输,然后将这些字节流重新转换回Python对象。什...【详细内容】
2023-12-14  Search: 模块  点击:(177)  评论:(0)  加入收藏
优化仿射变换模块的算法以提高图像处理效果
在计算机视觉领域,图像处理是至关重要的一部分。然而,处理图像的过程中往往会遇到一些问题,如图像变形、失真等。这些问题主要是由于仿射变换模块的算法不够优化所导致的。那么...【详细内容】
2023-12-12  Search: 模块  点击:(116)  评论:(0)  加入收藏
如何使用 eel 模块创建 GUI 应用程序?
在Python中,有许多库和模块可以用来创建图形用户界面(GUI)应用程序。其中一个流行的选择是使用eel模块。eel是一个简单易用的Python库,它允许您使用HTML、CSS和JavaScript来构建...【详细内容】
2023-12-11  Search: 模块  点击:(152)  评论:(0)  加入收藏
多股涨停,光模块公司靠什么取胜?
作者:泰罗,编辑:小市妹12月8日,光模块板块向上突破。天孚通信、博创科技、源杰科技、中际旭创、太辰光、盛科通信、联特科技、新易盛、剑桥科技、华工科技等公司股价都在大幅上...【详细内容】
2023-12-08  Search: 模块  点击:(117)  评论:(0)  加入收藏
我常用的几个经典Python模块
Python常用的模块非常多,主要分为内置模块和第三方模块两大类,且不同模块应用场景不同又可以分为文本类、数据结构类、数学运算类、文件系统类、爬虫类、网络通讯类等多个类型...【详细内容】
2023-12-07  Search: 模块  点击:(176)  评论:(0)  加入收藏
▌简易百科推荐
20k级别前端是怎么使用LocalStorage的,想知道吗?
当咱们把咱们想缓存的东西,存在localStorage、sessionStorage中,在开发过程中,确实有利于咱们的开发,咱们想看的时候也是一目了然,点击Application就可以看到。前言大家好,我是林...【详细内容】
2024-03-26  前端之神  微信公众号  Tags:前端   点击:(11)  评论:(0)  加入收藏
前端不存在了?盲测64%的人更喜欢GPT-4V的设计,杨笛一等团队新作
3 月 9 日央视的一档节目上,百度创始人、董事长兼 CEO 李彦宏指出,以后不会存在「程序员」这种职业了,因为只要会说话,人人都会具备程序员的能力。「未来的编程语言只会剩下两种...【详细内容】
2024-03-11  机器之心Pro    Tags:前端   点击:(9)  评论:(0)  加入收藏
前端开始“锈化”?Vue团队开源JS打包工具:基于Rust、速度极快、尤雨溪主导
Vue 团队已正式开源Rolldown —— 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 开发的 Rollup 替代品,它提供与 Rollup 兼容的应用程序接口和插件接口...【详细内容】
2024-03-09  OSC开源社区    Tags:Vue   点击:(11)  评论:(0)  加入收藏
两年前端经验还不会手写Promise?
什么是promise?当我们处理异步操作时,我们经常需要进行一系列的操作,如请求数据、处理数据、渲染UI等。在过去,这些操作通常通过回调函数来处理,但是回调函数嵌套过多会导致代码...【详细内容】
2024-03-07  海燕技术栈  微信公众号  Tags:Promise   点击:(23)  评论:(0)  加入收藏
网站开发中的前端和后端开发有什么区别
前端开发和后端开发都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到。虽然前端开发和后端开发的工作有...【详细内容】
2024-02-21  CarryData    Tags:前端   点击:(31)  评论:(0)  加入收藏
网站程序开发中的前后端分离技术
随着互联网的快速发展和技术的不断创新,传统的网站开发模式已经难以满足日益增长的业务需求。为了提高开发效率、增强系统的可维护性和可扩展性,前后端分离技术逐渐成为了网站...【详细内容】
2024-01-31  网站建设派迪星航    Tags:前后端分离   点击:(23)  评论:(0)  加入收藏
如何优雅的实现前端国际化?
JavaScript 中每个常见问题都有许多成熟的解决方案。当然,国际化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 库可供选择,下面就来分享一些热门的前端国际化库!i18nexti18ne...【详细内容】
2024-01-17  前端充电宝  微信公众号  Tags:前端   点击:(68)  评论:(0)  加入收藏
Vue中Scope是怎么做样式隔离的?
scope样式隔离在 Vue 中,样式隔离是通过 scoped 特性实现的。当在一个组件的 <style> 标签上添加 scoped 特性时,Vue 会自动为这个样式块中的所有选择器添加一个唯一的属性,以...【详细内容】
2024-01-04  海燕技术栈  微信公众号  Tags:Vue   点击:(80)  评论:(0)  加入收藏
vue3中 ref和 reactive的区别 ?
最近有朋友在面试过程中经常被问到这么一个问题,vue3 中的ref 和 reactive的区别在哪里,为什么 要定义两个API 一个 api不能实现 响应式更新吗??带着这个疑问 ,我们 接下来进行逐...【详细内容】
2024-01-03  互联网高级架构师  今日头条  Tags:vue3   点击:(38)  评论:(0)  加入收藏
React18 与 Vue3 全方面对比
1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大;Vue 语法多,难度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】
2024-01-03  爱做梦的程序员  今日头条  Tags:Vue3   点击:(72)  评论:(0)  加入收藏
站内最新
站内热门
站内头条