Ricon组态系统模块化架构指南

Ricon组态
0 阅读12分钟

目录

  1. 架构概述
  2. 模块划分
  3. 架构设计
  4. 代码质量
  5. 使用指南
  6. 最佳实践
  7. 模块开发
  8. 性能优化

技术文档

👉 演示地址：www.ricon.cloud:81 👉 官网地址：www.ricon.cloud

1. 架构概述

1.1 重构背景

stageOperation.js 原为单体文件（约8000+行代码），存在以下问题：

  • 代码臃肿，难以维护
  • 功能耦合度高，修改影响范围大
  • 团队协作困难，容易产生冲突
  • 测试困难，bug定位复杂
  • 性能问题，初始加载时间长

1.2 重构目标

通过模块化重构，实现以下目标：

  • ✅ 代码解耦 - 功能模块独立，职责单一
  • ✅ 易于维护 - 模块独立开发、测试、部署
  • ✅ 可扩展性 - 新功能以模块形式添加
  • ✅ 团队协作 - 多人并行开发，减少冲突
  • ✅ 性能优化 - 按需加载，减少初始加载时间
  • ✅ 代码质量 - 统一代码风格，提高代码可读性

1.3 架构特点

  • 协调器模式 - 轻量级核心，负责模块协调
  • 全局命名空间 - 模块通过window对象注册
  • 同步加载 - 确保执行顺序正确
  • 错误处理 - 模块未加载时提供友好提示
  • 向后兼容 - 保持原有API接口不变
  • 模块化设计 - 每个模块负责特定功能领域

1.4 系统优化架构

在v1.0.1版本中，系统进行了全面的架构优化，新增了以下核心模块：

  • 统一配置中心 (ConfigCenter.js) - 集中管理所有配置项，支持动态加载和热更新
  • 初始化管理器 (InitManager.js) - 智能管理模块依赖关系，优化初始化顺序
  • 模块管理器 (ModuleManager.js) - 实现动态模块加载，按需加载模块减少初始加载时间
  • 资源加载器 (ResourceLoader.js) - 实现异步资源加载，提高首屏加载速度
  • 内存泄漏防护 (MemoryLeakProtector.js) - 自动跟踪和清理资源，提高系统稳定性
  • 安全管理器 (SecurityManager.js) - 内置XSS和CSRF防护机制，增强系统安全性

这些优化模块的加入，使得系统在性能、稳定性和安全性方面得到了显著提升。

2. 模块划分

2.1 模块分类

将原有功能划分为 14个独立模块，按功能领域分类：

2.1.1 核心功能模块

模块文件功能说明主要方法职责范围
stageInit.js场景初始化模块initStage, initResolution, initGuides, initBackgroundImage负责Konva舞台的初始化和基础设置
stageProperties.js场景属性配置模块initStageProperties, setStageSize, setStageBackground, setStageGrid管理画布大小、背景、网格等属性
stageConfig.js场景配置模块setBackgroundFull, setStageCache, setConditionStage, getStageJson处理场景缓存、条件配置和JSON导出

2.1.2 通信与数据模块

模块文件功能说明主要方法职责范围
stageCommunication.js通信配置模块initCommunicationConfig, renderHttpConfigListWebSocket/MQTT/HTTP通信配置管理
stageUtils.js工具函数模块getStageAllDataKey, checkArray, getStageBase64, dealImage通用工具函数和数据处理

2.1.3 用户交互模块

模块文件功能说明主要方法职责范围
stageViewControl.js场景视图控制模块stageMaxMin, stageChange, addMouseListens, scrollFunc缩放、平移、鼠标事件处理
stageKeyboard.js键盘事件模块setStageKeyboardEvent, topButtonFun快捷键和键盘事件绑定
stageGuides.js辅助线模块getAnchorArray, getLineGuideStops, addLayerDragMove, drawGuides对齐辅助线和拖拽对齐

2.1.4 组件操作模块

模块文件功能说明主要方法职责范围
stageModule.js组件管理模块deleteModule, lockModule, addModuleToStage, addLineEdit组件的增删改和状态管理
stageAlign.js组件对齐模块alignModule多组件对齐和分布操作
moduleAttributes.js组件属性模块showModuleAttr, setModuleAttr属性面板显示和更新

2.1.5 系统功能模块

