组件化和模块化的区别|学习笔记

简介: 快速学习组件化和模块化的区别

开发者学堂课程【Vue.js 入门与实战组件化和模块化的区别】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8173


组件化和模块化的区别


内容介绍:

一、 组件的定义

二、 组件化和模块化的不同

 

一、组件的定义:

组建的出现就是为了拆分 vue 实例的代码量的,能够让我们以不同的组件来划分不同的功能模块,将来我们需要什么样的功能就可以去调用对应的组件即可。

 

二、组件化和模块化的不同:

1.模块化:

是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一。

2.组件化:

是从 UI 界面的角度进行划分的;前端的组件化,方便 UI 组件的重用。

如 none 这一代码就是利用模块化

3. 举例:

比如说百度首页,点开之后,每一个小图标都有一个 titled,有一个关闭按钮。每一个小对象,都有相映的图标,我们只需要把唯一的一个组件把标题,把图标放进来,我们就可以渲染对应的一个小方块,这就是组件化。后面的搜索框也是一个组件,这就是我们从 UI 的角度,分成几个小部分。

相关文章
|
9天前
|
前端开发 JavaScript 物联网
组件化设计适用于哪些场景
【10月更文挑战第22天】组件化设计适用于哪些场景
|
9天前
|
前端开发 JavaScript UED
什么是组件化设计
【10月更文挑战第22天】什么是组件化设计
|
26天前
|
前端开发 JavaScript 开发者
深入解析前端开发中的模块化与组件化实践
【10月更文挑战第5天】深入解析前端开发中的模块化与组件化实践
22 1
|
3月前
|
前端开发 UED
组件化的好处是什么
【8月更文挑战第13天】组件化的好处是什么
81 1
|
6月前
|
资源调度 前端开发 JavaScript
构建高效前端项目:模块化与组件化的最佳实践
【2月更文挑战第13天】在现代前端开发的浪潮中,模块化和组件化已经成为提升项目可维护性和开发效率的核心原则。本文深入探讨了如何通过合理的模块划分、组件设计以及工具选择来优化前端项目结构,同时确保代码的复用性和可测试性。我们将从理论出发,结合实例分析,为前端开发者提供一套行之有效的最佳实践指南。
306 0
|
6月前
|
JavaScript 前端开发
面试题:组件化和模块化的理解
面试题:组件化和模块化的理解
64 0
|
6月前
|
存储 JavaScript 前端开发
第四章 模块和组件、模块化和组件化的理解
第四章 模块和组件、模块化和组件化的理解
|
小程序 开发者
小程序组件化开发
随着小程序的普及,越来越多的开发者开始使用小程序进行开发,而小程序的组件化开发已经成为了一种标配的开发模式。本文将深入介绍小程序组件化开发的相关知识,包括组件的定义、生命周期、通信和使用等方面,帮助大家更好地理解和使用小程序的组件化开发模式。组件是小程序中的一个重要概念,它能够将页面分解成独立的、可复用的部分,以便于开发和维护,组件可以包含一些特定的功能和样式,同时也能够接受外部的数据和事件。在小程序中,组件是通过Component构造函数来定义的。propertiesdata和methods。
141 0
|
开发框架 JavaScript 前端开发
前端工程化中重要概念之组件化开发框架
前端工程化中的组件化开发框架是一种重要的开发方式,它可以大幅提高前端开发效率和代码质量。本篇文章将介绍组件化开发框架的基本概念、原理和应用。
251 0
|
前端开发 JavaScript 持续交付
谈谈对前端组件化,模块化,工程化的理解
谈谈对前端组件化,模块化,工程化的理解
28616 5
谈谈对前端组件化,模块化,工程化的理解