模块化开发简述

article/2025/10/22 10:05:21

模块化开发简述

都说模块化开发为前端发展带来了巨大的进步,然而不熟悉的人看着也是两眼一懵,那其实这到底是什么?好处在哪?我来说说自己的见解吧。
这里写图片描述
1. 模块化和传统开发的区别
实话讲,其实在我看来,两者的开发是一样的,除了方式不一样,达到的效果并没两样。
看着扯淡,但实际可以想一下,现流行的模块化开发主要有两种方式:

  • 依赖加载。这种方式是最广泛的,像requirejs,sea.js等,除了 编写规范 不一样,实际都是通过相关require api把模块chunk文件拿回来,当加载完成之后再运行逻辑代码。
  • 依赖打包。经典代表就是webpack,其实就是写代码的时候分开模块,但打包的时候按依赖关系找到各个模块,最后打包到同一个文件上,并给每个chunk标识id,运行逻辑代码时将模块引用指向该id,从而实现模块化。

而传统的开发方式是在页面上通过脚本标签引入,等所有脚本资源加载完成后再运行逻辑代码。这样一对比,是不是发现效果其实是一样的,我把不同脚本分开写,也是可以做到类似模块化的效果?

那么重点来了,模块化的优势在哪?

别急着回答,先思考一下,然后带着你的想法继续看下去。

这里写图片描述

先回想一下,传统开发的痛点在哪。

首先,如上所述,传统的开发方式需要等待所有脚本资源加载完成。这个问题最大的弊端就是页面要等待,因为资源加载是同步的。你的页面会出现短暂的空白期,引入的脚本越多,时间越长,如果某一脚本加载失败,也可能直接挂掉。

模块化的代码则可以很好的处理这个问题。除了模块化支持的脚本必须加载进来以外,其他脚本都可以异步请求,不需要页面等待,可以加速渲染出页面。requirejs,sea.js等也会做好加载重试和模块缓存的处理,确保所有模块运行良好。

所有资源加载的时间不会因为模块化而加速,但是模块化能加速渲染,这是优势1

当然webpack是特例,它和nodejs一样用 commonjs 规范,为了达到目的,全部脚本打包到一起再运行,看着和上面观点相悖,不过现在带宽足够,相对而言还是足够快的,也能减少多脚本加载出错的风险。


接着上面的观点讲,抛开带宽速度来讲,既然网速够快,那模块化还有什么?不妨回想一下,传统开发时最烦的是什么?无非3点

  • 命名空间。早期为了避免命名冲突,大众做法是用一个变量作为命名空间做隔离,长期开发过程中没人能记住这个变量是否冲突,它的命名规范是什么,治标不治本。
    而模块化的出现消除了这点。一个模块内的命名随自己起,和外界不会冲突,对外的永远是你exports出来的内容。如果模块内出现命名冲突,这说明了你的命名水平太低…..
    这里写图片描述
    好吧,是模块颗粒不够小,还可以继续分割出模块~

  • 代码重用。其实这点和传统开发并无两样,都是把可复用代码抽取出function(再通用点会抽象出类,也就是构造函数),独立文件。但模块化的好处同样可以规避命名空间的问题,不必设置变量污染到全局。一般模块化都有缓存机制,在二次调用时无需再解析,直接获取到缓存模块内容。

  • 懒~ 这里写图片描述
    按传统开发来处理,忽略以上问题,但也耐不住文件太多,引入和管理麻烦。除了amd规范需要依赖前置,我们还可以用cmd规范来写模块依赖,想用什么require什么,不用再一个个引入js,看着也舒服。而且现在的模块化工具基本都实现了多规范混搭,想怎么写就怎么写,只要注意组内规范就行。



此外就是 管理问题

小公司或个人开发,模块化能让自己思路更为清晰,降低代码耦合,优秀的模块能带来代码质量质的飞跃,标准的模块应该是 “分工明细,职责单一,不牵扯需求逻辑” ,它就应该是个万能的螺丝,不需要可以修改,哪里需要用哪里。

而中型企业和大团队则很经常会遇到团队协作开发,除了会用svn/git等工具管理,各种需求有不同的人负责处理。模块化对团队开发会起到协同作用,公共模块除了避免重复造轮子的痛苦外,也避免了逻辑混淆。



好了,大概就上面这些,我现阶段的水平限制了我的眼界和理解,后面有不一样的看法时再修正补充吧。
这里写图片描述


http://chatgpt.dhexx.cn/article/LNa7xjn0.shtml

相关文章

什么是模块化?模块化怎么实现?

什么是模块化?模块化怎么实现? 前言 : 增加印象,留下脚印 ,忘记还可以翻一翻 奥利给。 1,什么是模块化 公司里一个项目是有很多程序员一起开发的,例如 “多人运动” 这个项目 有程序员a &…

vue 模块化开发

1、npm install webpack -g 全局安装 webpack 2、npm install -g vue/cli-init 全局安装 vue 脚手架 3、初始化 vue 项目; vue init webpack appname:vue 脚手架使用 webpack 模板初始化一个 appname 项目 4、启动 vue 项目; 项目的 p…

Android模块化开发

模块化开发项目搭建 1.为什么要模块化开发 随着APP版本不断的迭代,新功能的不断增加,业务也会变的越来越复杂,APP业务模块的数量有可能还会继续增加,而且每个模块的代码也变的越来越多,这样发展下去单一工程下的APP架…

vue模块化开发

1.前端代码化雏形和CommonJS JavaScript原始功能 在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或者动画实现,代码量比较少,只要写在script标签里面就可以了 随着ajax异步请求的出现,慢慢形成了前…