模块文件功能说明主要方法职责范围
stageUndoRedo.js撤销恢复模块ctrlZ, ctrlY, stackZfun基于栈的撤销/恢复机制
stageImportExport.js导入导出模块import, export场景数据的导入导出功能
stagePanels.js组件库面板模块setBasicPanel, setGraphicPanel, setTemplatePanel各类组件库的面板管理

2.2 模块依赖关系

┌─────────────────────────────────────────────────┐
│              stageOperation.js                  │
│              (协调器核心)                       │
└─────────────────┬───────────────────────────────┘
                  │
    ┌─────────────┼─────────────┐
    │             │             │
┌───▼────┐  ┌────▼─────┐  ┌────▼─────┐
│stageInit│  │stageUtils│  │stageConfig│
└─────────┘  └──────────┘  └──────────┘
    │             │             │
    │             │             │
┌───▼────┐  ┌────▼─────┐  ┌────▼─────┐
│stageView│  │stageProps│  │stageComm │
│Control  │  │          │  │          │
└─────────┘  └──────────┘  └──────────┘
    │
    │
┌───▼────┐  ┌────▼─────┐  ┌────▼─────┐
│stageKeys│  │stageGuides│  │stageModule│
└─────────┘  └──────────┘  └──────────┘
    │             │             │
    │             │             │
┌───▼────┐  ┌────▼─────┐  ┌────▼─────┐
│stageAlign│  │moduleAttr│  │stageUndo │
└─────────┘  └──────────┘  └──────────┘
    │
    │
┌───▼────┐  ┌────▼─────┐
│stageImport│  │stagePanels│
└──────────┘  └──────────┘

2.3 模块接口规范

2.3.1 模块导出规范

所有模块通过全局命名空间导出，遵循统一规范：

// 模块导出示例
(function() {
    'use strict';

    /**
     * StageInit - 场景初始化模块
     * @namespace StageInit
     */
    window.StageInit = {
        /**
         * 初始化场景
         * @param {string} stageId - 场景ID
         * @param {HTMLElement} element - 容器元素
         * @param {Object} stageObj - 场景对象
         * @param {string} status - 场景状态
         */
        initStage: function(stageId, element, stageObj, status) {
            // 实现代码
        },

        /**
         * 初始化分辨率
         * @param {number} width - 宽度
         * @param {number} height - 高度
         */
        initResolution: function(width, height) {
            // 实现代码
        }
    };
})();

2.3.2 方法签名规范

  • 参数验证 - 所有公共方法都要验证参数
  • 错误处理 - 使用try-catch捕获异常
  • 返回值 - 统一返回格式，包含成功/失败状态
// 方法签名示例
initStage: function(stageId, element, stageObj, status) {
    try {
        // 参数验证
        if (!stageId || typeof stageId !== 'string') {
            throw new Error('Invalid stageId parameter');
        }

        if (!element || !(element instanceof HTMLElement)) {
            throw new Error('Invalid element parameter');
        }

        // 核心逻辑
        const result = this._initializeStage(stageId, element, stageObj, status);

        return {
            success: true,
            data: result
        };

    } catch (error) {
        console.error('StageInit.initStage error:', error);
        return {
            success: false,
            error: error.message
        };
    }
}

3. 架构设计

3.1 协调器模式

stageOperation.js 作为轻量级协调器，主要职责包括：

3.1.1 核心对象管理

// 协调器核心对象
function StageOperation(element) {
    this.element = element;
    this.stage = null;
    this.layer = null;
    this.moduleObj = {};
    this.GUIDELINE_OFFSET = 5;
    this.currentModule = null;
    this.selectedModules = [];
    this.historyStack = {
        undo: [],
        redo: []
    };
}

3.1.2 方法路由

// 方法路由示例
StageOperation.prototype.initStage = function(stageId, element, stageObj, status) {
    // 检查模块是否已加载
    if (!window.StageInit) {
        console.error('StageInit模块未加载，无法初始化场景');
        return false;
    }

    // 转发到具体模块
    return window.StageInit.initStage.call(this, stageId, element, stageObj, status);
};

StageOperation.prototype.addModuleToStage = function(moduleType, x, y) {
    // 检查模块是否已加载
    if (!window.StageModule) {
        console.error('StageModule模块未加载，无法添加组件');
        return false;
    }

    // 转发到具体模块
    return window.StageModule.addModuleToStage.call(this, moduleType, x, y);
};

