标签：模块化 代码 js React 模块 组件 工程化 加载
目录
一、工程化
1、定义：使用软件工程的技术和方法来进行前端项目的开发、维护和管理。
2、详解：工程化是一种思想而不是某种技术，前端工程化就是把前端的项目当成一项软件工程进行分析、组织和构建，从而达到项目结构清晰、分工明确、开发效率提高的目的。
3、阶段：
- 技术选型
- 构建优化
- 模块化和组件化开发
4、内容：
- 代码规范: 所有团队成员必须根据相同的代码规范（团队公约）开发代码；
- 分支管理: 不同的开发人员开发不同的功能、组件或页面，最终合并到主干；
- 模块管理: 保证规范引用的模块可以正确的加入到最终编译好的包文件中；
- 自动化测试：用自动化的且可以回归的测试保证并进主干的代码达到质量标准；
- 构建：主干更新以后，自动将代码编译为最终的目标格式，并且准备好各种静态资源；
- 部署：将构建好的代码部署到生产环境。
二、模块与模块化
1、定义：模块：向外提供特定功能的js程序，比如注册登陆、搜索、评论等；
模块化：当应用的js都以模块来编写，这个应用就是一个模块化应用。
2、对模块化开发的理解：
一个模块是实现一个特定功能的一组方法。在最开始的时候，js 只实现一些简单的功能，
所以并没有模块的概念，但随着程序越来越复杂，代码的模块化开发变得越来越重要。
由于函数具有独立作用域的特点，最原始的写法是使用函数来作为模块，几个函数作为一个模块，但是这种方式容易造成全局变量的污染，并且模块间没有联系。
后面提出了对象写法，通过将函数作为一个对象的方法来实现，这样解决了直接使用函数作为模块的一些缺点，但是这种办法会暴露所有的所有的模块成员，外部代码可以修改内部属性的值。
现在最常用的是立即执行函数的写法，通过利用闭包来实现模块私有作用域的建立，同时不会对全局作用域造成污染。
3、优点：
- 提高维护性
- 提高代码复用率
- 方便依赖关系的管理
- 可以避免变量污染，命名冲突
4、模块化规范：
Common JS规范：
它通过 require 来引入模块，通过 module.exports 定义模块的输出接口。这种是服务器端的解决方案，它是以同步的方式来引入模块的，因为在服务端文件都存储在本地磁盘，所以读取非常快，所以以同步的方式加载没有问题。但如果是在浏览器端，由于模块的加载是使用网络请求，因此使用异步加载的方式更加合适。
AMD规范：（依赖前置）
这种方案采用异步加载的方式来加载模块，模块的加载不影响后面语句的执行，所有依赖这个模块的语句都定义在一个回调函数里，等到加载完成后再执行回调函数。require.js 实现了 AMD 规范。
CMD规范：（就近依赖）
这种方案和 AMD 方案都是为了解决异步模块加载的问题，sea.js 实现了 CMD 规范。它和require.js的区别在于模块定义时对依赖的处理不同和对依赖模块的执行时机的处理不同。
第四种规范是 ES6 提出的，使用 import 和 export 的形式来导入导出模块。
三、组件与组件化
定义：组件：用来实现局部功能效果的代码和资源的集合；
组件化：当应用是以多个组件的方式实现，这个应用就是一个组件化的应用。
优点：
- 组件具有独立性，因此组件与组件之间可以自由组合
- 页面是组件的容器，负责组合组件形成功能完整的界面
- 当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换
标签：模块化,代码,js,React,模块,组件,工程化,加载 来源： https://blog.csdn.net/m0_63021947/article/details/121268814
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。