前端的工程化、模块化和组件化

2023-11-20

什么是工程化

工程化是一种思想而不是某种特定的技术,当然我们在实现项目工程化的过程中,我们也会去使用一些技术。前端工程化是使用软件工程的技术和方法来对前端的开发流程、技术、工具等进行规范化、标准化,其主要目的为了提高效率和降低成本,即提高开发过程中的开发效率,减少不必要的重复工作时间。

目前,web业务日益复杂化和多元化,单页面应用和webApp风靡。而且前端的生态圈繁荣,各种框架,组件出现,使得前端发展迅速,快速开发已经成为了前端的一个标准。靠传统的前端三剑客 JavaScript、HTML、 CSS 以及传统的项目结构已经不能满足日益壮大的大型应用的需求,会带来开发效率、维护成本、代码可读性差等问题。这就要求我们以工程化的思想去看待一个前端项目而不再是直接撸起袖子开写页面,将前端项目当成一项系统工程去进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开发效率和开发质量提高以及降低项目生产风险的目的。
 

如何工程化

页面组件化
代码模块化
代码质量管理 (QA): ESLint
代码编译: babel、less、sass、scss等
代码构建:webpack
项目国际化
代码版本管理:Git、SVN

什么是模块化

当应用的JS都以模块来编写时, 这个应用就是一个模块化的应用;

向外提供特定功能的文件, 可以做到按需引入,这就是模块化。

为何要模块化

随着业务逻辑增加,代码越来越多且复杂

模块化作用

复用代码, 简化代码的编写, 提高代码运行效率

什么是组件

从UI上拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元,是一个用来实现局部功能效果的代码和资源的集合

为什么要组件化?

一个界面的功能复杂时,组件化抽取,易维护易扩展。易复用。

组件化作用?

