/** * 简单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;