# xrender

**Repository Path**: ereddate2017/xrender

## Basic Information

- **Project Name**: xrender
- **Description**: 类vue和react写法的前端框架，集成路由\状态管理\国际化等。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-27
- **Last Updated**: 2025-05-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# XRender

XRender 是一个轻量级的前端框架，专注于组件化开发和数据驱动视图渲染。它提供了类似 Vue 的语法和功能，支持数据绑定、指令、生命周期钩子等特性。

## 特性
- **组件化开发**：支持创建和复用组件。
- **数据绑定**：支持双向数据绑定和模板插值。
- **指令系统**：提供 `v-if`、`v-for`、`v-show` 等常用指令。
- **生命周期钩子**：支持 `created`、`mounted`、`updated` 等生命周期钩子。
- **插件系统**：支持通过插件扩展功能。
- **SSR 支持**：支持服务器端渲染（SSR）。
- **路由支持**：支持路由管理和导航。
- **状态管理**：支持状态管理。
- **响应式系统**：支持响应式数据和计算属性。
- **国际化支持**：支持国际化和多语言支持。
- **AJAX 支持**：支持 AJAX 请求和数据获取。
- **MOCK 支持**：支持模拟数据和测试环境。
- **移动端适配**：支持移动端适配和响应式设计。

## 快速开始
```javascript
import 'xrender';

const App = $.component('App', {    
  render(createElem) {
    return createElem('div', {class:'page'}, 'Hello, XRender!', createElem(function(){
        return `<button type="button" @click="buttonClickHandle">{{msg}}</button>`
    }));
  },
  data(){
    return{
       msg:'Hello World!'
    }
  },
  methods: {
    buttonClickHandle() {
      console.log("Button Clicked");
    },
  },
});

$.createApp({ App }).$mount('#app');
```
## 组件化开发
XRender 支持创建和复用组件。以下是一个简单的组件示例：
```javascript
const MyComponent = $.component('MyComponent', {
  data() {
    return {
      message: 'Hello, XRender!'
    };
  },
  render(createElem) {
    return createElem('div', {}, this.data.message);
  }
});
```
## 数据绑定
XRender 支持双向数据绑定和模板插值。以下是一个数据绑定的示例：
```javascript
const App = $.component('App', {
  data() {
    return {
      username: 'XRender User'
    };
  },
  render(createElem) {
    return createElem('div', {}, `Welcome, {{username}}!`);
  }
});
```
## 指令系统
XRender 提供了 `v-if`、`v-for`、`v-show` 等常用指令。以下是一个指令的示例：
```javascript
const App = $.component('App', {
  data() {
    return {
      showMessage: true
    };
  },
  render(createElem) {
    return createElem('div', {}, [
      createElem('p', { 'v-if': 'showMessage' }, 'This is a message.')
    ]);
  }
});
```
## 生命周期钩子
XRender 支持 `created`、`mounted`、`updated` 等生命周期钩子。以下是一个生命周期钩子的示例：
```javascript
const App = $.component('App', {
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  updated() {
    console.log('Component updated');
  },
  render(createElem) {
    return createElem('div', {}, 'Hello, XRender!');
  }
});
```
## 插件系统
XRender 支持通过插件扩展功能。以下是一个插件的示例：
```javascript
const MyPlugin = {
  install(app) {
    app.directive('myDirective', {
      bind(el, binding) {
        el.textContent = `My Directive: ${binding.value}`;
      }
    });
  }
};
$.use(MyPlugin);
```
## 服务器端渲染（SSR）
XRender 支持服务器端渲染（SSR）。以下是一个 SSR 的示例：
```javascript
const App = $.component('App', {
  render(createElem) {
    return createElem('div', {}, 'Hello, XRender!');
  }
});

const app = $.createApp({ App });
const html = app.$mount().$html();
console.log(html);
```

## 许可证
XRender 基于 MIT 许可证发布。请查看 [LICENSE](LICENSE) 文件了解更多信息。

## 贡献
欢迎贡献代码和文档改进。请查看 [CONTRIBUTING.md](CONTRIBUTING.md) 了解如何参与项目。

---

### 文档说明
1. **快速开始**：提供了简单的安装和使用示例，帮助开发者快速上手。
2. **核心概念**：介绍了组件、数据绑定、指令和生命周期钩子等核心概念，并提供了代码示例。
3. **API 文档**：列出了 XRender 的主要 API，方便开发者查阅。
4. **示例项目**：提供了示例项目的链接，展示 XRender 的实际应用。
5. **贡献和许可证**：鼓励开发者贡献代码，并说明项目的开源许可证。

通过这份 `README.md`，开发者可以快速了解 XRender 的功能和使用方法，并参与到项目的开发中。