3.1.3 生命周期管理

// 生命周期管理
StageOperation.prototype.initialize = function() {
    try {
        // 1. 初始化场景
        if (window.StageInit) {
            window.StageInit.initStage.call(this);
        }

        // 2. 设置场景属性
        if (window.StageProperties) {
            window.StageProperties.initStageProperties.call(this);
        }

        // 3. 初始化视图控制
        if (window.StageViewControl) {
            window.StageViewControl.initViewControl.call(this);
        }

        // 4. 绑定键盘事件
        if (window.StageKeyboard) {
            window.StageKeyboard.setStageKeyboardEvent.call(this);
        }

        console.log('StageOperation初始化完成');
        return true;

    } catch (error) {
        console.error('StageOperation初始化失败:', error);
        return false;
    }
};

3.2 模块通信机制

3.2.1 全局命名空间

采用全局命名空间导出模式，确保模块间的松耦合通信：

// 模块注册
window.StageInit = {
    initStage: function() { /* ... */ },
    initResolution: function() { /* ... */ }
};

window.StageProperties = {
    setStageSize: function() { /* ... */ },
    setStageBackground: function() { /* ... */ }
};

// 模块间通信
window.StageInit.initStage = function() {
    // 调用其他模块的方法
    if (window.StageProperties) {
        window.StageProperties.setStageSize(this.stageWidth, this.stageHeight);
    }
};

3.2.2 动态检查

在调用模块方法前进行动态检查：

// 动态检查模块加载状态
StageOperation.prototype._checkModuleLoaded = function(moduleName) {
    const module = window[moduleName];

    if (!module) {
        console.error(`${moduleName}模块未加载，请先加载该模块`);
        return false;
    }

    return true;
};

// 使用示例
StageOperation.prototype.initStage = function() {
    if (!this._checkModuleLoaded('StageInit')) {
        return false;
    }

    return window.StageInit.initStage.apply(this, arguments);
};

3.2.3 错误处理

模块未加载时提供友好的错误提示：

// 统一的错误处理
StageOperation.prototype._handleModuleError = function(moduleName, methodName, error) {
    const errorMessage = `
模块调用失败

错误信息：${error.message}
模块名称：${moduleName}
方法名称：${methodName}

可能原因：
1. 模块文件未正确加载
2. 模块加载顺序错误
3. 模块依赖未满足

解决方案：
1. 检查模块文件路径是否正确
2. 确认模块加载顺序
3. 查看浏览器控制台详细错误信息
    `;

    console.error(errorMessage);

    // 显示用户友好的错误提示
    if (window.layer) {
        layer.msg(`系统错误：${moduleName}模块异常`, {
            icon: 2,
            time: 5000
        });
    }
};

3.3 加载机制

3.3.1 加载顺序

采用同步加载策略，确保执行顺序的正确性：

<!-- 模块按依赖顺序加载 -->
<head>
    <!-- 基础工具模块 -->
    <script src="assets/js/core/stage/stageUtils.js"></script>

    <!-- 核心初始化模块 -->
    <script src="assets/js/core/stage/stageInit.js"></script>
    <script src="assets/js/core/stage/stageProperties.js"></script>
    <script src="assets/js/core/stage/stageConfig.js"></script>

    <!-- 通信配置模块 -->
    <script src="assets/js/core/stage/stageCommunication.js"></script>

    <!-- 用户交互模块 -->
    <script src="assets/js/core/stage/stageViewControl.js"></script>
    <script src="assets/js/core/stage/stageKeyboard.js"></script>
    <script src="assets/js/core/stage/stageGuides.js"></script>

    <!-- 组件操作模块 -->
    <script src="assets/js/core/stage/stageModule.js"></script>
    <script src="assets/js/core/stage/stageAlign.js"></script>
    <script src="assets/js/core/stage/moduleAttributes.js"></script>

    <!-- 系统功能模块 -->
    <script src="assets/js/core/stage/stageUndoRedo.js"></script>
    <script src="assets/js/core/stage/stageImportExport.js"></script>
    <script src="assets/js/core/stage/stagePanels.js"></script>

    <!-- 场景操作核心协调器（必须在所有模块之后） -->
    <script src="assets/js/core/stageOperation.js"></script>
</head>