复用编码, 简化项目编码, 提高运行效率

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端的工程化、模块化和组件化 的相关文章

  • 使用 vscode 调试器调试 next.js

    我已经使用安装了一个项目创建下一个应用程序 https github com segmentio create next app 我需要使用我的编辑器 vscode 调试服务器端渲染 所以我访问过vscode recipes 如何调试 ne
  • 关闭选项卡时要求确认[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 当我在某些浏览器上关闭页面时 我希望出现一个消息框 并询问我是否真的要关闭页面 有两个按钮 如果我单击No那么这个标签就不会被关闭 我怎样
  • 如何测试 javascript 闭包内的函数

    这似乎是不可能的 也可能是 但我正在尝试更多的 TDD 但我总是在闭包方面碰壁 假设我有以下内容 function createSomething init function privateMethod param return init
  • React js Stripe 结账不起作用

    我正在尝试在 React js 应用程序中呈现条带结账默认表单
  • 在 Vue.js 中从父组件执行子方法

    目前 我有一个 Vue js 组件 其中包含其他组件的列表 我知道使用 vue 的常见方式是将数据传递给孩子 并从孩子向父母发出事件 但是 在这种情况下 我想在子组件中的按钮出现时执行子组件中的方法 parent被点击 哪种方法最好 一种建
  • 我想检查 $('#td1').text() === "x" 是否?

    我想检查innerHtml是否有X或O 所以我不能再次添加任何其他东西 但它不起作用 添加检查代码后它就停止了 我在这里尝试做一个简单的XO游戏来更熟悉javascript和jquery 我也不确定是否可以用 jQuery 做到这一点
  • Google App Engine:修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • 音频 blob 的 URL.createObjectURL 在 Firefox 中给出 TypeError

    我正在尝试从创建的音频 blob 创建对象 URLgetUserMedia 该代码在 Chrome 中可以运行 但在 Firefox 中存在问题 错误 当我打电话时stopAudioRecorder 它停在audio player src
  • Jquery/Javascript 上传和下载文件,无需后端

    是否可以在没有后端服务器的情况下在 JavaScript 函数中下载和上传文件 我需要导出和导入由 JavaScript 函数生成的 XML 我想创建按钮 保存 xml 来保存文件 但我不知道是否可行 另一方面 我希望将 XML 文件直接上
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • Babel 7 Jest Core JS“TypeError:wks不是函数”

    将我的项目升级到 Babel 7 后 通过 Jest 运行测试会抛出以下错误 测试在 Babel 6 中运行没有任何问题 但在 Babel 7 中失败并出现以下错误 TypeError wks is not a function at Ob
  • Firefox 书签探索未超过 Javascript 的第一级

    我已经编写了一些代码来探索我的 Firefox 书签 但我只获得了第一级书签 即我没有获得文件夹中的链接 e g 搜索引擎 雅虎网站 谷歌网站 在此示例中 我只能访问 Search engines 和 google com 不能访问 yah
  • Grails 在 javascript 内的 GSP 站点中使用 grails var

    我有一个在 GSP 文件中的 javascript 代码中使用 grails 变量值的问题 例如 我有一个会话值session getAttribute selectedValue 我想在 javascript 代码部分使用这个值 我现在的
  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构
  • 在 React.js 中编辑丰富的数据结构

    我正在尝试为数据结构创建一个简单的基于网格的编辑器 但我在使用 React js 时遇到了一些概念问题 他们的文档对此没有太大帮助 所以我希望这里有人可以提供帮助 首先 将状态从外部组件传输到内部组件的正确方法是什么 是否有可能将内部组件中
  • 导致回发到与弹出窗口不同的页面

    我有一个主页和一个详细信息页面 详细信息页面是从主页调用的 JavaScript 弹出窗口 当单击详细信息页面上的 保存 按钮时 我希望主页 刷新 是否有一种方法可以调用主页的回发 同时还可以从详细信息页面维护保存回发 Edit 使用win

随机推荐

  • 关于Redis的事件回调解析以及docker中的配置

    基本概念 Redis的过期回调可以实现我们的redsi的key在过期的时候回调一些接口从而来实现项目中需要的一些功能 比如我们想在订单超时的时候进行关闭 可以用这个来进行一个简单的实现 当然实际的项目中能否这样使用我们暂且不做讨论 这里只是
  • word添加字体库

    1001 Fonts Free Fonts Baby 51044 free fonts in 28637 families Free licenses for commercial use Direct font downloads Mac
  • 一个数组有 N 个元素,求连续子数组的最大和(动态规划问题)

    该题题目如上 例如 1 2 1 连续的最大子数组为 2 1 和为3 题目要求我们输入第一个数为数组元素的个数 然后后面为我们需要输入的元素 遇到这一个题 我们首先可以这样考虑 设置一个sum和result sum是用来每次加新的元素 res
  • Angular-1.5.8文档翻译之$compile

    对照地址 https code angularjs org 1 5 8 docs api ng service compile compile是将一个DOM字符串或者一个DOM进行编译并返回一个模板链接函数 这个链接函数可以用于将scope
  • Google 在 ChatGPT 时代的生死之战:居然把 DeepMind 和 Google Brain 合并了

    今天一大早 6 点起来 居然看到 Google 将 DeepMind 和 Google Brain 合并为 Google DeepMind 了 Google and Alphabet CEO Sundar Pichai DeepMind 创
  • 计算机基础之组成原理

    计算机组成原理 一 计算机的基本硬件组成 CPU 内存 主板 I O 设备 显卡 二 计算机如何执行指令 计算机指令 CPU如何执行指令 CPU 内部处理过程 CPU 的寄存器 程序计数器 条件分支和循环机制 CPU 指令执行过程 内存 内
  • 编译micropython中的mpycross

    root charles VirtualBox media sf Linux micropython master make C mpy cross make Entering directory media sf Linux microp
  • MySQL——基础50题

    MySql数据库50题 准备工作 参考答案 use PraticeSql create table SC SId varchar 10 CId varchar 10 score decimal 18 1 insert into SC val
  • Freertos 在contexM0芯片上的移植

    1 freertos源码 官网下载地址 https www freertos org 下载LTS长期支持版本 2 在工程目录下新建FreeRTOS文件夹 将FreeRTOS 的源码添加到这个文件夹中 portable 文件夹中只需要复制 k
  • shared_ptr使用场景、陷阱、性能分析,使用建议

    1 std shared ptr使用场景 include
  • 【leetcode】1.两数之和

    力扣原题传送门 https leetcode cn problems two sum 目录 题解 代码链接 题解 class Solution public vector
  • 隐藏通知内容什么意思_原来华为手机隐藏5个技巧,难怪别人都说华为好用,涨知识了...

    阅读本文前 请您先点击上面
  • Kinect开发学习笔记之(追加)深度距离误差分析

    由于最近要研究kinect采集到的深度信息的一些统计特征 所以必须先对kinect深度信息做进一步的了解 这些了解包括kinect的深度值精度 深度值的具体代表的距离是指哪个距离以及kinect深度和颜色扫描范围等 经过查找资料可以解决这些
  • 开启电脑ssl协议的方法

    转自 微点阅读 https www weidianyuedu com 电脑ssl协议怎么开启 开启ssl协议的方法是什么 经近期实际操作了解到开启ssl协议一共需要6个步骤 很快即可完成 以下是开启电脑ssl协议的方法介绍 1 首先打开浏览
  • html src 参数,HTTP参数解析

    本文概述 在本节中 我们将讨论各种HTTP参数及其语法 例如 日期和时间格式 字符集等 这些参数用于在编写客户端或服务器的HTTP程序时构造请求和响应消息 HTTP的各种参数如下 HTTP版本 为了指示协议的版本 HTTP使用 编号方案 协
  • 办公网络上网行为管理规划

    办公网络上网行为管理规划是确保办公网络资源的合理利用和保障网络安全的重要措施 下面是办公网络上网行为管理规划的一般性步骤和原则 确立政策和准则 制定明确的上网行为管理政策和准则 明确员工在办公网络上的合规要求和行为规范 包括规定员工上网内容
  • 项目设计:基于YOLO目标检测算法的安全帽/口罩/汽车/行人/交通标志...检测

    本文将详细介绍YOLO目标检测算法 该算法支持各种目标检测 包括 安全帽 汽车 造价 交通标志 等 其他毕业设计题目推荐参考 毕业设计 电子 通信 计算机 物联网专业毕业设计选题参考 嵌入式linux 单片机STM32 web 图像 htt
  • 数据库难点知识

    索引 当表中有大量记录时 若要对表进行查询 第一种搜索信息方式是全表搜索 是将所有记录一一取出 和查询条件进行一一对比 然后返回满足条件的记录 这样做会消耗大量数据库系统时间 并造成大量磁盘I O操作 第二种就是在表中建立索引 然后在索引中
  • matlab通用操作界面窗口包括哪些,matlab作业题

    第一章 MATLAB环境 1 MATLAB通用操作界面窗口包括哪些 命令窗口 历史命令窗口 当前目录窗口 工作空间窗口各有哪些功能 答 MATLAB通用操作界面窗口包括 命令窗口 历史命令窗口 当前目录浏览器窗口 工作空间窗口 变量编辑器窗
  • 前端的工程化、模块化和组件化

    什么是工程化 工程化是一种思想而不是某种特定的技术 当然我们在实现项目工程化的过程中 我们也会去使用一些技术 前端工程化是使用软件工程的技术和方法来对前端的开发流程 技术 工具等进行规范化 标准化 其主要目的为了提高效率和降低成本 即提高开