# 🚀 Быстрый старт с CSElement
Добро пожаловать в мир CSElement! Эта мощная библиотека превратит работу с данными в удовольствие. За 15 минут вы освоите основы и создадите свою первую реактивную структуру данных.
## 📦 Установка
```bash
npm install cs-element
# или
yarn add cs-element
```
## 🎯 Выбор правильной версии
CSElement теперь имеет модульную архитектуру для максимальной совместимости:
### 🌐 Для браузерных приложений
- **Основная библиотека**: Полностью совместима с браузерами
- **Без Node.js зависимостей**: Не требует полифиллов или конфигурации
- **Легковесная**: Только необходимые модули
### 🖥️ Для Node.js приложений
- **Основная библиотека**: Все браузерные возможности
- **Дополнительные плагины**: Файловые операции, сжатие, сетевые возможности
- **Полная функциональность**: Все возможности CSElement
### 📱 Для React/Vue/Angular
- **ES Modules**: Современный импорт
- **Tree-shaking**: Автоматическая оптимизация размера
- **TypeScript**: Полная поддержка типов
### 🌐 Браузерная совместимость
CSElement теперь полностью совместим с браузерами! Основная библиотека не содержит Node.js зависимостей.
#### Для браузера (HTML):
```html
CSElement App
```
#### Для современных браузеров (ES Modules):
```javascript
import { CSElement } from 'cs-element';
```
### 🖥️ Node.js специфичные возможности
Node.js функции теперь доступны через отдельные импорты:
```javascript
// Основная библиотека (работает везде)
import { CSElement } from 'cs-element';
// Node.js специфичные плагины (только для Node.js)
import { BackupPlugin } from 'cs-element/plugins/backup';
import { CompressionPlugin } from 'cs-element/plugins/compression';
import { SecurityPlugin } from 'cs-element/plugins/security';
import { NetworkPlugin } from 'cs-element/plugins/network';
import { SerializationPlugin } from 'cs-element/plugins/serialization';
import { WorkerManager } from 'cs-element/workers/nodejs';
```
### Дополнительные зависимости (только для Node.js)
Эти зависимости нужны только если вы используете Node.js специфичные плагины:
```bash
# Для BackupPlugin
npm install fs-extra archiver extract-zip
# Для CompressionPlugin
npm install pako lz4js brotli-wasm
# Для SecurityPlugin
npm install bcrypt crypto-js
# Для NetworkPlugin
npm install axios ws socket.io-client node-fetch
# Для SerializationPlugin
npm install js-yaml msgpack-lite
# Для WorkerManager
npm install uuid
```
## 🎯 Ваш первый элемент
Начнем с простого примера - создания пользователя:
### В браузере (HTML):
```html
```
### В Node.js/ES Modules:
```javascript
import { CSElement } from 'cs-element';
// Создаем элемент пользователя
const user = new CSElement('user-123');
await user.setData('name', 'John Doe');
await user.setData('email', 'john@example.com');
await user.setData('age', 30);
console.log(`Пользователь: ${user.getData('name')}`);
// Вывод: Пользователь: John Doe
```
## 🔄 Реальная сериализация и сжатие (Node.js)
CSElement теперь поддерживает реальные алгоритмы сжатия и сериализации в Node.js:
```javascript
// ⚠️ Только для Node.js!
import { SerializationPlugin } from 'cs-element/plugins/serialization';
// Создаем плагин сериализации с реальными алгоритмами
const serialization = new SerializationPlugin({
defaultFormat: 'json',
compressionType: 'gzip',
encryptionKey: 'your-secret-key-here'
});
// Сериализация с различными форматами
const user = new CSElement('user-1');
await user.setData('name', 'Alice');
await user.setData('preferences', { theme: 'dark', language: 'ru' });
// JSON сериализация с gzip сжатием
const jsonData = await serialization.serialize(user, 'json');
console.log('JSON данные сжаты:', jsonData.length < JSON.stringify(user).length);
// YAML сериализация
const yamlData = await serialization.serialize(user, 'yaml');
console.log('YAML формат:', yamlData.substring(0, 100));
// MessagePack бинарная сериализация
const binaryData = await serialization.serialize(user, 'msgpack');
console.log('Бинарные данные:', binaryData instanceof Buffer);
// Десериализация
const restored = await serialization.deserialize(jsonData, 'json');
console.log('Восстановленные данные:', await restored.getData('name'));
```
## 🗜️ Продвинутое сжатие (Node.js)
Используйте различные алгоритмы сжатия для оптимизации в Node.js:
```javascript
// ⚠️ Только для Node.js!
import { CompressionPlugin, CompressionType } from 'cs-element/plugins/compression';
const compression = new CompressionPlugin({
defaultAlgorithm: CompressionType.GZIP,
compressionLevel: 6
});
const largeData = JSON.stringify({
users: Array(1000).fill(null).map((_, i) => ({
id: i,
name: `User ${i}`,
email: `user${i}@example.com`,
data: Array(100).fill('sample data')
}))
});
// Gzip сжатие
const gzipCompressed = await compression.compress(largeData, CompressionType.GZIP);
console.log(`Gzip: ${largeData.length} → ${gzipCompressed.length} байт`);
// LZ4 сжатие (быстрое)
const lz4Compressed = await compression.compress(largeData, CompressionType.LZ4);
console.log(`LZ4: ${largeData.length} → ${lz4Compressed.length} байт`);
// Brotli сжатие (максимальное сжатие)
const brotliCompressed = await compression.compress(largeData, CompressionType.BROTLI);
console.log(`Brotli: ${largeData.length} → ${brotliCompressed.length} байт`);
// Декомпрессия
const decompressed = await compression.decompress(gzipCompressed, CompressionType.GZIP);
console.log('Данные восстановлены:', decompressed.length === largeData.length);
```
## 🌐 Сетевые операции (Node.js)
Синхронизация данных через HTTP и WebSocket в Node.js:
```javascript
// ⚠️ Только для Node.js!
import { NetworkPlugin } from 'cs-element/plugins/network';
const network = new NetworkPlugin({
baseUrl: 'https://api.example.com',
timeout: 5000,
retryAttempts: 3,
enableWebSocket: true,
wsUrl: 'wss://api.example.com/ws'
});
// HTTP синхронизация
const user = new CSElement('user-1');
await user.setData('name', 'Bob');
// Отправка данных на сервер
await network.syncToServer(user);
// Получение данных с сервера
const serverData = await network.syncFromServer('user-1');
console.log('Данные с сервера:', serverData);
// WebSocket в реальном времени
await network.connect(); // Подключение к WebSocket
network.on('data:received', (data) => {
console.log('Получены данные в реальном времени:', data);
});
// Отправка данных через WebSocket
await network.sendData({
type: 'user:update',
userId: 'user-1',
data: { status: 'online' }
});
```
## 💾 Бэкапы и восстановление (Node.js)
Создание и восстановление бэкапов с реальными файловыми операциями в Node.js:
```javascript
// ⚠️ Только для Node.js!
import { BackupPlugin, StorageLocation, CompressionType } from 'cs-element/plugins/backup';
const backup = new BackupPlugin({
backupPath: './backups',
tempPath: './temp',
maxBackups: 10,
defaultCompression: CompressionType.GZIP,
defaultStorageLocation: StorageLocation.LOCAL
});
// Создание бэкапа
const users = [
new CSElement('user-1'),
new CSElement('user-2'),
new CSElement('user-3')
];
// Заполняем данными
for (let i = 0; i < users.length; i++) {
await users[i].setData('name', `User ${i + 1}`);
await users[i].setData('email', `user${i + 1}@example.com`);
}
// Создаем бэкап
const backupId = await backup.createBackup(users, {
name: 'Ежедневный бэкап пользователей',
description: 'Бэкап всех пользователей системы',
tags: ['daily', 'users', 'production']
});
console.log(`Бэкап создан: ${backupId}`);
// Список бэкапов
const backupList = backup.listBackups();
console.log('Доступные бэкапы:', backupList.map(b => b.name));
// Восстановление из бэкапа
const restoredData = await backup.restoreBackup(backupId);
console.log(`Восстановлено элементов: ${restoredData.elements.length}`);
// Автоматическое создание бэкапов
backup.scheduleBackup(users, {
name: 'Автоматический бэкап',
interval: 60000, // каждую минуту
maxBackups: 5
});
```
## 💾 Персистентность данных
CSElement поддерживает различные адаптеры хранения в зависимости от среды выполнения:
> **⚠️ Важно о совместимости адаптеров:**
> - **MemoryStorageAdapter** ✅ - работает везде (Node.js, браузер, SSR)
> - **IndexedDBAdapter** 🌐 - только браузер (использует IndexedDB API)
> - **LocalForageAdapter** 🌐 - только браузер (использует localStorage/IndexedDB)
>
> Для SSR приложений (Next.js, Nuxt.js) используйте только **MemoryStorageAdapter**!
### ✅ MemoryStorageAdapter (Универсальный - работает везде):
```javascript
import { CSElement, MemoryStorageAdapter, PersistenceManagerImpl } from 'cs-element';
// ✅ Работает в Node.js, браузере и SSR
const adapter = new MemoryStorageAdapter({
name: 'my-app-storage',
maxSize: 1024 * 1024 * 10 // 10MB лимит
});
await adapter.initialize();
// Создаем элемент
const user = new CSElement({ data: { name: 'Alice', email: 'alice@example.com' } });
// Сохраняем в память
const saveResult = await adapter.save(user.id, user.serialize());
if (saveResult.success) {
console.log('✅ Данные сохранены в память');
}
// Загружаем из памяти
const loadResult = await adapter.load(user.id);
if (loadResult.success) {
console.log('✅ Данные загружены:', loadResult.data);
}
```
### 🌐 IndexedDBAdapter (Только браузер):
```javascript
// ⚠️ Только для браузера! Не работает в Node.js и SSR
import { CSElement } from 'cs-element';
import { IndexedDBAdapter } from 'cs-element/browser';
const adapter = new IndexedDBAdapter('MyAppDB');
await adapter.initialize();
const user = new CSElement({ data: { name: 'Bob' } });
// Сохраняем в IndexedDB (постоянное хранение)
await adapter.save([user]);
// Загружаем из IndexedDB
const loadedUsers = await adapter.load();
console.log('Загружено пользователей:', loadedUsers.length);
```
### 💾 LocalForageAdapter (Только браузер):
```javascript
// ⚠️ Только для браузера! Не работает в Node.js и SSR
import { CSElement } from 'cs-element';
import { LocalForageAdapter } from 'cs-element/browser';
const adapter = new LocalForageAdapter({
name: 'MyApp',
storeName: 'elements',
driver: 'INDEXEDDB' // автоматический выбор лучшего драйвера
});
await adapter.initialize();
const elements = [new CSElement({ data: { name: 'Charlie' } })];
await adapter.save(elements);
```
### 🌐 Универсальный пример (работает везде):
```javascript
import { CSElement, MemoryStorageAdapter } from 'cs-element';
// Создаем универсальный адаптер
const createAdapter = () => {
return new MemoryStorageAdapter({
name: 'universal-storage',
maxSize: 1024 * 1024 * 50 // 50MB
});
};
const adapter = createAdapter();
await adapter.initialize();
// Создаем и сохраняем элемент
const element = new CSElement({ data: { message: 'Hello World' } });
const result = await adapter.save(element.id, element.serialize());
console.log('Результат сохранения:', result.success);
```
### 🌐 Браузерный пример (HTML):
```html
```
## ⚡ Web Workers для производительности (Node.js)
Выполнение тяжелых операций в фоновых потоках в Node.js:
```javascript
// ⚠️ Только для Node.js!
import { WorkerManager, WorkerOperationType } from 'cs-element/workers/nodejs';
const workerManager = new WorkerManager({
maxConcurrentOperations: 4,
timeoutMs: 30000,
enableLogging: true,
enableProfiling: true
});
await workerManager.initialize();
// Создаем большую структуру данных
const largeElement = new CSElement('large-data');
const largeData = Array(10000).fill(null).map((_, i) => ({
id: i,
value: `Item ${i}`,
nested: { deep: { data: Array(100).fill(i) } }
}));
await largeElement.setData('items', largeData);
// Сериализация в воркере (не блокирует UI)
const serializationResult = await workerManager.executeOperation({
id: 'serialize-large',
type: WorkerOperationType.SERIALIZE_ELEMENT,
timestamp: Date.now(),
payload: {
elementId: 'large-data',
options: {
includeChildren: true,
includeData: true,
compression: true
}
}
});
console.log('Сериализация завершена:', serializationResult.success);
// Вычисление diff в воркере
const element1 = new CSElement('v1');
const element2 = new CSElement('v2');
await element1.setData('version', 1);
await element2.setData('version', 2);
const diffResult = await workerManager.executeOperation({
id: 'compute-diff',
type: WorkerOperationType.COMPUTE_DIFF,
timestamp: Date.now(),
payload: {
sourceElementId: 'v1',
targetElementId: 'v2',
algorithm: 'myers'
}
});
console.log('Различия вычислены:', diffResult.result);
// Статус воркеров
const poolStatus = workerManager.getPoolStatus();
console.log('Статус пула воркеров:', {
активных: poolStatus.activeWorkers,
всего: poolStatus.totalWorkers,
в_очереди: poolStatus.queuedOperations
});
```
## 💾 Персистентность данных (расширенная)
Продвинутые возможности персистентности с правильным выбором адаптера:
```javascript
import {
CSElement,
MemoryStorageAdapter, // ✅ Универсальный
} from 'cs-element';
import {
IndexedDBAdapter, // 🌐 Только браузер
LocalForageAdapter // 🌐 Только браузер
} from 'cs-element/browser';
// Универсальный адаптер (работает везде)
const memoryAdapter = new MemoryStorageAdapter({
name: 'universal-storage',
maxSize: 1024 * 1024 * 100, // 100MB
ttl: 1000 * 60 * 60, // 1 час
compression: true,
encryption: false
});
// IndexedDB адаптер (только браузер)
const indexedDBAdapter = new IndexedDBAdapter('CSElementDB');
// LocalForage адаптер (только браузер)
const localForageAdapter = new LocalForageAdapter({
name: 'CSElementStorage',
storeName: 'elements',
driver: 'INDEXEDDB'
});
// Инициализация адаптеров
await memoryAdapter.initialize();
// Создаем элементы
const user = new CSElement({
data: {
name: 'Persistent User',
settings: { theme: 'dark', language: 'ru' }
}
});
// Сохранение в память (работает везде)
const memoryResult = await memoryAdapter.save(user.id, user.serialize());
console.log('✅ Сохранено в память:', memoryResult.success);
// Загрузка из памяти
const memoryLoaded = await memoryAdapter.load(user.id);
if (memoryLoaded.success) {
console.log('✅ Загружено из памяти:', memoryLoaded.data);
}
// Статистика адаптера
const stats = await memoryAdapter.getStats();
console.log('📊 Статистика хранилища:', {
элементов: stats.totalRecords,
размер: `${stats.totalSize} байт`,
средний_размер: `${stats.averageSize} байт`
});
// Для браузера - дополнительное сохранение в IndexedDB
if (typeof window !== 'undefined' && window.indexedDB) {
await indexedDBAdapter.initialize();
await indexedDBAdapter.save([user]);
console.log('✅ Дополнительно сохранено в IndexedDB');
}
```
## 🔄 Реактивность в действии
Одна из самых мощных возможностей - автоматическое отслеживание изменений:
```typescript
// Создаем реактивный запрос для отслеживания активных пользователей
const activeUsersQuery = CSElement.query()
.where('active', true)
.live();
// Подписываемся на изменения
activeUsersQuery.subscribe(users => {
console.log(`📊 Активных пользователей: ${users.length}`);
users.forEach(user => {
console.log(` - ${user.getData('name')} (${user.getData('role')})`);
});
});
// Теперь при изменении данных пользователей статистика обновится автоматически!
await charlie.setData('active', true);
// Автоматически выведет обновленную статистику
```
## 🎯 Типизированные элементы
Создадим строго типизированные элементы с валидацией:
```typescript
// Определяем схему пользователя
const UserSchema = {
name: {
type: 'string',
required: true,
minLength: 2,
maxLength: 50
},
email: {
type: 'string',
required: true,
pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
},
age: {
type: 'number',
min: 18,
max: 120
},
role: {
type: 'string',
enum: ['admin', 'user', 'guest'],
default: 'user'
}
};
// Создаем типизированного пользователя
const typedUser = new CSElement('typed-user', { schema: UserSchema });
try {
await typedUser.setData('name', 'Jane Doe');
await typedUser.setData('email', 'jane@example.com');
await typedUser.setData('age', 25);
await typedUser.setData('role', 'admin');
console.log('✅ Типизированный пользователь создан успешно');
} catch (error) {
console.error('❌ Ошибка валидации:', error.message);
}
```
## 🎯 Работа с событиями
CSElement имеет встроенную систему событий:
```typescript
// Подписываемся на изменения данных
user.on('data:changed', (element, key, newValue, oldValue) => {
console.log(`🔄 ${key}: ${oldValue} → ${newValue}`);
});
// Подписываемся на добавление дочерних элементов
project.on('child:added', (parent, child) => {
console.log(`➕ Добавлен дочерний элемент: ${child.id}`);
});
// Глобальные события
CSElement.on('element:created', (element) => {
console.log(`🆕 Создан элемент: ${element.id}`);
});
// События плагинов
backup.on('backup:created', (backupId, metadata) => {
console.log(`💾 Создан бэкап: ${metadata.name}`);
});
network.on('sync:completed', (elementId, success) => {
console.log(`🌐 Синхронизация ${elementId}: ${success ? 'успешно' : 'ошибка'}`);
});
```
## 🧹 Auto-Dispose: Автоматическая очистка памяти
CSElement включает мощную систему автоматической очистки памяти:
```javascript
import { AutoDisposeManager, DisposeStrategy } from 'cs-element';
// Настройка Auto-Dispose системы
const autoDispose = new AutoDisposeManager({
defaultStrategy: DisposeStrategy.TIME_BASED,
timeThreshold: 300000, // 5 минут неактивности
memoryThreshold: 100 * 1024 * 1024, // 100MB
enableAutoCleanup: true,
cleanupInterval: 60000, // проверка каждую минуту
enableLogging: true
});
// Создаем элементы с автоочисткой
const tempUser = new CSElement('temp-user');
await tempUser.setData('name', 'Временный пользователь');
// Регистрируем элемент для автоочистки
autoDispose.register(tempUser, {
strategy: DisposeStrategy.TIME_BASED,
timeThreshold: 120000, // 2 минуты для этого элемента
onDispose: (element) => {
console.log(`🧹 Автоочистка элемента: ${element.id}`);
}
});
// Элемент будет автоматически удален через 2 минуты неактивности
// Или можно принудительно запустить очистку
await autoDispose.cleanup();
// Статистика использования памяти
const stats = autoDispose.getMemoryStats();
console.log(`📊 Память: ${stats.totalElements} элементов, ${stats.totalMemoryMB}MB`);
```
## 🏗️ Service Registry: Внедрение зависимостей
Управление сервисами и внедрение зависимостей:
```javascript
import { ServiceRegistry, ServiceScope } from 'cs-element';
// Создаем реестр сервисов
const serviceRegistry = new ServiceRegistry();
// Регистрируем сервисы
class UserService {
async getUser(id: string) {
return { id, name: `User ${id}`, email: `user${id}@example.com` };
}
}
class NotificationService {
constructor(private userService: UserService) {}
async notifyUser(userId: string, message: string) {
const user = await this.userService.getUser(userId);
console.log(`📧 Уведомление для ${user.name}: ${message}`);
}
}
// Регистрация сервисов
serviceRegistry.register('userService', UserService, ServiceScope.SINGLETON);
serviceRegistry.register('notificationService', NotificationService, ServiceScope.SINGLETON, ['userService']);
// Получение сервисов с автоматическим внедрением зависимостей
const notificationService = serviceRegistry.get('notificationService');
await notificationService.notifyUser('123', 'Добро пожаловать!');
// Использование в элементах
const userElement = new CSElement('user-with-services');
userElement.injectService('userService', serviceRegistry.get('userService'));
```
## 📊 Visualization: Визуализация данных
Создание визуализаций структур данных:
```javascript
import { VisualizationManager, RenderEngine, LayoutAlgorithm } from 'cs-element';
// Настройка системы визуализации
const visualization = new VisualizationManager({
defaultEngine: RenderEngine.SVG,
defaultLayout: LayoutAlgorithm.HIERARCHICAL,
enableInteractivity: true,
enableAnimations: true
});
// Создаем иерархию элементов
const company = new CSElement('company');
const department1 = new CSElement('department-1');
const department2 = new CSElement('department-2');
const employee1 = new CSElement('employee-1');
const employee2 = new CSElement('employee-2');
await company.setData('name', 'TechCorp');
await department1.setData('name', 'Разработка');
await department2.setData('name', 'Маркетинг');
await employee1.setData('name', 'Алексей');
await employee2.setData('name', 'Мария');
company.withChild(department1).withChild(department2);
department1.withChild(employee1);
department2.withChild(employee2);
// ASCII визуализация для консоли
const asciiDiagram = await visualization.renderToASCII(company, {
showData: true,
maxDepth: 3,
includeIds: false
});
console.log('📋 ASCII диаграмма:\n' + asciiDiagram);
// SVG визуализация для веба
const svgDiagram = await visualization.renderToSVG(company, {
width: 800,
height: 600,
layout: LayoutAlgorithm.FORCE_DIRECTED,
showLabels: true,
enableZoom: true,
theme: 'modern'
});
// HTML интерактивная визуализация
const htmlVisualization = await visualization.renderToHTML(company, {
containerSelector: '#visualization-container',
enableDragAndDrop: true,
enableContextMenu: true,
onNodeClick: (node) => console.log(`Clicked: ${node.id}`),
onNodeHover: (node) => console.log(`Hovered: ${node.id}`)
});
```
## 🗺️ Graph Algorithms: Графовые алгоритмы
Анализ связей и поиск путей в структурах данных:
```javascript
import { GraphAlgorithms, PathfindingAlgorithm, CentralityMetric } from 'cs-element';
const graphAlgorithms = new GraphAlgorithms();
// Создаем граф связей
const nodeA = new CSElement('node-a');
const nodeB = new CSElement('node-b');
const nodeC = new CSElement('node-c');
const nodeD = new CSElement('node-d');
// Устанавливаем связи
nodeA.addRelationship(nodeB, 'connects', { weight: 5 });
nodeB.addRelationship(nodeC, 'connects', { weight: 3 });
nodeA.addRelationship(nodeC, 'connects', { weight: 8 });
nodeC.addRelationship(nodeD, 'connects', { weight: 2 });
const nodes = [nodeA, nodeB, nodeC, nodeD];
// Поиск кратчайшего пути
const shortestPath = await graphAlgorithms.findShortestPath(
nodeA.id,
nodeD.id,
nodes,
PathfindingAlgorithm.DIJKSTRA
);
console.log('🗺️ Кратчайший путь:', shortestPath.path.map(n => n.id));
console.log('📏 Длина пути:', shortestPath.distance);
// Поиск всех путей
const allPaths = await graphAlgorithms.findAllPaths(nodeA.id, nodeD.id, nodes, {
maxDepth: 10,
includeWeights: true
});
console.log(`🛤️ Найдено путей: ${allPaths.length}`);
// Анализ центральности узлов
const centrality = await graphAlgorithms.calculateCentrality(nodes, CentralityMetric.BETWEENNESS);
console.log('📊 Центральность узлов:', centrality);
// Обнаружение циклов
const cycles = await graphAlgorithms.detectCycles(nodes);
if (cycles.length > 0) {
console.log('🔄 Обнаружены циклы:', cycles);
} else {
console.log('✅ Циклов не обнаружено');
}
// Поиск компонентов связности
const components = await graphAlgorithms.findConnectedComponents(nodes);
console.log(`🔗 Компонентов связности: ${components.length}`);
```
## 🔍 Element Inspector: Глубокий анализ элементов
Детальный анализ структуры и содержимого элементов:
```javascript
import { ElementInspector, InspectionDepth, AnalysisType } from 'cs-element';
const inspector = new ElementInspector({
maxDepth: 10,
includeMetadata: true,
includeRelationships: true,
enableProfiling: true
});
// Создаем сложную структуру для анализа
const rootElement = new CSElement('complex-root');
await rootElement.setData('type', 'container');
await rootElement.setData('config', {
settings: { theme: 'dark', language: 'ru' },
features: ['analytics', 'notifications', 'sync']
});
// Глубокий анализ элемента
const inspection = await inspector.inspect(rootElement, {
depth: InspectionDepth.DEEP,
analysisTypes: [
AnalysisType.STRUCTURE,
AnalysisType.DATA_PATTERNS,
AnalysisType.RELATIONSHIPS,
AnalysisType.PERFORMANCE
]
});
console.log('🔍 Результаты анализа:');
console.log(`📊 Структура: ${inspection.structure.totalNodes} узлов, глубина ${inspection.structure.maxDepth}`);
console.log(`💾 Данные: ${inspection.dataAnalysis.totalDataPoints} точек данных`);
console.log(`🔗 Связи: ${inspection.relationships.totalRelationships} связей`);
console.log(`⚡ Производительность: ${inspection.performance.memoryUsageMB}MB памяти`);
// Поиск аномалий
const anomalies = inspector.detectAnomalies(rootElement);
if (anomalies.length > 0) {
console.log('⚠️ Обнаружены аномалии:', anomalies);
}
// Предложения по оптимизации
const optimizations = inspector.suggestOptimizations(rootElement);
console.log('💡 Предложения по оптимизации:', optimizations);
```
## 📦 Batch Operations: Массовые операции
Эффективное выполнение операций над множеством элементов:
```javascript
import { BatchOperationsManager, BatchStrategy, ExecutionMode } from 'cs-element';
const batchManager = new BatchOperationsManager({
defaultStrategy: BatchStrategy.PARALLEL,
maxConcurrency: 8,
chunkSize: 100,
enableProgressTracking: true,
enableRollback: true
});
// Создаем множество элементов
const elements = Array.from({ length: 1000 }, (_, i) => {
const element = new CSElement(`batch-element-${i}`);
return element;
});
// Массовое обновление данных
const updateOperation = await batchManager.execute({
name: 'Массовое обновление пользователей',
strategy: BatchStrategy.PARALLEL,
mode: ExecutionMode.FAIL_FAST,
operations: elements.map((element, index) => ({
type: 'setData',
target: element,
params: ['status', index % 2 === 0 ? 'active' : 'inactive']
}))
});
console.log(`✅ Обновлено ${updateOperation.successCount} из ${updateOperation.totalCount} элементов`);
// Отслеживание прогресса
batchManager.on('progress', (progress) => {
console.log(`📈 Прогресс: ${progress.completed}/${progress.total} (${progress.percentage}%)`);
});
// Массовая валидация с откатом при ошибках
const validationOperation = await batchManager.execute({
name: 'Валидация элементов',
strategy: BatchStrategy.SEQUENTIAL,
mode: ExecutionMode.CONTINUE_ON_ERROR,
enableRollback: true,
operations: elements.map(element => ({
type: 'validate',
target: element,
params: [{ required: ['status'] }]
}))
});
if (validationOperation.errors.length > 0) {
console.log(`⚠️ Ошибки валидации: ${validationOperation.errors.length}`);
// Откат изменений
await batchManager.rollback(validationOperation.operationId);
}
```
## 🧭 Navigation: Навигация по структурам
Удобная навигация и поиск в сложных структурах данных:
```javascript
import { NavigationManager, NavigationMode, SearchCriteria } from 'cs-element';
const navigation = new NavigationManager({
enableHistory: true,
maxHistorySize: 100,
enableBookmarks: true,
defaultMode: NavigationMode.DEPTH_FIRST
});
// Создаем структуру для навигации
const filesystem = new CSElement('filesystem');
const documents = new CSElement('documents');
const projects = new CSElement('projects');
const project1 = new CSElement('project-1');
const file1 = new CSElement('file-1.txt');
filesystem.withChild(documents).withChild(projects);
projects.withChild(project1);
project1.withChild(file1);
await file1.setData('content', 'Содержимое файла');
await file1.setData('size', 1024);
// Навигация по пути
const navigationResult = await navigation.navigateToPath(filesystem, ['documents', 'projects', 'project-1']);
console.log('🧭 Навигация к:', navigationResult.target.id);
// Поиск по критериям
const searchResults = await navigation.search(filesystem, {
criteria: SearchCriteria.DATA_CONTAINS,
value: 'Содержимое',
includeData: true,
maxResults: 10
});
console.log(`🔍 Найдено элементов: ${searchResults.length}`);
// Создание закладки
navigation.addBookmark('important-file', file1.id, {
name: 'Важный файл',
description: 'Файл с важным содержимым',
tags: ['important', 'document']
});
// Навигация по закладке
const bookmarkedElement = await navigation.navigateToBookmark(filesystem, 'important-file');
console.log('🔖 Переход к закладке:', bookmarkedElement.id);
// История навигации
const history = navigation.getNavigationHistory();
console.log('📚 История навигации:', history.map(h => h.elementId));
```
## 🚀 Полный пример: Система управления проектами
```javascript
// Основная библиотека
import { CSElement, PersistenceManagerImpl, MemoryStorageAdapter } from 'cs-element';
// Node.js специфичные плагины
import { BackupPlugin } from 'cs-element/plugins/backup';
import { NetworkPlugin } from 'cs-element/plugins/network';
import { SerializationPlugin } from 'cs-element/plugins/serialization';
import { WorkerManager } from 'cs-element/workers/nodejs';
class ProjectManagementSystem {
private backup: BackupPlugin;
private network: NetworkPlugin;
private serialization: SerializationPlugin;
private workers: WorkerManager;
private persistence: PersistenceManagerImpl;
constructor() {
this.initializePlugins();
}
private async initializePlugins() {
// Настройка бэкапов
this.backup = new BackupPlugin({
backupPath: './project-backups',
maxBackups: 20,
defaultCompression: 'gzip'
});
// Настройка сети
this.network = new NetworkPlugin({
baseUrl: 'https://api.projectmanager.com',
enableWebSocket: true,
wsUrl: 'wss://api.projectmanager.com/ws'
});
// Настройка сериализации
this.serialization = new SerializationPlugin({
defaultFormat: 'json',
compressionType: 'gzip',
encryptionKey: process.env.ENCRYPTION_KEY
});
// Настройка воркеров
this.workers = new WorkerManager({
maxConcurrentOperations: 6,
enableProfiling: true
});
// Настройка персистентности (универсальный адаптер)
const adapter = new MemoryStorageAdapter({
name: 'ProjectManagerDB',
maxSize: 1024 * 1024 * 100, // 100MB
ttl: 1000 * 60 * 60 * 24 // 24 часа
});
await adapter.initialize();
this.persistence = new PersistenceManagerImpl(adapter, {
autoSave: true,
saveInterval: 10000
});
await this.workers.initialize();
await this.network.connect();
}
async createProject(name: string, description: string) {
const project = new CSElement(`project-${Date.now()}`);
await project.setData('name', name);
await project.setData('description', description);
await project.setData('status', 'active');
await project.setData('created', new Date().toISOString());
// Автоматическое сохранение
await this.persistence.save(project.id, project);
// Синхронизация с сервером
await this.network.syncToServer(project);
// Создание бэкапа
await this.backup.createBackup([project], {
name: `Проект: ${name}`,
description: 'Автоматический бэкап при создании проекта'
});
console.log(`✅ Проект "${name}" создан и сохранен`);
return project;
}
async addTeamMember(projectId: string, memberData: any) {
const project = await this.persistence.load(projectId);
const member = new CSElement(`member-${Date.now()}`);
await member.setData('name', memberData.name);
await member.setData('role', memberData.role);
await member.setData('email', memberData.email);
project.withChild(member);
// Сохранение и синхронизация
await this.persistence.save(projectId, project);
await this.network.syncToServer(project);
console.log(`👤 Участник ${memberData.name} добавлен в проект`);
return member;
}
async generateReport(projectId: string) {
// Используем воркер для генерации отчета
const reportResult = await this.workers.executeOperation({
id: `report-${Date.now()}`,
type: 'GENERATE_REPORT',
timestamp: Date.now(),
payload: { projectId }
});
return reportResult.result;
}
}
// Использование
const pms = new ProjectManagementSystem();
const project = await pms.createProject('Новый веб-сайт', 'Разработка корпоративного сайта');
await pms.addTeamMember(project.id, {
name: 'Алексей Петров',
role: 'Frontend Developer',
email: 'alexey@company.com'
});
const report = await pms.generateReport(project.id);
```
## 🔄 Миграция с предыдущих версий
### Изменения в импортах
**Старый способ (до v1.0.2):**
```javascript
// ❌ Не работает - Node.js модули в браузере
import { CSElement, BackupPlugin, WorkerManager } from 'cs-element';
```
**Новый способ (v1.0.2+):**
```javascript
// ✅ Основная библиотека (работает везде)
import { CSElement } from 'cs-element';
// ✅ Node.js специфичные плагины (только для Node.js)
import { BackupPlugin } from 'cs-element/plugins/backup';
import { WorkerManager } from 'cs-element/workers/nodejs';
```
### Изменения в API
**Изменения в методах элементов:**
```javascript
// Старый API
const value = await element.getValue('key');
await element.setValue('key', 'value');
const id = element.getId();
// Новый API
const value = element.getData('key');
await element.setData('key', 'value');
const id = element.id;
```
### Браузерная совместимость
**Для существующих браузерных проектов:**
```html
```
## 🎯 Заключение
CSElement предоставляет полноценную экосистему для работы с данными:
### 🔧 Основные возможности
- **🔄 Реальная сериализация** с поддержкой JSON, YAML, MessagePack
- **🗜️ Продвинутое сжатие** (Gzip, LZ4, Brotli)
- **🌐 Сетевая синхронизация** через HTTP и WebSocket
- **💾 Надежные бэкапы** с файловыми операциями
- **⚡ Многопоточность** с Web Workers
- **💾 Универсальная персистентность** - MemoryStorageAdapter работает везде
- **🌐 Браузерная персистентность** - IndexedDB/LocalForage для постоянного хранения
- **🔒 Безопасность** с шифрованием данных
### 🚀 Продвинутые системы
- **🧹 Auto-Dispose** - автоматическая очистка памяти и управление жизненным циклом
- **🏗️ Service Registry** - внедрение зависимостей и управление сервисами
- **📊 Visualization** - визуализация данных с тремя движками рендеринга (ASCII, SVG, HTML)
- **🗺️ Graph Algorithms** - анализ связей, поиск путей, обнаружение циклов
- **🔍 Element Inspector** - глубокий анализ структуры и производительности
- **📦 Batch Operations** - массовые операции с различными стратегиями выполнения
- **🧭 Navigation** - удобная навигация по сложным структурам данных
- **🎯 Typed Elements** - строгая типизация с валидацией схем
- **🔄 Diff Engine** - сравнение элементов и three-way merge
- **📈 Performance Monitor** - мониторинг производительности в реальном времени
Все системы готовы для использования в production-окружении и предоставляют мощные инструменты для создания сложных приложений!
## 📚 Дальнейшее изучение
### Основные системы
- [Коллекции и запросы](./02-collections.md)
- [Система реактивности](./03-reactivity.md)
- [Типизированные элементы](./04-typed-elements.md)
- [Батчинг операций](./05-batching.md)
- [React интеграция](./06-react-integration.md)
- [Продвинутые возможности](./07-advanced-features.md)
- [Workers и производительность](./08-workers-and-performance.md)
- [Транзакции и блокировки](./09-transactions-and-locks.md)
- [Персистентность и адаптеры](./10-persistence-and-adapters.md)
### Специализированные системы
- [Auto-Dispose система](./15-auto-dispose-system.md)
- [Система визуализации](./16-visualization-system.md)
- [Графовые алгоритмы](./17-graph-algorithms.md)
- [Типизированные элементы (расширенные)](./18-typed-elements-advanced.md)
- [Batch операции (расширенные)](./19-batch-operations-advanced.md)
- [Service Registry](./20-service-registry.md)
- [Навигация по элементам](./21-element-navigation.md)