模块化编程

1.一般编程方式:所有函数放在“.c”文件里。 (缺点:若使用的模块功能比较多, 则一个文件内会有很多的代码, 不…

一次跟你说清楚,什么是组件化开发?什么是模块化开发?

网上有许多讲组件化开发、模块化开发的文章,但大家一般都是将这两个概念混为一谈的,并没有加以区分。而且实际上许多人对于组件、模块的区别也不甚明了,甚至于许多博客文章专门解说这几个概念都有些谬误。 想分清这两个概念我觉得结合一下软件…

前端模块化开发

前端模块化开发 什么是模块化? 模块化是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说,模块是可组合、分解和更换的单元 编程领域中的模块化,就是遵守固定的规则,把一个大文件拆成…

模块化开发

模块化开发 1. 模块化开发最终的目的是将程序划分成 一个个小的结构 。 2. 这个结构中编写属于 自己的逻辑代码 ,有 自己的作用域 ,定义变量名词时不会影响到其他的结构。 3. 这个结构可以将自己希望暴露的 变量、函数、对象等导出 给其结构使用&#xf…

HttpClient CloseableHttpClient GetMethod PostMethod http

pom依赖 <!--HttpClient的依赖--><dependency><groupId>commons-httpclient</groupId><artifactId>commons-httpclient</artifactId><version>3.1</version></dependency><!--CloseableHttpClient的依赖--><de…

JAVA小工具-05-HttpClient/PostMethod上传文件(解决中文文件名乱码问题)

言于头:本节讨论的是在项目中利用HttpClient/PostMethod相关api进行上传文件操作时&#xff0c;会出现上传中文文件名乱码问题。为解决这个问题&#xff0c;下面是总结的一个HTTP工具类以及测试用例。 public class HttpUtils {public static final String UTF_8 "UTF-8&…

解决PostMethod的中文乱码

解决HttpClient的PostMethod的中文乱码问题 问题场景&#xff1a; 解决代码&#xff1a; 请求时设定编码格式&#xff1a; post.getParams().setParameter(HttpMethodParams.HTTP_CONTENT_CHARSET, "utf-8"); 完整代码&#xff1a; /*** 封装请求参数&#xff0…

php 取整,PHP取整的方法有哪些

本篇文章主要给大家介绍PHP取整的四种方法。 PHP实现取整的问题&#xff0c;不仅在我们学习PHP过程中会遇到&#xff0c;在我们PHP面试过程中也是常见的考点之一。 下面我们结合简单的示例给大家总结介绍PHP取整的四种方法。 第一种方法&#xff1a;直接取整&#xff0c;舍弃小…

php 如何取整,解析php取整的几种方式

解析php取整的几种方式 floor 舍去法取整 语法格式:float floor ( float value )返回不大于value 的下一个整数&#xff0c;将value 的小数部分舍去取整。floor() 返回的类型仍然是float&#xff0c;因为float 值的范围通常比integer 要大。 echo floor(4.3); // 4 echo floo…

VUE 数据分页

只要涉及到数据查询&#xff0c;通常我们都会进行分页查询。 假设你的表中有上百万条记录&#xff0c;不分页的话&#xff0c;我们不可能一次性将所有数据全部都载入到前端吧&#xff0c;那前后端都早就崩溃了。 结合 Spring Spring 和 Vue 都提供了开箱即用的分页功能。 S…

前端Vue分页及后端PageHelper分页综合运用

分页显示数据对项目开发中尤为重要&#xff0c;同时能提升用户体验&#xff0c;下面的前端css、js是我引用这篇文章的《使用Vue开发一个分页插件》&#xff0c;我在这个的基础上结合了后端稍微完善了一下&#xff0c;修改了disable的样式&#xff0c;在里面加了pointer-events:…

antd design vue分页组件

我们在使用分页组件的时候可以有两种方法&#xff1a; 第一种是直接用表格()的自定义:pagination属性最方便&#xff1b;如下图所示&#xff1a; 第二种是分页组件 这里我总结的是第二种方法的使用&#xff0c;由于是 Ant Design Vue 的组件&#xff0c;所以必须安装Ant Desig…

Vue分页页码栏设计

Vue分页页码栏设计 效果展示HTML数据需要函数需要运用 效果展示 HTML <div class"page_bar no-select"><ul class"clearfix"><li class"iconfont":class"{vh : currentPage 1}"click"subCurrentPage">&…

超级详细:一个漂亮的Vue分页器组件的实现

整篇分两个部分&#xff1a; 思路部分&#xff1a;讲解怎么实现分页器组件【大把时间看-建议】 后面部分&#xff1a;按照步骤&#xff0c;直接引入组件【没有时间看-建议】 思路&#xff1a;基于连续页码进行判断 需要添加分页器的组件&#xff08;Search组件&#xff09;中…

vue实现分页vue分页查询怎么实现

效果图&#xff1a; 代码&#xff1a; 复制过去即可运行 <!DOCTYPE html> <html lang"en" xmlns:th"http://www.w3.org/1999/xhtml"> <head><meta charset"UTF-8"><title>Title</title><!-- <scrip…

vue分页单位设置为中文格式

根据我搭建前端项目时遇到的问题做一个记录&#xff0c;我下载了一个vue-element-admin前端项目demo&#xff0c;但是默认情况下此demo分页展示时为如下图所示&#xff1a; 遇到此种情况想要调整为中文显示时&#xff0c;如下中文显示案例&#xff1a; 此时需要修改demo项目中…