3.3.2 加载要求

  • 严格依赖顺序 - 所有模块必须按照依赖关系顺序加载
  • 协调器最后加载 - stageOperation.js 必须在所有功能模块之后加载
  • HTML执行顺序 - 确保在 editor.js 执行前所有模块已就绪

3.3.3 加载验证

// 模块加载验证
function verifyModulesLoaded() {
    const requiredModules = [
        'StageInit',
        'StageProperties',
        'StageConfig',
        'StageCommunication',
        'StageUtils',
        'StageViewControl',
        'StageKeyboard',
        'StageGuides',
        'StageModule',
        'StageAlign',
        'ModuleAttributes',
        'StageUndoRedo',
        'StageImportExport',
        'StagePanels'
    ];

    const missingModules = [];

    requiredModules.forEach(moduleName => {
        if (!window[moduleName]) {
            missingModules.push(moduleName);
        }
    });

    if (missingModules.length > 0) {
        console.error('以下模块未正确加载:', missingModules);
        alert(`系统初始化失败，缺少必要模块：\n${missingModules.join('\n')}`);
        return false;
    }

    console.log('所有模块加载验证通过');
    return true;
}

// 在页面加载完成后验证
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(verifyModulesLoaded, 100); // 延迟验证，确保所有脚本加载完成
});

4. 代码质量

4.1 语法规范

所有模块已完成全面的代码质量优化，符合现代JavaScript开发规范：

4.1.1 严格模式

// 所有模块都使用严格模式
'use strict';

(function() {
    'use strict';

    window.StageInit = {
        // 模块代码
    };
})();

4.1.2 变量声明

// ✅ 正确：使用const/let
const MAX_SIZE = 1000;
let currentStage = null;

// ❌ 错误：避免使用var
var oldVariable = 'deprecated';

4.1.3 函数定义

// ✅ 正确：使用函数表达式
const initStage = function(stageId, element) {
    // 函数体
};

// ✅ 正确：使用箭头函数（适用于回调）
const handleClick = (event) => {
    // 事件处理
};

// ❌ 错误：避免函数声明提升
function deprecatedFunction() {
    // 不推荐
}

4.1.4 相等比较

// ✅ 正确：使用严格相等
if (value === null) {
    // 处理null值
}

if (typeof obj !== 'undefined') {
    // 检查类型
}

// ❌ 错误：避免使用==
if (value == null) {  // 不推荐
    // ...
}

4.2 命名规范

4.2.1 变量命名

// ✅ 正确：camelCase命名
const stageWidth = 1920;
const stageHeight = 1080;
let currentModule = null;

// ✅ 正确：布尔值使用is/has/can前缀
const isInitialized = false;
const hasPermission = true;
const canEdit = false;

4.2.2 常量命名

// ✅ 正确：UPPER_SNAKE_CASE
const MAX_STAGE_WIDTH = 5000;
const MIN_STAGE_HEIGHT = 100;
const DEFAULT_FONT_SIZE = 14;
const GUIDELINE_OFFSET = 5;

4.2.3 类名命名

// ✅ 正确：PascalCase
class StageOperation {
    constructor(element) {
        this.element = element;
    }
}

// 模块使用PascalCase
window.StageInit = {
    // 模块方法
};

4.2.4 语义化命名

// ✅ 正确：语义化命名
const calculateModulePosition = function(x, y) {
    return { x: x, y: y };
};

const updateStageData = function(newData) {
    // 更新场景数据
};

// ❌ 错误：无意义的命名
const func1 = function(a, b) {  // 不推荐
    return a + b;
};

4.3 代码风格

4.3.1 注释规范

/**
 * 初始化场景
 * @namespace StageInit
 */
window.StageInit = {
    /**
     * 初始化场景舞台
     * @param {string} stageId - 场景唯一标识
     * @param {HTMLElement} element - 容器元素
     * @param {Object} stageObj - 场景配置对象
     * @param {string} status - 场景状态
     * @returns {boolean} 初始化是否成功
     */
    initStage: function(stageId, element, stageObj, status) {
        try {
            // 参数验证
            if (!this._validateParams(stageId, element)) {
                return false;
            }

            // 核心初始化逻辑
            this._createStage(element);
            this._setupEventListeners();
            this._initializeComponents(stageObj);

            return true;
        } catch (error) {
            console.error('场景初始化失败:', error);
            return false;
        }
    }
};

