组件化

前端工程化-组件化

问题：随着前端的发展，前端项目需要处理的业务逻辑越来越多，项目越来越复杂，代码量越来越大，随之带来的是代码难以阅读、维护成本大、耦合度高、代码冗余等问题，这些问题也成了前端开发人员不得重视和需要去解决的问题。

解决：为了解决上面提到的问题，前端提出了项目工程化的思想。结合各大官网及百家思想对前端工程化的定义，我个人的理解是，前端工程化就像是以一种大家都认可的规范方式对前端项目开发的各个阶段进行建议性标准化约束。

####前端工程化主要可以分为： #####模块化 #####组件化 #####规范化 #####自动化本文主要记录组件化：组件化的定义：从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。

理解：简单来说，组件就是将一段UI样式和其对应的功能作为独立的整体去看待，无论这个整体放在哪里去使用，它都具有一样的功能和样式，从而实现复用，这种整体化的细想就是组件化。不难看出，组件化设计就是为了增加复用性，灵活性，提高系统设计，从而提高开发效率。

#####注意点：

1、组件化能够将复杂的ui页面按模块或其他规则进行拆分，拆分后的组件同样能够再次拆分，使用时按依赖组装在一起。从而降低代码复杂、耦合度，代码可读性也更高。

2、在项目中经常出现相同的部分，可以进行提取相同代码封装成组件，以便复用，减少不必要的重复代码，提高开发效率。

3、组件化不同于模块化，组件化是在设计层面上，对UI（用户界面）的拆分，是包含样式和逻辑的，所以在组件化项目时需要处理好组件的兄弟传值、父子传值，公用组件中方法的公共性等问题。

还有其他注意点，需要在实际项目开发中处理..

####组件化带来的优势

降低代码复杂程度，使单文件的节点结构更加清晰，提高代码可读性和降低维护成本。
抽离相同代码形成组件可以在项目中多次复用，减少代码量，提高开发效率。
业务逻辑、组件状态方面更加独立化，降低耦合度和全局污染。 ...等等

实例：

场景：项目中顶部导航条、底部样式，在多个页面中都有重复使用且相同程度高，这时就可以将其抽离出来作为组件实现复用。以vue为例

<template>
	<!--头部导航栏-->
		<view class="head">
			<image src="/static/img/home_titleBg.png" mode=""></image>
			<view class="left">
				<view class="city">
					成都市
				</view>
				<view class="action_row_down">
					<image src="/static/img/arrow_down_arrow.png" mode=""></image>
				</view>
			</view>
			<view class="center">
				<image src="/static/img/home_dajx.png" mode=""></image>
			</view>
			<view class="right">
				<image src="/static/img/notice2x.png" mode=""></image>
			</view>
		</view>
	<script>
	export default {
		data() {
			return {};
		}
	}
</script>
<style lang="less">
</style>
</template>

这就是一个项目内的组件，在项目的其他页面需要用的地方都可以进行引入使用

使用方式：两种

第一种是将公用组件注册为全局组件，注册后即可在直接使用
第二种方式是在需要使用的页面中通过import 引入，在component:{} 中声名name后在template中就能使用了，如<Head></Head>,可以像其他标签一样添加属性向子组件传值。

另外如果在工作中有经常使用的组件也可以将这些组件放在github上，方便接下来项目中使用。

这里主要讲到的都是项目中的ui组件化，在组件使用中同样可以分割业务逻辑代码。

以上为个人理解，不足处欢迎补充。