@symph/joy
介绍
官网：https://lnlfps.github.io/symph-joy
@symph/joy 让我们轻松的进行前端应用开发，零配置可用，简单清晰的业务和数据管理模块，已集成大量最佳实践的优化方案，即使你才刚接触 React，也可以轻松创建高可用、可维护的前端应用。
该项目已在生产环境大量使用，如有任何疑问、使用帮助、bug 反馈、特性讨论，请和我们联系(邮件：lnlfps@gmail.com; QQ 群：929743297)，或者到 github 创建 issue，欢迎加入。
特征
- 零配置可用，优化的默认配置，快速开发，已集成 react、redux、react-router4 和 ES6、7 语法支持等
- 支持服务端渲染，在业务组件内部获取渲染数据，组件内聚更高，便于维护
- MVC 架构，模块化设计，简化 redux 的学习和使用
- 依赖自动注入，专注组件内部实现，依赖关系更明确，方便调用
- 支持
@装饰器将普通 Class 申明为 Controller 或 Model 等，不侵入业务代码 - 支持 react hook 模式开发函数式组件，轻松链接 Model 管理业务流程
- 全局支持 async 语法，复杂的业务逻辑也能轻松找到解决方案
- 支持静态版本导出，脱离 Node.js 运行，也可单独导出静态页面
- 内置网络请求代理服务，解决跨域和服务中转问题，前后端分离开发畅通无阻
- 支持插件化配置，便于功能扩展
安装和开始
运行npm init创建一个空工程，并填写项目的基本信息，当然也可以在一个已有的项目中直接安装。
npm install --save @symph/joy react react-dom@symph/joy 只支持 React 16及以上版本
添加 NPM 脚本到 package.json 文件：
{
"scripts": {
"dev": "joy dev"
}
}然后就可以开始正式工作了，下面从hello world示例开始，首先编写一个 Model 组件来管理应用的数据和业务。
// /src/models/HelloModel.js
import model from "@symph/joy/model";
@model() // 标明这是一个Model。
export default class HelloModel {
namespace = "hello";
// model的初始状态数据
initState = {
message: "Welcome to @symph/joy!",
};
// async业务方法，从服务端异步获取新的欢迎消息
async fetchMessage() {
let newMsg = await fetch("/hello_message");
//更新model的状态，界面的状态也会自动更新
this.setState({
message: newMsg,
});
}
}接下来编写界面，展示欢迎消息。@symph/joy默认使用/src/index.js文件作为应用的启动入口组件，可以在这里初始化基础功能模块和设置子页面路由等。
// /src/index.js
import React, { Component } from "react";
import { controller, Inject } from "@symph/joy/controller";
import HelloModel from "./models/HelloModel";
@controller((store) => {
// 标明这是一个Controller
return {
message: store.hello.message, // 绑定model中的数据
};
})
export default class ThirdHelloController extends Component {
@Inject() // 声明依赖的Model
helloModel: HelloModel;
async componentDidMount() {
await this.helloModel.fetchMessage(); //调用model
}
render() {
return <div>${this.props.message}</div>;
}
}最后运行npm run dev命令，在浏览器中输入访问地址http://localhost:3000，即可看到刚才写的页面。如果需要使用其它端口来启动应用 npm run dev -- -p <your port here>
到目前为止，一个简单完整的前端应用已经创建完成，可以开始工作了。还有很多神奇的特性，请查看 详细使用指南
文档
https://lnlfps.github.io/symph-joy
快速连接：
联系我们
邮件：lnlfps@gmail.com QQ 群：929743297