%20(2).svg)
项目简介
本项目是基于 React 和 TypeScript 的前端框架，采用依赖注入的方式搭建 React 应用。借助装饰器对 UI 控制类和服务类进行注解，简化代码开发，还具备绑定组件 props、钩子以及观察值变化等功能，可助力开发者高效构建复杂用户界面。
项目的主要特性和功能
- 装饰器注解：运用
Component和Injectable等装饰器注解 UI 控制类和服务类，让代码结构更清晰。 - 依赖注入：通过依赖注入机制组织代码，便于管理服务类与 UI 控制类间的依赖关系。
- Props 绑定：利用
Prop装饰器在 UI 控制类或服务上绑定组件的 props，方便数据传递。 - 钩子绑定：通过
Hook装饰器在 UI 控制类或服务上绑定组件的钩子，便于处理组件生命周期。 - 值变化观察：
Watch装饰器可观察值的变化，当依赖属性变化或满足特定条件时触发相应方法。 - 灵活的 API：提供
bind、connect等一系列灵活的 API，方便开发者进行二次开发和扩展。
安装使用步骤
安装依赖
若已下载项目源码文件，可通过以下命令安装所需依赖：
bash
yarn add @loong-js/core
yarn add react mobx mobx-react-lite
环境配置
TypeScript 配置
需在 typescript.json 中配置输出元信息：
json
{
"compilerOptions": {
"experimentalDecorators": true,
// 输出编译信息
"emitDecoratorMetadata": true
}
}
Babel 配置（若使用 Babel 编译 ts）
需添加 babel-plugin-transform-typescript-metadata，并按如下顺序配置：
json
{
"plugins": [
"babel-plugin-transform-typescript-metadata",
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
使用示例
可参考以下简单示例来使用本框架： ```typescript import { Component, bind } from '@loong-js/core';
// 1. 注解一个 UI 控制类 @Component() class AppCompnent { constructor() {} }
// 2. 生成 binder 函数 const binder = bind(Component);
// 3. 使用 binder 绑定组件 const App = binder(() =>
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】