@ 表达/ mvc
基于阶级的被动状态管理——框架-不可知性核心.
核心内容 表达式 MVC:反应性原始人围绕平原阶级而建,没有框架依赖. 规定 Model 类、 指令、 上下文, 以及 渲染器 - 不可知 Component 适配器喜欢 @expressive/react 继续前进.
建立反应应用程序? 安装
@expressive/react与此软件包并列 - 适配器声明@expressive/mvc作为同伴的依赖, 所以两者都属于你的package.json导入Model, (中文(简体) ),Component,然后从此软件包中导入适配器一次,然后主机注册。 也一样@expressive/dom,没有反应的渲染器.
它单独安装,为主机不可知码服务——共享域包,节点服务,或新适配器:
npm install @expressive/mvc
型号
A 类 Model 是一个类,其字段是被动的 - 读取以订阅,指定以更新。 获取器是缓存计算值 .
import { Model } from '@expressive/mvc';
class Counter extends Model {
count = 0;
increment() {
this.count++;
}
get doubled() {
return this.count * 2; // recomputes only when count changes
}
}
const counter = Counter.new();
// effect runs now, then again whenever read values change
counter.get(({ count }) => {
console.log(`count is ${count}`);
});
counter.increment(); // -> "count is 1"
任何地点都进行试验,不需要制造器.
说明
改变属性行为方式的字段初始化器 :
ref() | 仍然具有反应性的可变参照物(例如DOM节点) |
set() | 计算值、 智能设置器、 任务副作用 |
get() | 依赖性注射-再拉一拉 Model 从上下文 |
map() | 浅反应映射 |
has() | 自有反应收集 -- -- 命令列表或产卵池 |
import { Model, set, has, map } from '@expressive/mvc';
class Cart extends Model {
items = has<Item>(); // reactive collection
products = map<string, Product>(); // reactive keyed collection
coupon = set('', code => apply(code)); // side-effect on assignment
}
生命周期
class Timer extends Model {
seconds = 0;
new() { // runs once on activation
const id = setInterval(() => this.seconds++, 1000);
return () => clearInterval(id); // returned cleanup runs on destroy
}
}
const timer = Timer.new(); // construct + activate
timer.set(null); // destroy - runs cleanup, freezes state
在服务器上制作的主机下, new() 仍然运行在那里,但它的清理从来没有做 - 所以这样的客户端资源会进入 mount() 相反, 它只运行在客户端上; 见主机的文档 .
背景组成
案例通过上下文互相发现,通过互相持有来作曲:
import { Model, get } from '@expressive/mvc';
class Session extends Model {
user = 'guest';
}
class Profile extends Model {
session = get(Session); // injected from the nearest provider
address = new Address(); // nested instance - its changes bubble up
}
<Component for={Model}> - 这个包裹的一部分 - 放置一个 Model 在一棵树上,有如 @expressive/react 让它,和 get() 把箱子拉出来.
活动
任何财产或任意的密钥都可以发送和监听:
const off = counter.set('refresh', () => reload()); // listen
counter.set('refresh'); // dispatch
off(); // stop listening
框架不可知性组成部分
@expressive/mvc 舰载自己的JSX运行时间,因此您可以针对核心编写组件——包括可再使用的库——并让任何主机提供:
// tsconfig.json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "@expressive/mvc"
}
}
Component - 一个 Model 可以在JSX中使用 - 住在这里,与 <Component for>:道具,子组件,悬浮和上下文定位都是核心. 一个主机只能制作它们; 应用程序中的表情, 你看 @expressive/react。 。 。 .
要在用户界面中渲染状态,请添加一个主机: @expressive/react 或者说 @expressive/dom。 。 。 .
完整指南和 API 参考 github.com/gabeklein/表达式
许可证
麻省理工学院