add plan
This commit is contained in:
itqop
parent
da2a67bc91
commit
6e29b2e6df
|
|
@ -0,0 +1,816 @@
|
||||||
|
# План рефакторинга app.js на ES6 модули
|
||||||
|
|
||||||
|
## Текущее состояние
|
||||||
|
|
||||||
|
- **Размер файла**: 1671 строка
|
||||||
|
- **Проблемы**:
|
||||||
|
- Монолитная структура затрудняет поддержку
|
||||||
|
- Все функции в глобальной области видимости
|
||||||
|
- Сложно тестировать отдельные компоненты
|
||||||
|
- Повторное использование кода затруднено
|
||||||
|
|
||||||
|
## Целевая архитектура
|
||||||
|
|
||||||
|
```
|
||||||
|
static/
|
||||||
|
├── index.html
|
||||||
|
├── styles.css
|
||||||
|
├── js/
|
||||||
|
│ ├── main.js # Точка входа, инициализация
|
||||||
|
│ ├── config.js # Константы и конфигурация
|
||||||
|
│ ├── state/
|
||||||
|
│ │ └── appState.js # Глобальное состояние приложения
|
||||||
|
│ ├── services/
|
||||||
|
│ │ ├── api-client.js # Существующий API клиент (переместить)
|
||||||
|
│ │ ├── auth.service.js # Аутентификация
|
||||||
|
│ │ ├── settings.service.js # Управление настройками
|
||||||
|
│ │ └── query.service.js # Запросы к RAG
|
||||||
|
│ ├── ui/
|
||||||
|
│ │ ├── auth.ui.js # UI авторизации
|
||||||
|
│ │ ├── settings.ui.js # Диалог настроек
|
||||||
|
│ │ ├── query-builder.ui.js # Построитель запросов
|
||||||
|
│ │ ├── answer-viewer.ui.js # Просмотр ответов
|
||||||
|
│ │ ├── questions-list.ui.js # Список вопросов
|
||||||
|
│ │ ├── annotations.ui.js # Аннотации
|
||||||
|
│ │ └── loading.ui.js # Индикаторы загрузки
|
||||||
|
│ ├── utils/
|
||||||
|
│ │ ├── dom.utils.js # DOM манипуляции
|
||||||
|
│ │ ├── format.utils.js # Форматирование (время, текст)
|
||||||
|
│ │ ├── file.utils.js # Работа с файлами
|
||||||
|
│ │ └── validation.utils.js # Валидация данных
|
||||||
|
│ └── data/
|
||||||
|
│ ├── storage.js # LocalStorage обертка
|
||||||
|
│ └── defaults.js # Дефолтные настройки (из settings.js)
|
||||||
|
└── settings.js # Удалить после рефакторинга
|
||||||
|
```
|
||||||
|
|
||||||
|
## Этапы рефакторинга
|
||||||
|
|
||||||
|
### Этап 1: Подготовка (день 1)
|
||||||
|
|
||||||
|
**Цель**: Настроить окружение для ES6 модулей
|
||||||
|
|
||||||
|
#### 1.1. Обновить index.html
|
||||||
|
```html
|
||||||
|
<!-- Заменить обычные скрипты на модули -->
|
||||||
|
<script type="module" src="js/main.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 1.2. Создать структуру папок
|
||||||
|
```bash
|
||||||
|
mkdir static/js
|
||||||
|
mkdir static/js/state
|
||||||
|
mkdir static/js/services
|
||||||
|
mkdir static/js/ui
|
||||||
|
mkdir static/js/utils
|
||||||
|
mkdir static/js/data
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 1.3. Настроить конфигурацию
|
||||||
|
- Создать `js/config.js` с константами
|
||||||
|
- Определить экспорты/импорты
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Этап 2: Утилиты и вспомогательные функции (день 1-2)
|
||||||
|
|
||||||
|
**Цель**: Вынести независимые функции
|
||||||
|
|
||||||
|
#### 2.1. `utils/format.utils.js`
|
||||||
|
**Функции** (из app.js строки 150-188):
|
||||||
|
- `generateUUID()`
|
||||||
|
- `formatTime(seconds)`
|
||||||
|
- `formatTimestamp(isoString)`
|
||||||
|
- `isTableText(text)`
|
||||||
|
- `parseTextTable(text)`
|
||||||
|
- `escapeHtml(text)`
|
||||||
|
|
||||||
|
**Экспорт**:
|
||||||
|
```javascript
|
||||||
|
export {
|
||||||
|
generateUUID,
|
||||||
|
formatTime,
|
||||||
|
formatTimestamp,
|
||||||
|
isTableText,
|
||||||
|
parseTextTable,
|
||||||
|
escapeHtml
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 2.2. `utils/file.utils.js`
|
||||||
|
**Функции** (строки 262-273, 984-1132):
|
||||||
|
- `downloadJSON(data, filename)`
|
||||||
|
- `loadFileAsJSON(file)` - новая функция для загрузки
|
||||||
|
- `loadFileAsText(file)` - новая функция
|
||||||
|
|
||||||
|
**Экспорт**:
|
||||||
|
```javascript
|
||||||
|
export {
|
||||||
|
downloadJSON,
|
||||||
|
loadFileAsJSON,
|
||||||
|
loadFileAsText
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 2.3. `utils/validation.utils.js`
|
||||||
|
**Функции** (строки 823-860):
|
||||||
|
- `validateJSON(jsonString)`
|
||||||
|
- `validateLoginFormat(login)`
|
||||||
|
|
||||||
|
**Экспорт**:
|
||||||
|
```javascript
|
||||||
|
export {
|
||||||
|
validateJSON,
|
||||||
|
validateLoginFormat
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 2.4. `utils/dom.utils.js`
|
||||||
|
**Функции**:
|
||||||
|
- `showElement(id)`
|
||||||
|
- `hideElement(id)`
|
||||||
|
- `toggleElement(id)`
|
||||||
|
- `setElementText(id, text)`
|
||||||
|
- `showToast(message, type)` (строка 277-281)
|
||||||
|
|
||||||
|
**Экспорт**:
|
||||||
|
```javascript
|
||||||
|
export {
|
||||||
|
showElement,
|
||||||
|
hideElement,
|
||||||
|
toggleElement,
|
||||||
|
setElementText,
|
||||||
|
showToast
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Этап 3: State Management (день 2)
|
||||||
|
|
||||||
|
**Цель**: Централизовать управление состоянием
|
||||||
|
|
||||||
|
#### 3.1. `state/appState.js`
|
||||||
|
**Содержимое** (строки 10-42):
|
||||||
|
```javascript
|
||||||
|
class AppState {
|
||||||
|
constructor() {
|
||||||
|
this.settings = { /* ... */ }
|
||||||
|
this.currentEnvironment = 'ift'
|
||||||
|
this.environments = {
|
||||||
|
ift: { /* ... */ },
|
||||||
|
psi: { /* ... */ },
|
||||||
|
prod: { /* ... */ }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Геттеры
|
||||||
|
getCurrentEnv() { /* ... */ }
|
||||||
|
getCurrentEnvSettings() { /* ... */ }
|
||||||
|
|
||||||
|
// Сеттеры
|
||||||
|
setCurrentEnvironment(env) { /* ... */ }
|
||||||
|
updateSettings(settings) { /* ... */ }
|
||||||
|
|
||||||
|
// Persistence
|
||||||
|
saveToLocalStorage() { /* ... */ }
|
||||||
|
loadFromLocalStorage() { /* ... */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
export default new AppState()
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 3.2. `data/storage.js`
|
||||||
|
**Функции**:
|
||||||
|
- `saveEnvironmentData(env, data)`
|
||||||
|
- `loadEnvironmentData(env)`
|
||||||
|
- `clearEnvironmentData(env)`
|
||||||
|
|
||||||
|
**Экспорт**:
|
||||||
|
```javascript
|
||||||
|
export {
|
||||||
|
saveEnvironmentData,
|
||||||
|
loadEnvironmentData,
|
||||||
|
clearEnvironmentData
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 3.3. `data/defaults.js`
|
||||||
|
**Перенести из settings.js** (строки 1-70):
|
||||||
|
```javascript
|
||||||
|
export const defaultSettings = {
|
||||||
|
activeEnvironment: 'ift',
|
||||||
|
environments: { /* ... */ }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Этап 4: Services (день 3)
|
||||||
|
|
||||||
|
**Цель**: Бизнес-логика и API взаимодействие
|
||||||
|
|
||||||
|
#### 4.1. `services/api-client.js`
|
||||||
|
**Действие**: Переместить существующий `api-client.js` в папку `services/`
|
||||||
|
|
||||||
|
**Обновить**:
|
||||||
|
```javascript
|
||||||
|
class BriefBenchAPI {
|
||||||
|
// ... существующий код
|
||||||
|
}
|
||||||
|
|
||||||
|
export default new BriefBenchAPI()
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 4.2. `services/auth.service.js`
|
||||||
|
**Функции** (строки 60-140):
|
||||||
|
- `checkAuth()`
|
||||||
|
- `login(loginString)`
|
||||||
|
- `logout()`
|
||||||
|
- `isAuthenticated()`
|
||||||
|
|
||||||
|
**Экспорт**:
|
||||||
|
```javascript
|
||||||
|
import api from './api-client.js'
|
||||||
|
|
||||||
|
export class AuthService {
|
||||||
|
async checkAuth() { /* ... */ }
|
||||||
|
async login(loginString) { /* ... */ }
|
||||||
|
logout() { /* ... */ }
|
||||||
|
isAuthenticated() { /* ... */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
export default new AuthService()
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 4.3. `services/settings.service.js`
|
||||||
|
**Функции** (строки 290-357):
|
||||||
|
- `loadSettingsFromServer()`
|
||||||
|
- `saveSettingsToServer(settings)`
|
||||||
|
- `extractEnvironmentSettings(envSettings)`
|
||||||
|
- `resetToDefaults()`
|
||||||
|
|
||||||
|
**Экспорт**:
|
||||||
|
```javascript
|
||||||
|
import api from './api-client.js'
|
||||||
|
import appState from '../state/appState.js'
|
||||||
|
|
||||||
|
export class SettingsService {
|
||||||
|
async loadFromServer() { /* ... */ }
|
||||||
|
async saveToServer(settings) { /* ... */ }
|
||||||
|
extractEnvSettings(envSettings) { /* ... */ }
|
||||||
|
resetToDefaults() { /* ... */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
export default new SettingsService()
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 4.4. `services/query.service.js`
|
||||||
|
**Функции** (строки 861-1063):
|
||||||
|
- `buildRequestBody()`
|
||||||
|
- `sendQuery(environment, apiMode, requestBody)`
|
||||||
|
- `extractQuestions()`
|
||||||
|
- `loadRequestFromFile()`
|
||||||
|
- `loadResponseFromFile()`
|
||||||
|
|
||||||
|
**Экспорт**:
|
||||||
|
```javascript
|
||||||
|
import api from './api-client.js'
|
||||||
|
import appState from '../state/appState.js'
|
||||||
|
|
||||||
|
export class QueryService {
|
||||||
|
buildRequestBody() { /* ... */ }
|
||||||
|
async sendQuery(env, apiMode, body) { /* ... */ }
|
||||||
|
extractQuestions() { /* ... */ }
|
||||||
|
async loadRequestFromFile() { /* ... */ }
|
||||||
|
async loadResponseFromFile() { /* ... */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
export default new QueryService()
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Этап 5: UI Components (день 4-5)
|
||||||
|
|
||||||
|
**Цель**: Разделить UI логику по компонентам
|
||||||
|
|
||||||
|
#### 5.1. `ui/auth.ui.js`
|
||||||
|
**Функции** (строки 77-132):
|
||||||
|
- `showLoginScreen()`
|
||||||
|
- `hideLoginScreen()`
|
||||||
|
- `setupLoginListeners()`
|
||||||
|
- `handleLoginSubmit()`
|
||||||
|
|
||||||
|
**Экспорт**:
|
||||||
|
```javascript
|
||||||
|
import authService from '../services/auth.service.js'
|
||||||
|
|
||||||
|
export class AuthUI {
|
||||||
|
showLoginScreen() { /* ... */ }
|
||||||
|
hideLoginScreen() { /* ... */ }
|
||||||
|
setupListeners() { /* ... */ }
|
||||||
|
async handleLoginSubmit() { /* ... */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
export default new AuthUI()
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 5.2. `ui/loading.ui.js`
|
||||||
|
**Функции** (строки 1137-1145):
|
||||||
|
- `showLoading(message)`
|
||||||
|
- `hideLoading()`
|
||||||
|
|
||||||
|
**Экспорт**:
|
||||||
|
```javascript
|
||||||
|
export class LoadingUI {
|
||||||
|
show(message) { /* ... */ }
|
||||||
|
hide() { /* ... */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
export default new LoadingUI()
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 5.3. `ui/settings.ui.js`
|
||||||
|
**Функции** (строки 362-813):
|
||||||
|
- `openSettingsDialog()`
|
||||||
|
- `closeSettingsDialog()`
|
||||||
|
- `populateSettingsDialog()`
|
||||||
|
- `readSettingsFromDialog()`
|
||||||
|
- `toggleBackendSettings(show)`
|
||||||
|
- `saveSettings()`
|
||||||
|
- `resetSettings()`
|
||||||
|
- `exportSettings()`
|
||||||
|
- `importSettings()`
|
||||||
|
|
||||||
|
**Экспорт**:
|
||||||
|
```javascript
|
||||||
|
import settingsService from '../services/settings.service.js'
|
||||||
|
import appState from '../state/appState.js'
|
||||||
|
|
||||||
|
export class SettingsUI {
|
||||||
|
open() { /* ... */ }
|
||||||
|
close() { /* ... */ }
|
||||||
|
populate() { /* ... */ }
|
||||||
|
read() { /* ... */ }
|
||||||
|
toggleBackendSettings(show) { /* ... */ }
|
||||||
|
async save() { /* ... */ }
|
||||||
|
async reset() { /* ... */ }
|
||||||
|
export() { /* ... */ }
|
||||||
|
async import() { /* ... */ }
|
||||||
|
setupListeners() { /* ... */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
export default new SettingsUI()
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 5.4. `ui/query-builder.ui.js`
|
||||||
|
**Функции** (строки 643-883):
|
||||||
|
- `showQueryBuilder()`
|
||||||
|
- `switchQueryMode(mode)`
|
||||||
|
- `validateJSON()`
|
||||||
|
- `setupQueryBuilderListeners()`
|
||||||
|
|
||||||
|
**Экспорт**:
|
||||||
|
```javascript
|
||||||
|
import queryService from '../services/query.service.js'
|
||||||
|
|
||||||
|
export class QueryBuilderUI {
|
||||||
|
show() { /* ... */ }
|
||||||
|
switchMode(mode) { /* ... */ }
|
||||||
|
validateJSON() { /* ... */ }
|
||||||
|
setupListeners() { /* ... */ }
|
||||||
|
async handleSendQuery() { /* ... */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
export default new QueryBuilderUI()
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 5.5. `ui/questions-list.ui.js`
|
||||||
|
**Функции** (строки 1179-1273):
|
||||||
|
- `renderQuestionsList()`
|
||||||
|
- `selectAnswer(index)`
|
||||||
|
- `updateQuestionsCount()`
|
||||||
|
- `hasAnnotationsInDocs(docsSection)`
|
||||||
|
- `pluralize(count, one, few, many)`
|
||||||
|
|
||||||
|
**Экспорт**:
|
||||||
|
```javascript
|
||||||
|
import appState from '../state/appState.js'
|
||||||
|
|
||||||
|
export class QuestionsListUI {
|
||||||
|
render() { /* ... */ }
|
||||||
|
selectAnswer(index) { /* ... */ }
|
||||||
|
updateCount() { /* ... */ }
|
||||||
|
hasAnnotations(docsSection) { /* ... */ }
|
||||||
|
setupListeners() { /* ... */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
export default new QuestionsListUI()
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 5.6. `ui/answer-viewer.ui.js`
|
||||||
|
**Функции** (строки 1279-1443):
|
||||||
|
- `renderAnswer(index)`
|
||||||
|
- `renderAnswerBody(elementId, text)`
|
||||||
|
- `renderDocuments(containerId, docs, ...)`
|
||||||
|
- `toggleExpansion(id)`
|
||||||
|
- `switchTab(tabButton, tabId)`
|
||||||
|
|
||||||
|
**Экспорт**:
|
||||||
|
```javascript
|
||||||
|
import appState from '../state/appState.js'
|
||||||
|
import { formatTime, parseTextTable, escapeHtml } from '../utils/format.utils.js'
|
||||||
|
|
||||||
|
export class AnswerViewerUI {
|
||||||
|
render(index) { /* ... */ }
|
||||||
|
renderBody(elementId, text) { /* ... */ }
|
||||||
|
renderDocuments(containerId, docs, ...) { /* ... */ }
|
||||||
|
toggleExpansion(id) { /* ... */ }
|
||||||
|
switchTab(tabButton, tabId) { /* ... */ }
|
||||||
|
setupListeners() { /* ... */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
export default new AnswerViewerUI()
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 5.7. `ui/annotations.ui.js`
|
||||||
|
**Функции** (строки 1448-1615):
|
||||||
|
- `initAnnotationForAnswer(index)`
|
||||||
|
- `loadAnnotationsForAnswer(index)`
|
||||||
|
- `loadSectionAnnotation(section, data)`
|
||||||
|
- `loadDocumentAnnotations(section, subsection, docs)`
|
||||||
|
- `setupAnnotationListeners()`
|
||||||
|
- `updateCheckboxStyle(checkbox)`
|
||||||
|
- `saveAnnotationsDraft()`
|
||||||
|
|
||||||
|
**Экспорт**:
|
||||||
|
```javascript
|
||||||
|
import appState from '../state/appState.js'
|
||||||
|
import { saveEnvironmentData } from '../data/storage.js'
|
||||||
|
|
||||||
|
export class AnnotationsUI {
|
||||||
|
initForAnswer(index) { /* ... */ }
|
||||||
|
loadForAnswer(index) { /* ... */ }
|
||||||
|
loadSection(section, data) { /* ... */ }
|
||||||
|
loadDocuments(section, subsection, docs) { /* ... */ }
|
||||||
|
setupListeners() { /* ... */ }
|
||||||
|
saveDraft() { /* ... */ }
|
||||||
|
}
|
||||||
|
|
||||||
|
export default new AnnotationsUI()
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Этап 6: Main Entry Point (день 6)
|
||||||
|
|
||||||
|
**Цель**: Создать точку входа и инициализацию
|
||||||
|
|
||||||
|
#### 6.1. `js/main.js`
|
||||||
|
```javascript
|
||||||
|
// Импорты
|
||||||
|
import appState from './state/appState.js'
|
||||||
|
import authService from './services/auth.service.js'
|
||||||
|
import settingsService from './services/settings.service.js'
|
||||||
|
import authUI from './ui/auth.ui.js'
|
||||||
|
import settingsUI from './ui/settings.ui.js'
|
||||||
|
import queryBuilderUI from './ui/query-builder.ui.js'
|
||||||
|
import questionsListUI from './ui/questions-list.ui.js'
|
||||||
|
import answerViewerUI from './ui/answer-viewer.ui.js'
|
||||||
|
import annotationsUI from './ui/annotations.ui.js'
|
||||||
|
|
||||||
|
// Инициализация приложения
|
||||||
|
async function initApp() {
|
||||||
|
// Load settings from server
|
||||||
|
await settingsService.loadFromServer()
|
||||||
|
appState.setCurrentEnvironment(appState.settings.activeEnvironment || 'ift')
|
||||||
|
|
||||||
|
// Load saved data for each environment
|
||||||
|
appState.loadFromLocalStorage()
|
||||||
|
|
||||||
|
// Setup all UI listeners
|
||||||
|
authUI.setupListeners()
|
||||||
|
settingsUI.setupListeners()
|
||||||
|
queryBuilderUI.setupListeners()
|
||||||
|
questionsListUI.setupListeners()
|
||||||
|
answerViewerUI.setupListeners()
|
||||||
|
annotationsUI.setupListeners()
|
||||||
|
|
||||||
|
// Setup environment tabs
|
||||||
|
setupEnvironmentTabs()
|
||||||
|
|
||||||
|
// Render initial state
|
||||||
|
updateUI()
|
||||||
|
}
|
||||||
|
|
||||||
|
// Setup environment tabs
|
||||||
|
function setupEnvironmentTabs() {
|
||||||
|
const tabs = document.querySelectorAll('.env-tab')
|
||||||
|
tabs.forEach(tab => {
|
||||||
|
tab.addEventListener('click', () => {
|
||||||
|
switchEnvironment(tab.dataset.env)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Switch environment
|
||||||
|
function switchEnvironment(env) {
|
||||||
|
appState.setCurrentEnvironment(env)
|
||||||
|
updateEnvironmentTabs()
|
||||||
|
updateUI()
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update environment tabs
|
||||||
|
function updateEnvironmentTabs() {
|
||||||
|
const tabs = document.querySelectorAll('.env-tab')
|
||||||
|
tabs.forEach(tab => {
|
||||||
|
if (tab.dataset.env === appState.currentEnvironment) {
|
||||||
|
tab.classList.add('active')
|
||||||
|
} else {
|
||||||
|
tab.classList.remove('active')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update UI based on current state
|
||||||
|
function updateUI() {
|
||||||
|
questionsListUI.render()
|
||||||
|
|
||||||
|
const env = appState.getCurrentEnv()
|
||||||
|
if (env.currentResponse && env.currentResponse.answers) {
|
||||||
|
answerViewerUI.render(env.currentAnswerIndex || 0)
|
||||||
|
} else {
|
||||||
|
queryBuilderUI.show()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Entry point
|
||||||
|
document.addEventListener('DOMContentLoaded', async () => {
|
||||||
|
const isAuthenticated = await authService.checkAuth()
|
||||||
|
|
||||||
|
if (isAuthenticated) {
|
||||||
|
await initApp()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 6.2. `js/config.js`
|
||||||
|
```javascript
|
||||||
|
// API Configuration
|
||||||
|
export const API_CONFIG = {
|
||||||
|
baseURL: '/api/v1',
|
||||||
|
timeout: 1800000 // 30 minutes
|
||||||
|
}
|
||||||
|
|
||||||
|
// UI Configuration
|
||||||
|
export const UI_CONFIG = {
|
||||||
|
defaultQueryMode: 'questions',
|
||||||
|
defaultWithDocs: true,
|
||||||
|
maxAnnotationLength: 5000
|
||||||
|
}
|
||||||
|
|
||||||
|
// Storage Keys
|
||||||
|
export const STORAGE_KEYS = {
|
||||||
|
token: 'briefBenchToken',
|
||||||
|
user: 'briefBenchUser',
|
||||||
|
settings: 'briefBenchSettings',
|
||||||
|
envData: (env) => `briefBenchData_${env}`,
|
||||||
|
annotations: 'briefBenchAnnotationsDraft'
|
||||||
|
}
|
||||||
|
|
||||||
|
// Constants
|
||||||
|
export const ENVIRONMENTS = ['ift', 'psi', 'prod']
|
||||||
|
export const API_MODES = ['bench', 'backend']
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Этап 7: Тестирование и оптимизация (день 7)
|
||||||
|
|
||||||
|
### 7.1. Ручное тестирование
|
||||||
|
- ✅ Авторизация работает
|
||||||
|
- ✅ Загрузка/сохранение настроек
|
||||||
|
- ✅ Отправка запросов (bench/backend)
|
||||||
|
- ✅ Отображение ответов
|
||||||
|
- ✅ Аннотации сохраняются
|
||||||
|
- ✅ Экспорт/импорт работает
|
||||||
|
- ✅ Переключение окружений
|
||||||
|
|
||||||
|
### 7.2. Проверка производительности
|
||||||
|
- Измерить время загрузки
|
||||||
|
- Проверить размер бандла
|
||||||
|
- Оптимизировать импорты
|
||||||
|
|
||||||
|
### 7.3. Очистка
|
||||||
|
- Удалить старый `app.js`
|
||||||
|
- Удалить `settings.js`
|
||||||
|
- Обновить `.gitignore` если нужно
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Миграционная стратегия
|
||||||
|
|
||||||
|
### Вариант 1: Постепенная миграция (РЕКОМЕНДУЕТСЯ)
|
||||||
|
|
||||||
|
**Подход**: Модули живут параллельно с монолитом
|
||||||
|
|
||||||
|
1. Создать папку `js/` с модулями
|
||||||
|
2. Оставить `app.js` работающим
|
||||||
|
3. Постепенно переносить функции
|
||||||
|
4. Тестировать после каждого этапа
|
||||||
|
5. Когда все готово - переключиться на `main.js`
|
||||||
|
|
||||||
|
**Преимущества**:
|
||||||
|
- Можно откатиться в любой момент
|
||||||
|
- Меньше риска
|
||||||
|
- Легче тестировать
|
||||||
|
|
||||||
|
**index.html во время миграции**:
|
||||||
|
```html
|
||||||
|
<!-- Старый код (работает) -->
|
||||||
|
<script src="settings.js"></script>
|
||||||
|
<script src="api-client.js"></script>
|
||||||
|
<script src="app.js"></script>
|
||||||
|
|
||||||
|
<!-- Новый код (тестируется) -->
|
||||||
|
<!-- <script type="module" src="js/main.js"></script> -->
|
||||||
|
```
|
||||||
|
|
||||||
|
### Вариант 2: Быстрая миграция
|
||||||
|
|
||||||
|
**Подход**: Переписать всё за раз
|
||||||
|
|
||||||
|
**НЕ РЕКОМЕНДУЕТСЯ** из-за высокого риска багов
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Чек-лист миграции
|
||||||
|
|
||||||
|
### Подготовка
|
||||||
|
- [ ] Создать ветку `feature/modularize-frontend`
|
||||||
|
- [ ] Сделать backup текущего app.js
|
||||||
|
- [ ] Создать структуру папок
|
||||||
|
|
||||||
|
### Этап 1: Утилиты
|
||||||
|
- [ ] Создать `utils/format.utils.js`
|
||||||
|
- [ ] Создать `utils/file.utils.js`
|
||||||
|
- [ ] Создать `utils/validation.utils.js`
|
||||||
|
- [ ] Создать `utils/dom.utils.js`
|
||||||
|
- [ ] Тесты: проверить что функции работают
|
||||||
|
|
||||||
|
### Этап 2: State
|
||||||
|
- [ ] Создать `state/appState.js`
|
||||||
|
- [ ] Создать `data/storage.js`
|
||||||
|
- [ ] Создать `data/defaults.js`
|
||||||
|
- [ ] Тесты: проверить геттеры/сеттеры
|
||||||
|
|
||||||
|
### Этап 3: Services
|
||||||
|
- [ ] Переместить `api-client.js` в `services/`
|
||||||
|
- [ ] Создать `services/auth.service.js`
|
||||||
|
- [ ] Создать `services/settings.service.js`
|
||||||
|
- [ ] Создать `services/query.service.js`
|
||||||
|
- [ ] Тесты: проверить API вызовы
|
||||||
|
|
||||||
|
### Этап 4: UI Components
|
||||||
|
- [ ] Создать `ui/auth.ui.js`
|
||||||
|
- [ ] Создать `ui/loading.ui.js`
|
||||||
|
- [ ] Создать `ui/settings.ui.js`
|
||||||
|
- [ ] Создать `ui/query-builder.ui.js`
|
||||||
|
- [ ] Создать `ui/questions-list.ui.js`
|
||||||
|
- [ ] Создать `ui/answer-viewer.ui.js`
|
||||||
|
- [ ] Создать `ui/annotations.ui.js`
|
||||||
|
- [ ] Тесты: проверить рендеринг
|
||||||
|
|
||||||
|
### Этап 5: Main
|
||||||
|
- [ ] Создать `js/main.js`
|
||||||
|
- [ ] Создать `js/config.js`
|
||||||
|
- [ ] Обновить `index.html`
|
||||||
|
- [ ] Тесты: полный цикл работы
|
||||||
|
|
||||||
|
### Этап 6: Очистка
|
||||||
|
- [ ] Удалить старый `app.js`
|
||||||
|
- [ ] Удалить `settings.js`
|
||||||
|
- [ ] Обновить документацию
|
||||||
|
- [ ] Code review
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Преимущества после рефакторинга
|
||||||
|
|
||||||
|
### Для разработки
|
||||||
|
- ✅ **Модульность**: Каждый файл отвечает за свою область
|
||||||
|
- ✅ **Тестируемость**: Легко покрыть модули unit-тестами
|
||||||
|
- ✅ **Читаемость**: Проще найти нужную функцию
|
||||||
|
- ✅ **Переиспользование**: Функции можно использовать в других проектах
|
||||||
|
|
||||||
|
### Для поддержки
|
||||||
|
- ✅ **Изоляция**: Баг в одном модуле не затронет другие
|
||||||
|
- ✅ **Масштабируемость**: Легко добавлять новые функции
|
||||||
|
- ✅ **Документация**: Каждый модуль самодокументируемый
|
||||||
|
- ✅ **Team work**: Разные разработчики могут работать над разными модулями
|
||||||
|
|
||||||
|
### Для производительности
|
||||||
|
- ✅ **Tree shaking**: Неиспользуемый код не попадет в бандл
|
||||||
|
- ✅ **Lazy loading**: Можно подгружать модули по требованию
|
||||||
|
- ✅ **Кеширование**: Браузер может кешировать отдельные модули
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Риски и митигация
|
||||||
|
|
||||||
|
### Риск 1: Поломка существующего функционала
|
||||||
|
**Митигация**: Постепенная миграция с тестированием после каждого этапа
|
||||||
|
|
||||||
|
### Риск 2: Увеличение времени загрузки (много файлов)
|
||||||
|
**Митигация**: Использовать bundler (Vite/Webpack) для production
|
||||||
|
|
||||||
|
### Риск 3: Проблемы совместимости браузеров
|
||||||
|
**Митигация**: ES6 модули поддерживаются всеми современными браузерами
|
||||||
|
|
||||||
|
### Риск 4: Сложность отладки
|
||||||
|
**Митигация**: Source maps и понятная структура папок
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Следующие шаги
|
||||||
|
|
||||||
|
1. **Обсудить план** с командой
|
||||||
|
2. **Выбрать стратегию миграции** (постепенная/быстрая)
|
||||||
|
3. **Создать ветку** для рефакторинга
|
||||||
|
4. **Начать с Этапа 1** (утилиты)
|
||||||
|
5. **Тестировать** после каждого этапа
|
||||||
|
6. **Code review** перед мержем
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Временные оценки
|
||||||
|
|
||||||
|
| Этап | Описание | Время |
|
||||||
|
|------|----------|-------|
|
||||||
|
| Этап 1 | Подготовка | 2 часа |
|
||||||
|
| Этап 2 | Утилиты | 3 часа |
|
||||||
|
| Этап 3 | State | 2 часа |
|
||||||
|
| Этап 4 | Services | 4 часа |
|
||||||
|
| Этап 5 | UI Components | 8 часов |
|
||||||
|
| Этап 6 | Main Entry | 2 часа |
|
||||||
|
| Этап 7 | Тестирование | 4 часа |
|
||||||
|
| **ИТОГО** | | **~25 часов** (3-4 рабочих дня) |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Пример использования после рефакторинга
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Было (app.js, строка 900):
|
||||||
|
async function handleSendQuery() {
|
||||||
|
const envSettings = getCurrentEnvSettings()
|
||||||
|
const env = getCurrentEnv()
|
||||||
|
const apiMode = envSettings.apiMode || 'bench'
|
||||||
|
// ... 50 строк кода
|
||||||
|
}
|
||||||
|
|
||||||
|
// Стало (js/ui/query-builder.ui.js):
|
||||||
|
import queryService from '../services/query.service.js'
|
||||||
|
import appState from '../state/appState.js'
|
||||||
|
import loadingUI from './loading.ui.js'
|
||||||
|
|
||||||
|
export class QueryBuilderUI {
|
||||||
|
async handleSendQuery() {
|
||||||
|
const envSettings = appState.getCurrentEnvSettings()
|
||||||
|
const apiMode = envSettings.apiMode || 'bench'
|
||||||
|
|
||||||
|
loadingUI.show('Отправка запроса...')
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await queryService.sendQuery(
|
||||||
|
appState.currentEnvironment,
|
||||||
|
apiMode,
|
||||||
|
this.buildRequestBody()
|
||||||
|
)
|
||||||
|
|
||||||
|
// Update state
|
||||||
|
appState.getCurrentEnv().currentResponse = result.response
|
||||||
|
|
||||||
|
// Re-render
|
||||||
|
this.hide()
|
||||||
|
answerViewerUI.render(0)
|
||||||
|
} catch (error) {
|
||||||
|
showToast(error.message, 'error')
|
||||||
|
} finally {
|
||||||
|
loadingUI.hide()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Преимущества**:
|
||||||
|
- Понятно где искать функцию
|
||||||
|
- Легко тестировать
|
||||||
|
- Явные зависимости
|
||||||
|
- Переиспользуемый код
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Автор: Claude Sonnet 4.5*
|
||||||
|
*Дата: 2025-12-25*
|
||||||
Loading…
Reference in New Issue