组件优化的两三事（一）：动态注册组件

组件优化的两三事（一）：动态注册组件

最近在研究组件，现研究心得是组件最基本的优化是使它可以做到可延展性。
关于可延展性，我认为就是当一个组件已经做好，后期可以可以不断加功能，加功能的前提使不会影响前期功能，并且希望加功能所涉及的到问文件尽可能的少，最好做到我们只需要加上一个新的文件用来实现新功能，其他不做改动。

所以说，若要做到上述的要求，首先一个问题就是组件的注册。
新功能的组件若想加到已有组件中，必须要在已有组件中组册该新组件，但每次增加一个新功能组件就要注册一个的话，需要修改的文件数目就会增多，所以动态注册，是一个极好的办法。

动态注册

关于动态注册组件，其实在vue教程文档中已明细讲述：基础组件的自动化全局注册
下面是我的个人理解与使用：

优点：
1、自动注册组件，不需要一一添加
2、可规定组件的命名格式
3、全局动态注册可使所有组件可以使用

缺点：
1、只可用于全局注册
2、非组件范围内代码，每次项目引用需全局配置

使用：

需动态注册的组件目录：

配置的全局注册代码（配置在应用入口文件，如 main.js 中）：

// 获取目录下的所有文件，通过正则进行筛选
const requireComponent = require.context(
	// 其组件目录的相对路径
	'./page/selfTest/autoForm/formItem',
	// 是否查询其子目录
	false,
	// 匹配基础组件文件名的正则表达式
	/\w+\.(vue|js)$/
)

// 遍历所有符合要求的文件（拿到的是组件的相关路径）
requireComponent.keys().forEach(fileName => {
	// 获取组件配置
	const componentConfig = requireComponent(fileName)

	// 获取组件名，除去目录及文件后缀
	let str = fileName.split('./');
	const componentName = str[1].replace(/\.(vue|js)$/, '')

	// 全局注册组件
	Vue.component(
		componentName,
		// 如果这个组件选项是通过 `export default` 导出的，
		// 那么就会优先使用 `.default`，
		// 否则回退到使用模块的根。
		componentConfig.default || componentConfig
	)
})

大概就是上述这样了，使用的前提，我想应该把你的组件设计好，后续才可以更好的优化和扩展

我最希望的是可以把自动注册的代码放在租价内部，有方法的朋友，请多多指教
若上述理解或代码有问题，也请多多指教