Всем привет, я ваш старый незадачливый вангли.В последнее время объем проектов становится все больше и больше, и архитектура проекта стала очень плохой. Централизация жесткая, а модульность непонятная, что делает последующую разработку очень запутанной. Написал в статье послать себе электричество о концепции централизации. А еще я заметил, что некоторые фронтенды работают год, а они даже не знают об этом больше года.
中心化,а также去中心化Концепция чего-либо. Эта ситуация очень плохая.Если у вас нет хорошего понимания проекта в начале, то проект будет становиться все более и более хаотичным по мере развития проекта.
Эта статья больше теоретическая, если она поможет вам после прочтения. Пожалуйста, поставьте лайк.
Централизованное и децентрализованное
Так называемый центральный диалект легко понять, на самом деле он основан наXв центреXдела идут быстроXТело собирается, давайте используем ручную карту, чтобы описать, как выглядит централизация. Как видно из рисунка,XПо центру расходятся очень плотные узлы.
в то время как децентрализованная структура похожа на спроектированнуюmoduleсхема, в виде субмолекулXРасходящиеся узлы классифицируются. Так же, как бифуркационная диаграмма ниже. Как видите, узлы планируются через главный узел.
Структура проекта Vue
Я использовал свои собственные навыки рисования, чтобы нарисовать относительно грубую композицию проекта Vue, и нарисовал только некоторые часто используемые структуры.
В проекте Vue он объявлен в виде компонентов, и страница разбита на компоненты. Загрузка производится в виде маршрута. В этих структурах возникнут проблемы централизации с аккумулированием бизнеса. Усложняет поддержку стека кода. Компоненты и модули маршрутизации легче всего генерировать централизацию. Конечно, Mock, API и Vuex легко могут стать централизованными, если не уделять внимание управлению.
Как лучше управлять проектами и децентрализовать?
Теперь, когда есть проблема, ее нужно решить. И лучший способ решить проблему去中心模块化. Давайте посмотрим, как выглядит неисправный модуль централизованной маршрутизации.
Вроде бы ничего страшного, но проблема в том, что на нашей странице есть как минимум
40+, то модель будет выглядеть так же, как централизованный граф, плотный и очень плохой. Отрисовка этой модели в страницу заключается в том, чтобы прописать все объявления роутинга в js файле, а потом то ли добавить, то ли удалить роут, найти очень хлопотно. Поэтому нам нужно децентрализовать модуль проекта. Достижение многоузловой многоотраслевой структуры.
Децентрализованная маршрутизация
Проблема централизации маршрутизации упоминалась выше, поэтому давайте решим ее здесь. Фактически для таких методов прописывается объявление файла. в вебпакеrequire.contextОчень хорошее решение этой проблемы.
официальный дляrequire.contextописание:Нажмите, чтобы перейти
пройти черезrequire.contextИмпорт анализа папок. Экспортированный контент сращивается и, наконец, монтируется в экземпляр маршрутизации. Итак, сначала создайте два тестовых файла маршрутизации.пройти через
require.contextДавайте посмотрим на файлы, которые мы импортировали.
const routerFiles: __WebpackModuleApi.RequireContext = require.context('./module', true, /\.ts$/)
console.log(routerFiles.keys())
Получите контекст импортированного файла, затем попытайтесь получить значение по умолчанию.exportМожно ли получить маршрут, как показано ниже. Получаем экспорт первого ts файла.
const routerFiles: __WebpackModuleApi.RequireContext = require.context('./module', true, /\.ts$/)
console.log(routerFiles.keys())
console.log(routerFiles(routerFiles.keys()[0]).default)
Так как вы можете получить его. Затем нам нужно только получить все содержимое файла для сплайсинга, чтобы получить полный список маршрутизации. Как показано на рисунке ниже, список маршрутизации был сгенерирован.
import { RouteConfig } from 'vue-router'
const routerFiles: __WebpackModuleApi.RequireContext = require.context('./module', true, /\.ts$/)
const routerList: RouteConfig[] = []
routerFiles.keys().forEach((fileName:string) => {
if (routerFiles(fileName).default instanceof Array) {
routerList.concat(routerFiles(fileName).default)
} else {
routerList.push(routerFiles(fileName).default)
}
})
console.log(routerList)
С помощью приведенного выше кода нам нужно только объявить файл маршрутизации в папке и экспортироватьRouteConfigОбъект может управлять таблицей маршрутизации. Когда маршрут необходимо изменить. Просто измените файловый объект, соответствующий маршруту.
Это очень простая децентрализация маршрутизации. Не много кода, легко понять. На самом деле, для управления маршрутизацией меня привлекает обычная маршрутизация Nuxt. Я также исправляю эту вещь, (●'◡'●).
Модульный Vuex
Плохой Vuex — этоstate, mutations, actions,gettersпишем вместе. Это выглядит очень грязно. Тогда это очень недружелюбно к управлению глобальными переменными. Часто происходит смешение переменных. Плохо для управления. правильноstateа такжеactionsРоль недоразумения. Когда содержание Vuex увеличивается, постепенно возникает проблема централизации.
Так что лучше всего использовать модульность, которая идет с Vuex. и включить пространства имен. Затем вы можете модульизировать Vuex. Последующее использование может осуществлятьсяmoduleName/xxxиспользовать.
import { MutationTree } from 'vuex'
// Vuex参数接口
export interface IApp {
isShowToolBar: boolean
colorTheme: string
}
// state 状态
const state: IApp = {
isShowToolBar: true,
colorTheme: '#515a6e'
}
// mutations方法
const mutations: MutationTree<any> = {
setShowToolBar: (state: IApp, bool: boolean) => {
state.isShowToolBar = bool
},
setColorTheme: (state: IApp, color: string) => {
state.colorTheme = color
}
}
export default {
namespaced: true,
state,
mutations
}
Запрос отделен от представления.
Теперь вы также можете видеть, что некоторые разработчикиNetwork RequestКод размещается в представлении, поэтому по мере увеличения бизнес-кода обслуживание интерфейса становится все более и более сложным. и воляAPIЭто элегантный способ разделения запросов для унифицированного управления.Вам нужно только получить данные непосредственно на странице просмотра и назначить их переменным, требуемым страницей.
const { data } = await _api_mock_login(params)
Децентрализация компонентов
Мы управляем компонентами страницы так же, как и маршрутизацией, а сравнение структуры проекта приведено ниже. Каждая страница делает свое собственное независимое управление. Никогда не нагромождайте корневые файлы вашего собственного проекта. В противном случае распознавание страниц и компонентов будет очень низким. Легко копать ямы для людей, которые подчиняются приказам других.
Заключение
При разработке проектов Vue лучше всего использовать модульные проекты управления и не вызывать избыточность файлов. добросовестное использованиеrequire.contextФункция может сделать объявление в файле проекта. Для проектов Vue, если управление не очень хорошее, это очень неудобно для разработки, нужно снова и снова находить что-то в файлах. Таким образом, лучший способ — попытаться сделать все, что есть в текущем модуле, насколько это возможно для модуля, и извлечь то, что нужно делать другим модулям. Сведите к минимуму сопряжение, насколько это возможно. Старайтесь не позволять своим проектам накапливаться и создавать централизацию.
Если вы найдете это полезным, пожалуйста, поставьте лайк и поддержите. Найдите другую работу. Доступны Шанхай, Ханчжоу, Гуанчжоу и Шэньчжэнь.