4.3.2 缩进和格式

// ✅ 正确：4空格缩进，合理的空行
const complexFunction = function(param1, param2, param3) {
    // 参数验证
    if (!param1 || !param2) {
        throw new Error('参数不能为空');
    }

    // 数据处理
    const result = this.processData(param1, param2);

    // 结果验证
    if (!result) {
        return null;
    }

    // 返回处理结果
    return {
        success: true,
        data: result,
        timestamp: Date.now()
    };
};

4.3.3 行长度限制

// ✅ 正确：单行不超过120字符
const longUrl = 'https://api.example.com/v1/data?param1=value1&param2=value2&param3=value3';

// 如果超过限制，使用换行
const veryLongUrl = 'https://api.example.com/v1/data?' +
    'param1=value1&' +
    'param2=value2&' +
    'param3=value3';

4.4 性能优化

4.4.1 避免重复计算

// ✅ 正确：缓存重复使用的值
const getStageComponents = function() {
    // 缓存stage引用
    const stage = this.stage;
    if (!stage) return [];

    // 缓存查找结果
    const components = stage.find('Group');
    return components || [];
};

// ❌ 错误：重复查找
const badExample = function() {
    // 每次调用都重新查找
    return this.stage.find('Group') || [];
};

4.4.2 减少全局查找

// ✅ 正确：局部变量缓存全局对象
const initModule = function() {
    const $ = window.$;  // 缓存jQuery
    const layer = window.layer;  // 缓存layer

    // 使用缓存的引用
    $(element).on('click', handler);
    layer.msg('初始化完成');
};

4.4.3 循环优化

// ✅ 正确：避免在循环中进行DOM操作
const updateComponents = function(components) {
    // 先收集需要更新的组件
    const updates = [];

    for (let i = 0, len = components.length; i < len; i++) {
        const component = components[i];
        if (component.needsUpdate) {
            updates.push(component);
        }
    }

    // 批量更新
    updates.forEach(component => {
        component.update();
    });
};

5. 使用指南

5.1 HTML加载配置

在 editor.html 中按依赖顺序加载模块：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ricon组态编辑器</title>
    
    <!-- 基础库 -->
    <script src="assets/js/libs/jquery.min.js"></script>
    <script src="assets/js/libs/konva.min.js"></script>
    <script src="assets/js/libs/layui/layui.js"></script>
    
    <!-- 工具模块 -->
    <script src="assets/js/common/tool.js"></script>
    
    <!-- 模块化架构 -->
    <!-- 1. 基础工具模块 -->
    <script src="assets/js/core/stage/stageUtils.js"></script>
    
    <!-- 2. 核心初始化模块 -->
    <script src="assets/js/core/stage/stageInit.js"></script>
    <script src="assets/js/core/stage/stageProperties.js"></script>
    <script src="assets/js/core/stage/stageConfig.js"></script>
    
    <!-- 3. 通信配置模块 -->
    <script src="assets/js/core/stage/stageCommunication.js"></script>
    
    <!-- 4. 用户交互模块 -->
    <script src="assets/js/core/stage/stageViewControl.js"></script>
    <script src="assets/js/core/stage/stageKeyboard.js"></script>
    <script src="assets/js/core/stage/stageGuides.js"></script>
    
    <!-- 5. 组件操作模块 -->
    <script src="assets/js/core/stage/stageModule.js"></script>
    <script src="assets/js/core/stage/stageAlign.js"></script>
    <script src="assets/js/core/stage/moduleAttributes.js"></script>
    
    <!-- 6. 系统功能模块 -->
    <script src="assets/js/core/stage/stageUndoRedo.js"></script>
    <script src="assets/js/core/stage/stageImportExport.js"></script>
    <script src="assets/js/core/stage/stagePanels.js"></script>
    
    <!-- 7. 场景操作核心协调器 -->
    <script src="assets/js/core/stageOperation.js"></script>
    
    <!-- 8. 编辑器业务逻辑 -->
    <script src="assets/js/modules/editor.js"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

5.2 模块使用示例

5.2.1 场景初始化

// 初始化场景
const stageOper = new StageOperation(document.getElementById('stage-container'));

// 初始化舞台
stageOper.initStage('stage_001', document.getElementById('stage-container'), stageObj, 'edit');

// 设置场景大小
stageOper.setStageSize(1920, 1080);

