193 lines
No EOL
8.9 KiB
Markdown
193 lines
No EOL
8.9 KiB
Markdown
# 🔧 Рефакторинг Flutter WebView Bridge
|
||
|
||
## 🎯 Цель рефакторинга
|
||
|
||
Устранение дублирования JavaScript кода между файлами `bridge_script.dart` и `bridge_transport.dart` путем создания централизованной системы управления JavaScript скриптами, а также упрощение кода для обеспечения только базовой функциональности связи.
|
||
|
||
## 📊 Проблемы до рефакторинга
|
||
|
||
### ❌ Дублирование кода
|
||
- JavaScript код дублировался в `bridge_script.dart` и `bridge_transport.dart`
|
||
- Одинаковая функциональность реализована в разных местах
|
||
- Сложность поддержки и обновления кода
|
||
|
||
### ❌ Отсутствие централизации
|
||
- JavaScript скрипты разбросаны по разным файлам
|
||
- Нет единой точки управления bridge функциональностью
|
||
- Сложность отладки и диагностики
|
||
|
||
### ❌ Неэффективная инжекция скриптов
|
||
- JavaScript код генерировался динамически при каждой отправке сообщения
|
||
- Избыточные вызовы `evaluateJavaScript`
|
||
- Снижение производительности
|
||
|
||
### ❌ Несогласованность логирования
|
||
- Разные стили логирования в разных файлах
|
||
- Отсутствие единообразия в сообщениях отладки
|
||
|
||
## ✅ Решения после рефакторинга
|
||
|
||
### 🔧 Централизация в `bridge_script.dart`
|
||
|
||
#### 1. Упрощенные скрипты с базовой функциональностью
|
||
```dart
|
||
// Host Bridge Script - только базовая связь
|
||
static const String hostBridgeScript = '''
|
||
window.flutterBridge = {
|
||
// Send message from Web to Host
|
||
sendMessage: function(message) {
|
||
console.log('[Flutter Bridge] Отправка сообщения в Flutter Host:', message);
|
||
window.flutter_inappwebview.callHandler('flutterBridge', message);
|
||
},
|
||
|
||
// Receive message from Host to Web
|
||
receiveMessage: function(message) {
|
||
console.log('[Flutter Bridge] Получение сообщения от Flutter Host:', message);
|
||
if (window.webAppBridge && window.webAppBridge.receiveMessage) {
|
||
window.webAppBridge.receiveMessage(message);
|
||
} else {
|
||
console.warn('[Flutter Bridge] Web app bridge не доступен');
|
||
}
|
||
}
|
||
};
|
||
''';
|
||
```
|
||
|
||
#### 2. Удаление генераторов скриптов
|
||
- Удалены все методы `generate*Script()`
|
||
- JavaScript код инжектируется только один раз при инициализации
|
||
- Прямые вызовы функций вместо генерации скриптов
|
||
|
||
### 🚀 Обновление `bridge_transport.dart`
|
||
|
||
#### 1. Прямые вызовы JavaScript функций
|
||
```dart
|
||
// Вместо генерации скрипта
|
||
final script = 'window.flutterBridge.receiveMessage(\'$jsonString\');';
|
||
await _evaluateJavaScript(script);
|
||
|
||
// Вместо сложных генераторов
|
||
await _evaluateJavaScript('''
|
||
window.webAppBridge.setMessageHandler(function(message) {
|
||
window.webAppBridge._handleMessage(message);
|
||
});
|
||
''');
|
||
```
|
||
|
||
#### 2. Упрощение логики
|
||
- Убрана избыточная диагностика
|
||
- Минимальное логирование
|
||
- Фокус на основной функциональности
|
||
|
||
### 🔄 Обновление `bridge_utils.dart`
|
||
|
||
#### 1. Удаление депрекированных методов
|
||
- Удалены все `generate*Script()` методы
|
||
- Оставлены только утилитарные функции
|
||
- Упрощена структура класса
|
||
|
||
#### 2. Сохранение полезных утилит
|
||
- `escapeJavaScriptString()` - экранирование строк
|
||
- `isValidJsonString()` - валидация JSON
|
||
- `generateRegisterHandlerScript()` - специфичная функциональность
|
||
|
||
## 📈 Преимущества после рефакторинга
|
||
|
||
### ✅ Централизация
|
||
- Все JavaScript скрипты в одном месте
|
||
- Единая точка управления bridge функциональностью
|
||
- Простота обновления и поддержки
|
||
|
||
### ✅ Устранение дублирования
|
||
- Нет повторяющегося кода
|
||
- Меньше ошибок и несоответствий
|
||
- Легче поддерживать консистентность
|
||
|
||
### ✅ Улучшенная производительность
|
||
- JavaScript код инжектируется только один раз
|
||
- Прямые вызовы функций вместо генерации скриптов
|
||
- Меньше накладных расходов
|
||
|
||
### ✅ Упрощение кода
|
||
- Меньше сложности
|
||
- Легче понимать и поддерживать
|
||
- Фокус на основной функциональности
|
||
|
||
### ✅ Улучшенная отладка
|
||
- Единообразное логирование с префиксами
|
||
- Подробная диагностика на всех этапах
|
||
- Лучшая видимость проблем
|
||
|
||
## 🔍 Структура после рефакторинга
|
||
|
||
```
|
||
packages/bridge_core/lib/src/bridge/
|
||
├── bridge_script.dart # 🎯 Централизованные JavaScript скрипты (упрощенные)
|
||
├── bridge_utils.dart # 🔧 Утилитарные функции (очищенные)
|
||
└── bridge_transport.dart # 🚀 Транспортный слой (прямые вызовы)
|
||
```
|
||
|
||
## 📋 Миграция для разработчиков
|
||
|
||
### 🔄 Использование упрощенного API
|
||
```dart
|
||
// Получение скриптов
|
||
final hostScript = BridgeScript.hostBridgeScript;
|
||
final webScript = BridgeScript.webBridgeScript;
|
||
|
||
// Прямые вызовы в transport
|
||
final script = 'window.flutterBridge.receiveMessage(\'$jsonString\');';
|
||
await _evaluateJavaScript(script);
|
||
```
|
||
|
||
### 🔄 Удаленные методы
|
||
```dart
|
||
// ❌ Больше не доступны:
|
||
// BridgeScript.generateSendMessageScript()
|
||
// BridgeScript.generateMessageHandlerScript()
|
||
// BridgeScript.generateDartHandlerScript()
|
||
// BridgeScript.generateDiagnosticScript()
|
||
// BridgeUtils.generateSendMessageScript()
|
||
// BridgeUtils.generateSendToHostScript()
|
||
// BridgeUtils.generateSetMessageHandlerScript()
|
||
```
|
||
|
||
## 🧪 Тестирование рефакторинга
|
||
|
||
### ✅ Проверка функциональности
|
||
- Все существующие тесты проходят
|
||
- Нет изменений в публичном API
|
||
- Обратная совместимость сохранена
|
||
|
||
### ✅ Проверка производительности
|
||
- Улучшена производительность за счет устранения динамической генерации
|
||
- JavaScript код инжектируется только один раз
|
||
- Прямые вызовы функций более эффективны
|
||
|
||
### ✅ Проверка отладки
|
||
- Упрощенное логирование работает
|
||
- Диагностика доступна
|
||
- Ошибки легко отслеживаются
|
||
|
||
## 🎉 Результат рефакторинга
|
||
|
||
### ✅ Достигнутые цели
|
||
- ✅ Устранено дублирование JavaScript кода
|
||
- ✅ Создана централизованная система управления скриптами
|
||
- ✅ Упрощен JavaScript код для обеспечения только связи
|
||
- ✅ Устранена динамическая инжекция скриптов
|
||
- ✅ Улучшена производительность
|
||
- ✅ Сохранена обратная совместимость
|
||
|
||
### 🚀 Готовность к использованию
|
||
Система Flutter WebView Bridge после рефакторинга стала более:
|
||
- **Производительной** - устранение динамической генерации скриптов
|
||
- **Простой** - упрощенный JavaScript код
|
||
- **Поддерживаемой** - централизованный код
|
||
- **Надежной** - устранение дублирования
|
||
- **Отлаживаемой** - улучшенное логирование
|
||
- **Расширяемой** - модульная архитектура
|
||
|
||
---
|
||
|
||
**Рефакторинг завершен успешно!** 🎉 |