# ofd

**Repository Path**: qiustudio/ofd

## Basic Information

- **Project Name**: ofd
- **Description**: 一个与vue相似的web框架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-31
- **Last Updated**: 2025-11-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OFD框架（奥佛的）

**OFD** 是 **Object + Function + Data**（对象+函数+数据）的缩写，发音为"奥佛的"。它是一个轻量级、高效、简洁的前端Web框架，采用对象+函数+数据驱动的设计理念，让开发者无需直接操作DOM，专注于业务逻辑开发。

**官方网站**：[https://qiumonster.com/ofd](https://qiumonster.com/ofd) 或 [https://ofd.qiumonster.com](https://ofd.qiumonster.com)

## 项目架构

```
ofd_js/
├── src/                   # 源码目录
│   ├── core/              # 核心模块
│   │   ├── OFD.js         # 框架核心类（对象+函数+数据驱动实现）
│   │   ├── instance.js    # 实例创建与挂载逻辑
│   │   ├── lifecycle.js   # 生命周期管理
│   │   └── init.js        # 初始化流程
│   ├── compiler/          # 模板编译系统
│   │   ├── index.js       # 编译器入口
│   │   ├── parser.js      # 模板解析器（生成AST）
│   │   ├── evaluator.js   # 表达式求值器
│   │   └── render.js      # 渲染函数生成
│   ├── reactivity/        # 响应式系统
│   │   ├── observer.js    # 数据监听器
│   │   ├── dep.js         # 依赖收集器
│   │   ├── watcher.js     # 观察者实现
│   │   └── computed.js    # 计算属性支持
│   ├── directives/        # 指令系统
│   │   ├── index.js       # 指令管理器
│   │   ├── v-if.js        # 条件渲染指令
│   │   ├── v-while.js     # 循环渲染指令
│   │   └── v-on.js        # 事件绑定指令
│   ├── components/        # 组件系统
│   │   ├── index.js       # 组件注册与管理
│   │   ├── component.js   # 组件基类
│   │   └── registry.js    # 组件注册表
│   ├── utils/             # 工具函数
│   │   ├── dom.js         # DOM操作工具
│   │   ├── event.js       # 事件处理工具
│   │   ├── tools.js       # 通用工具函数
│   │   ├── type.js        # 类型判断工具
│   │   └── error.js       # 错误处理工具
│   ├── observer/          # 响应式实现
│   │   ├── index.js       # 观察者系统入口
│   │   ├── observer.js    # 数据监听和变化检测
│   │   └── arrayMethods.js # 数组响应式处理
│   ├── css/               # 样式文件
│   │   ├── ofd.css        # 框架默认样式
│   │   └── reset.css      # 样式重置
│   ├── public/            # 公共资源
│   │   ├── test_A_module.html # 测试模块页面
│   │   └── 自定义属性.html  # 自定义属性示例
│   ├── examples/          # 功能示例
│   │   ├── 数据绑定.html   # 数据绑定示例
│   │   ├── 指令.html       # 指令使用示例
│   │   ├── 事件.html       # 事件处理示例
│   │   ├── dom操作.html    # DOM操作示例
│   │   └── data_badding.html # 数据绑定测试
│   ├── test/              # 测试模块
│   │   ├── A.js           # 测试模块A
│   │   └── B.js           # 测试模块B
│   └── index.js           # 框架入口（导出OFD及核心API）
├── dist/                  # 构建输出目录
│   ├── ofd.js             # 生产版本
│   └── ofd.js.map         # 源码映射
├── examples/              # 外部示例文件
│   ├── basic-example.html # 基本示例
│   ├── direct-test.html   # 直接引入测试
│   └── test.html          # 综合测试
├── package.json           # 项目配置
├── package-lock.json      # 依赖锁定文件
├── server.js              # 开发服务器配置
└── webpack.config.js      # Webpack构建配置
```

## 特性

- **数据驱动视图**：通过数据变化自动更新视图，减少手动DOM操作
- **链式API**：支持流畅的链式调用，提高开发效率
- **指令系统**：提供常用指令如while、if等条件渲染指令
- **事件处理**：简洁的事件绑定机制，支持内联表达式
- **HTML实体支持**：完美支持HTML实体编码（如>、<等）
- **轻量级**：打包后仅20KB，加载快速
- **无依赖**：不依赖任何第三方库，独立运行

## 最新更新

### 语法错误修复和直接引入支持优化
- 将所有箭头函数 `=>` 替换为标准函数声明 `function()`，提高兼容性
- 修复了构造函数参数默认值写法
- 调整了正则表达式的创建方式
- 优化了浏览器环境下的模块加载逻辑
- 确保compiler.js能正确加载并暴露compile方法
- 添加了依赖检查和错误提示
- 使用更基础的DOM API替代可能不兼容的高级选择器
- 避免使用现代JavaScript特性，确保在更多浏览器中正常工作

## 快速开始

### 安装

```bash
# 安装依赖
npm install
```

### 开发

```bash
# 启动开发服务器
npm start

# 访问 http://localhost:3000 查看示例
```

### 构建

```bash
# 构建生产版本
npm run build

# 构建后的文件在 dist/ofd.js
```

### 直接使用

您可以直接在HTML中引入构建好的ofd.js文件，或者分别引入核心模块：

**方法一：使用完整构建文件**
```html
<script src="path/to/ofd.js"></script>
```

**方法二：分别引入核心模块**
```html
<!-- 初始化基础OFD对象 (可选) -->
<script>
    window.OFD = window.OFD || {};
</script>

<!-- 核心框架 -->
<script src="core/OFD.js"></script>

<!-- 编译器 -->
<script src="core/compiler.js"></script>

<!-- 观察者 (可选) -->
<script src="observer/observer.js"></script>
```

### 直接引入开发最佳实践

1. **脚本引入顺序**：按照以下顺序引入脚本以确保正确加载
   ```html
   <script src="core/OFD.js"></script>
   <script src="core/compiler.js"></script>
   <script src="observer/observer.js"></script>
   ```

2. **错误处理**：始终使用try-catch捕获可能的初始化错误
   ```javascript
   try {
       const app = window.OFD.mount('#app', options);
   } catch (error) {
       console.error('OFD初始化错误:', error);
   }
   ```

3. **使用window.OFD**：通过window对象访问OFD以确保全局可用性
   ```javascript
   window.OFD.mount('#app', options);
   ```

4. **依赖检查**：在使用前检查必要的功能是否可用
   ```javascript
   if (window.OFD && typeof window.OFD.mount === 'function') {
       // OFD可用
   }
   ```

## 使用示例

### 1. 基本用法（数据绑定）

参考：[src/examples/数据绑定.html](src/examples/数据绑定.html)

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定示例</title>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
        <p>{{ message }}</p>
        <p>{{ message.length > 10 ? '消息过长' : '消息正常' }}</p>
    </div>

    <script src="../../dist/ofd.js"></script>
    
    <script>
        // 使用链式调用初始化
        OFD.mount('#app')
            .data({
                title: '数据绑定示例',
                message: '这是一条测试消息'
            });
    </script>
</body>
</html>
```

### 2. 事件处理

参考：[src/examples/事件.html](src/examples/事件.html)

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理示例</title>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
        
        <!-- 事件指令，点击事件 -->
        <button click-changeTitleFun0>
            点击我改变标题
        </button>

        <!-- 内联函数 -->
        <button click-{
            console.log('内联函数被调用');
            this.title = '标题已被内联函数改变';
        }>
            点击我使用内联函数
        </button>
    </div>

    <script src="../../dist/ofd.js"></script>
    
    <script>
        OFD.mount('#app')
            .data({
                title: '事件处理示例'
            })
            .funs({
                changeTitleFun0() {
                    this.title = '新标题！';
                }
            });
    </script>
</body>
</html>
```

### 3. 指令系统

参考：[src/examples/指令.html](src/examples/指令.html)

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指令系统示例</title>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
        
        <!-- while指令，支持HTML实体 -->
        <div while-{index < 5}>
            <p>循环项 {{ index }}</p>
        </div>
        
        <!-- if指令 -->
        <div if-{showContent}>
            <p>这是条件显示的内容</p>
        </div>
    </div>

    <script src="../../dist/ofd.js"></script>
    
    <script>
        OFD.mount('#app')
            .data({
                title: '指令系统示例',
                index: 0,
                showContent: true
            });
    </script>
</body>
</html>
```

### 4. 直接引入测试

参考：[examples/direct-test.html](examples/direct-test.html)

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OFD框架直接引入测试</title>
    
    <!-- 初始化基础OFD对象 (推荐) -->
    <script>
        window.OFD = window.OFD || {};
    </script>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
        <p>{{ message }}</p>
        <button click-changeTitle>点击改变标题</button>
    </div>

    <!-- 直接引入dist目录中的ofd.js -->
    <script src="../dist/ofd.js"></script>
    
    <script>
        try {
            // 初始化OFD应用
            OFD.mount('#app')
                .data({
                    title: 'OFD框架测试',
                    message: '这是一个直接引入OFD.js的测试页面'
                })
                .funs({
                    changeTitle() {
                        this.title = '标题已改变！';
                    }
                });
            console.log('OFD应用初始化成功');
        } catch (error) {
            console.error('OFD初始化错误:', error);
            if (error.stack) {
                console.error('错误堆栈:', error.stack);
            }
        }
    </script>
</body>
</html>
```

#### v-if 条件渲染

```html
<p v-if="showContent">这是条件渲染的内容</p>
<button data-on-click="toggleContent">切换显示</button>
```

```javascript
new OFD({
    el: '#app',
    data: {
        showContent: true
    },
    methods: {
        toggleContent: function() {
            this.$setData({
                showContent: !this.showContent
            });
        }
    }
});
```

### 生命周期钩子

```javascript
new OFD({
    el: '#app',
    data: {
        message: '生命周期示例'
    },
    beforeCreate: function() {
        // 实例创建前
    },
    created: function() {
        // 实例创建完成
    },
    beforeMount: function() {
        // 实例挂载前
    },
    mounted: function() {
        // 实例挂载完成
    }
});
```

## 核心API

### OFD 构造函数

```javascript
new OFD(options)
```

**参数**: `options` - 配置对象

- `el`: 挂载的DOM元素选择器
- `data`: 响应式数据对象
- `methods`: 方法对象
- `template`: 模板字符串（可选）

### 实例方法

#### $setData(newData)

更新数据并触发视图更新

**参数**: `newData` - 新的数据对象

#### $mount(el)

手动挂载实例到指定元素

**参数**: `el` - DOM元素选择器

### 静态方法

#### OFD.component(name, options)

注册全局组件

#### OFD.directive(name, definition)

注册全局指令

## 浏览器兼容性

支持所有现代浏览器，包括：

- Chrome
- Firefox
- Safari
- Edge

## 贡献指南

欢迎贡献代码！请遵循以下步骤：

1. Fork 本仓库
2. 创建你的特性分支 (`git checkout -b feature/amazing-feature`)
3. 提交你的更改 (`git commit -m 'Add some amazing feature'`)
4. 推送到分支 (`git push origin feature/amazing-feature`)
5. 开启一个 Pull Request

## 许可证

[MIT](https://choosealicense.com/licenses/mit/)

## 鸣谢

OFD框架的设计灵感来源于Vue、React等优秀前端框架，在此表示感谢！