// 添加组件
const moduleId = stageOper.addModuleToStage('Text', 100, 100);

// 设置组件属性
stageOper.setModuleAttr(moduleId, {
    text: 'Hello World',
    fontSize: 24,
    fill: '#333333'
});

5.2.2 组件操作

// 选择组件
stageOper.selectModule(moduleId);

// 移动组件
stageOper.moveModule(moduleId, 200, 200);

// 删除组件
stageOper.deleteModule(moduleId);

// 对齐组件
stageOper.alignModule(['module1', 'module2'], 'left');

5.2.3 场景管理

// 保存场景
const stageJson = stageOper.getStageJson();
apiClient.saveStage(stageJson, stageId);

// 导入场景
stageOper.import(stageJson);

// 导出场景
const exportedData = stageOper.export();
downloadJson(exportedData, 'stage.json');

5.3 调试技巧

5.3.1 模块加载检查

// 检查模块是否加载
if (window.StageInit) {
    console.log('StageInit模块已加载');
} else {
    console.error('StageInit模块未加载');
}

// 检查模块方法
if (window.StageModule && typeof window.StageModule.addModuleToStage === 'function') {
    console.log('StageModule.addModuleToStage方法可用');
} else {
    console.error('StageModule.addModuleToStage方法不可用');
}

5.3.2 性能调试

// 性能监控
const start = performance.now();
stageOper.initStage('stage_001', element, stageObj, 'edit');
const end = performance.now();
console.log(`场景初始化耗时: ${end - start}ms`);

// 内存监控
console.log('当前内存使用:', performance.memory);

6. 最佳实践

6.1 模块设计

6.1.1 单一职责原则

  • 一个模块只负责一个功能领域
  • 模块内的方法应该紧密相关
  • 避免模块间的耦合

6.1.2 接口设计

  • 清晰的方法命名 - 使用语义化的方法名
  • 明确的参数和返回值 - 详细的参数验证和统一的返回格式
  • 完善的文档 - 每个方法都应该有详细的注释

6.1.3 错误处理

  • 统一的错误处理机制
  • 友好的错误提示
  • 详细的错误日志

6.2 代码组织

6.2.1 目录结构

assets/
├── js/
│   ├── core/              # 核心模块
│   │   ├── stage/         # 场景相关模块
│   │   ├── stageOperation.js  # 协调器核心
│   ├── modules/           # 业务模块
│   ├── common/            # 通用工具
│   └── libs/              # 第三方库

6.2.2 文件命名

  • 模块文件：camelCase.js（如：stageInit.js）
  • 工具文件：camelCase.js（如：stageUtils.js）
  • 协调器：camelCase.js（如：stageOperation.js）

6.2.3 代码风格

  • 缩进：4个空格
  • 换行：每行不超过120字符
  • 空行：合理的空行分隔不同逻辑块
  • 注释：详细的函数注释和关键代码注释

6.3 性能优化

6.3.1 加载优化

  • 按需加载 - 只加载必要的模块
  • 缓存 - 缓存常用数据和计算结果
  • 预加载 - 预加载即将使用的资源

6.3.2 运行时优化

  • 减少DOM操作 - 批量更新DOM
  • 事件委托 - 使用事件委托减少事件监听器
  • 避免频繁重绘 - 合理使用Konva的图层

6.3.3 内存管理

  • 及时清理 - 清理不再使用的对象和事件监听器
  • 避免内存泄漏 - 正确处理循环引用
  • 使用内存泄漏防护 - 利用MemoryLeakProtector

7. 模块开发

7.1 开发流程

7.1.1 创建新模块

  1. 创建模块文件 - 在 assets/js/core/stage/ 目录创建新的模块文件
  2. 定义模块结构 - 按照模块导出规范定义模块
  3. 实现核心功能 - 实现模块的核心方法
  4. 添加注释 - 为模块和方法添加详细注释
  5. 注册模块 - 将模块注册到全局命名空间
  6. 更新加载顺序 - 在HTML文件中添加模块加载

7.1.2 模块模板

