APP-Web/framework/index.js

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

// DOM操作模块
const 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);
    }
};

// 组件系统模块
const component = {
    /**
     * 组件存储
     */
    components: {},
    
    /**
     * 注册组件
     * @param {string} name - 组件名称
     * @param {Function} constructor - 组件构造函数
     */
    register: function(name, constructor) {
        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;
    }
};

// 路由功能模块
const 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]();
        }
    }
};

// 状态管理模块
const 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));
    }
};

// 工具方法模块
const 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);
            }
        };
    }
};

// 数据模型模块
const 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 || {}
};

// 框架核心对象
const Framework = {
    /**
     * DOM操作API
     */
    dom: dom,
    
    /**
     * 组件系统
     */
    component: component,
    
    /**
     * 路由功能
     */
    router: router,
    
    /**
     * 状态管理
     */
    store: store,
    
    /**
     * 工具方法
     */
    utils: utils,
    
    /**
     * 数据模型服务
     */
    model: model
};

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