APP-Web/framework.js

/**
 * 简单HTML5前端框架
 * 作者：前端架构师
 * 创建时间：2026-03-06
 * 版本：1.0.0
 * 
 * 框架功能：
 * 1. DOM操作API
 * 2. 组件系统
 * 3. 路由功能
 * 4. 状态管理
 */

// 框架核心对象
const Framework = {
    /**
     * DOM操作API
     */
    dom: {
        /**
         * 根据选择器获取元素
         * @param {string} selector - CSS选择器
         * @param {Element} context - 上下文元素，默认为document
         * @returns {Element|null} - 匹配的元素
         */
        query: function(selector, context = document) {
            return context.querySelector(selector);
        },
        
        /**
         * 根据选择器获取多个元素
         * @param {string} selector - CSS选择器
         * @param {Element} context - 上下文元素，默认为document
         * @returns {NodeList} - 匹配的元素列表
         */
        queryAll: function(selector, context = document) {
            return context.querySelectorAll(selector);
        },
        
        /**
         * 创建元素
         * @param {string} tagName - 标签名
         * @param {Object} options - 元素属性和事件
         * @returns {Element} - 创建的元素
         */
        create: function(tagName, options = {}) {
            const element = document.createElement(tagName);
            
            // 设置属性
            if (options.attributes) {
                Object.keys(options.attributes).forEach(attr => {
                    element.setAttribute(attr, options.attributes[attr]);
                });
            }
            
            // 设置样式
            if (options.style) {
                Object.assign(element.style, options.style);
            }
            
            // 设置事件监听器
            if (options.events) {
                Object.keys(options.events).forEach(event => {
                    element.addEventListener(event, options.events[event]);
                });
            }
            
            // 设置文本内容
            if (options.text) {
                element.textContent = options.text;
            }
            
            return element;
        },
        
        /**
         * 添加事件监听器
         * @param {Element} element - 目标元素
         * @param {string} event - 事件类型
         * @param {Function} callback - 回调函数
         */
        on: function(element, event, callback) {
            element.addEventListener(event, callback);
        },
        
        /**
         * 移除事件监听器
         * @param {Element} element - 目标元素
         * @param {string} event - 事件类型
         * @param {Function} callback - 回调函数
         */
        off: function(element, event, callback) {
            element.removeEventListener(event, callback);
        },
        
        /**
         * 触发事件
         * @param {Element} element - 目标元素
         * @param {string} event - 事件类型
         * @param {Object} detail - 事件详情
         */
        trigger: function(element, event, detail = {}) {
            const customEvent = new CustomEvent(event, { detail });
            element.dispatchEvent(customEvent);
        }
    },
    
    /**
     * 组件系统
     */
    component: {
        /**
         * 注册组件
         * @param {string} name - 组件名称
         * @param {Function} constructor - 组件构造函数
         */
        register: function(name, constructor) {
            if (!this.components) {
                this.components = {};
            }
            this.components[name] = constructor;
        },
        
        /**
         * 创建组件实例
         * @param {string} name - 组件名称
         * @param {Object} props - 组件属性
         * @param {Element} container - 容器元素
         * @returns {Object} - 组件实例
         */
        create: function(name, props = {}, container = null) {
            if (!this.components || !this.components[name]) {
                throw new Error(`Component ${name} not registered`);
            }
            
            const Component = this.components[name];
            const instance = new Component(props);
            
            if (container) {
                instance.mount(container);
            }
            
            return instance;
        }
    },
    
    /**
     * 路由功能
     */
    router: {
        /**
         * 路由配置
         */
        routes: {},
        
        /**
         * 初始化路由
         */
        init: function() {
            // 监听哈希变化
            window.addEventListener('hashchange', this.handleHashChange.bind(this));
            // 初始加载
            this.handleHashChange();
        },
        
        /**
         * 注册路由
         * @param {string} path - 路由路径
         * @param {Function} handler - 路由处理函数
         */
        register: function(path, handler) {
            this.routes[path] = handler;
        },
        
        /**
         * 处理哈希变化
         */
        handleHashChange: function() {
            const hash = window.location.hash || '#home';
            const path = hash.substring(1);
            
            if (this.routes[path]) {
                this.routes[path]();
            }
        }
    },
    
    /**
     * 状态管理
     */
    store: {
        /**
         * 状态数据
         */
        state: {},
        
        /**
         * 订阅者列表
         */
        subscribers: [],
        
        /**
         * 获取状态
         * @param {string} key - 状态键名
         * @returns {*} - 状态值
         */
        get: function(key) {
            return this.state[key];
        },
        
        /**
         * 设置状态
         * @param {string} key - 状态键名
         * @param {*} value - 状态值
         */
        set: function(key, value) {
            this.state[key] = value;
            this.notify();
        },
        
        /**
         * 订阅状态变化
         * @param {Function} callback - 回调函数
         * @returns {Function} - 取消订阅函数
         */
        subscribe: function(callback) {
            this.subscribers.push(callback);
            return () => {
                this.subscribers = this.subscribers.filter(sub => sub !== callback);
            };
        },
        
        /**
         * 通知订阅者
         */
        notify: function() {
            this.subscribers.forEach(callback => callback(this.state));
        }
    },
    
    /**
     * 工具方法
     */
    utils: {
        /**
         * 防抖函数
         * @param {Function} func - 要防抖的函数
         * @param {number} wait - 等待时间（毫秒）
         * @returns {Function} - 防抖后的函数
         */
        debounce: function(func, wait) {
            let timeout;
            return function(...args) {
                clearTimeout(timeout);
                timeout = setTimeout(() => func.apply(this, args), wait);
            };
        },
        
        /**
         * 节流函数
         * @param {Function} func - 要节流的函数
         * @param {number} limit - 时间限制（毫秒）
         * @returns {Function} - 节流后的函数
         */
        throttle: function(func, limit) {
            let inThrottle;
            return function(...args) {
                if (!inThrottle) {
                    func.apply(this, args);
                    inThrottle = true;
                    setTimeout(() => inThrottle = false, limit);
                }
            };
        }
    },
    
    /**
     * 数据模型服务
     */
    model: {
        AuditPermission: window.AuditPermission || {},
        Company: window.Company || {},
        Customer: window.Customer || {},
        CustomerContact: window.CustomerContact || {},
        Department: window.Department || {},
        Employee: window.Employee || {},
        OperationLog: window.OperationLog || {},
        Position: window.Position || {}
    }
};

// 导出框架
window.Framework = Framework;