// 模块模板
(function() {
    'use strict';

    /**
     * NewModule - 新模块
     * @namespace NewModule
     */
    window.NewModule = {
        /**
         * 模块初始化
         * @param {Object} context - 上下文对象
         * @returns {Object} 初始化结果
         */
        init: function(context) {
            try {
                // 参数验证
                if (!context) {
                    throw new Error('Invalid context parameter');
                }

                // 初始化逻辑
                this._initialize(context);

                return {
                    success: true,
                    message: '模块初始化成功'
                };
            } catch (error) {
                console.error('NewModule.init error:', error);
                return {
                    success: false,
                    error: error.message
                };
            }
        },

        /**
         * 私有方法
         * @private
         */
        _initialize: function(context) {
            // 实现初始化逻辑
        }
    };
})();

7.1.3 协调器集成

// 在stageOperation.js中添加方法路由
StageOperation.prototype.newMethod = function(param1, param2) {
    // 检查模块是否已加载
    if (!window.NewModule) {
        console.error('NewModule模块未加载，无法执行操作');
        return false;
    }

    // 转发到具体模块
    return window.NewModule.newMethod.call(this, param1, param2);
};

7.2 测试与调试

7.2.1 单元测试

// 模块测试示例
function testNewModule() {
    console.log('开始测试NewModule模块');

    // 测试初始化
    const initResult = window.NewModule.init({ test: 'data' });
    console.log('初始化测试:', initResult);

    // 测试其他方法
    // ...

    console.log('NewModule模块测试完成');
}

// 运行测试
testNewModule();

7.2.2 调试技巧

  • 浏览器开发者工具 - 使用Console和Sources面板
  • 断点调试 - 在关键位置设置断点
  • 日志记录 - 在关键位置添加console.log
  • 性能分析 - 使用Performance面板分析性能

8. 性能优化

8.1 模块加载优化

8.1.1 按需加载

  • 动态导入 - 使用import()动态加载模块
  • 条件加载 - 根据需要加载模块
  • 懒加载 - 延迟加载非关键模块

8.1.2 缓存策略

  • 模块缓存 - 缓存已加载的模块
  • 数据缓存 - 缓存计算结果和API响应
  • 资源缓存 - 缓存静态资源

8.2 运行时优化

8.2.1 渲染优化

  • 图层管理 - 合理使用Konva的图层
  • 批量更新 - 批量处理DOM操作
  • 减少重绘 - 避免频繁的画面重绘

8.2.2 事件处理

  • 事件委托 - 使用事件委托减少事件监听器
  • 防抖节流 - 对频繁事件进行防抖或节流处理
  • 事件清理 - 及时清理不再需要的事件监听器

8.2.3 内存管理

  • 资源清理 - 及时清理不再使用的资源
  • 避免内存泄漏 - 正确处理循环引用
  • 内存监控 - 定期监控内存使用情况

8.3 网络优化

8.3.1 资源加载

  • 资源压缩 - 压缩JavaScript和CSS文件
  • 资源合并 - 合并多个小文件
  • CDN加速 - 使用CDN加速静态资源

8.3.2 API优化

  • 批量请求 - 合并多个API请求
  • 缓存API响应 - 缓存API响应数据
  • 按需请求 - 只请求必要的数据

附录

A. 模块依赖表

模块依赖模块被依赖模块
StageInitStageUtilsStageProperties, StageViewControl
StagePropertiesStageInitStageConfig
StageConfigStageProperties无
StageCommunication无无
StageUtils无所有模块
StageViewControlStageInitStageKeyboard, StageGuides
StageKeyboardStageViewControl无
StageGuidesStageViewControl无
StageModuleStageUtilsStageAlign, ModuleAttributes
StageAlignStageModule无
ModuleAttributesStageModule无
StageUndoRedoStageModule无
StageImportExportStageModule无
StagePanelsStageModule无

B. 代码质量检查清单

  • 使用严格模式
  • 变量使用const/let声明
  • 函数使用函数表达式
  • 使用严格相等比较
  • 命名规范符合要求
  • 注释完整详细
  • 代码缩进和格式正确
  • 行长度不超过120字符
  • 避免重复计算
  • 减少全局查找
  • 循环优化
  • 错误处理完善

C. 性能优化检查清单

  • 按需加载模块
  • 缓存常用数据
  • 减少DOM操作
  • 使用事件委托
  • 合理使用图层
  • 及时清理资源
  • 压缩静态资源
  • 合并API请求
  • 监控内存使用
  • 分析性能瓶颈

Ricon组态系统 - 模块化架构，让开发更简单！ 🚀

avatar
文章
阅读
粉丝