組件優化的兩三事（一）：動態註冊組件

組件優化的兩三事（一）：動態註冊組件

最近在研究組件，現研究心得是組件最基本的優化是使它可以做到可延展性。
關於可延展性，我認爲就是當一個組件已經做好，後期可以可以不斷加功能，加功能的前提使不會影響前期功能，並且希望加功能所涉及的到問文件儘可能的少，最好做到我們只需要加上一個新的文件用來實現新功能，其他不做改動。

所以說，若要做到上述的要求，首先一個問題就是組件的註冊。
新功能的組件若想加到已有組件中，必須要在已有組件中組冊該新組件，但每次增加一個新功能組件就要註冊一個的話，需要修改的文件數目就會增多，所以動態註冊，是一個極好的辦法。

動態註冊

關於動態註冊組件，其實在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
	)
})

大概就是上述這樣了，使用的前提，我想應該把你的組件設計好，後續纔可以更好的優化和擴展

我最希望的是可以把自動註冊的代碼放在租價內部，有方法的朋友，請多多指教
若上述理解或代碼有問題，也請多多指教