介绍
Fluxter 是一个使用 Flux 架构思想构建的轻量级前端框架，可以帮助前端开发人员更好地管理和控制应用程序的状态，提高代码复用性和维护性。Fluxter 提供了一套清晰的 API，使开发人员能够更加方便地构建复杂的应用程序。
安装
在安装之前，您需要确保先安装了 node.js 环境和 npm 包管理器。
你可以使用以下命令安装 fluxter:
npm install --save fluxter
快速开始
数据层
在 Fluxter 中，数据的存储和管理是通过 Store 进行的，每个 Store 都提供了一组类 Flux 架构中的事件响应函数。Store 可以监听来自 dispatcher 的事件并进行适当的状态修改。
以下是一个简单的 counter store 示例，用于存储计数器的数据：
-- -------------------- ---- -------
----- - ----- - - -------------------
----- ------------ ------- ----- -
------------- -
--------
---------- - --
-
-------------------- -
------ ------------- -
---- ------------
-------------
------------------
------
---- ------------
-------------
------------------
------
-
-
---------- -
------ -----------
-
-
-------------- - -------------动作层
在 Fluxter 中，动作是指 UI 提交的操作，通常是一个对象，其中包含操作类型和操作数据。动作被分发到 Store 中，Store 将根据操作类型响应动作。我们使用一个 Dispatcher 来分发动作。尝试用下面的示例代码创建一个 Dispatcher：
const { Dispatcher } = require('fluxter');
const dispatcher = new Dispatcher();这是一个最简单的 Dispatcher 实例，接下来我们将为其注册 CounterStore 和创建两个操作：INCREMENT 和 DECREMENT。
-- -------------------- ---- ------- ----- ------------ - -------------------------- ----- ------------ - --- --------------- --------------------------------------- -------- ----------- - --------------------- ----- ----------- --- - -------- ----------- - --------------------- ----- ----------- --- -
现在您已经创建了两个操作，并将它们注册到 CounterStore 中，一旦操作发生，CounterStore 将响应对应的操作进行修改。现在您可以通过调用 increment 或 decrement 方法来递增/递减计数器的值。
increment(); console.log(counterStore.getCount()); // 输出 1 decrement(); console.log(counterStore.getCount()); // 输出 0
视图层
视图层用于渲染应用程序的界面，可以使用 Fluxter 提供的 Mixin，在 React 组件中使用 Fluxter 进行状态管理。我们可以通过以下示例代码创建一个简单的视图：
-- -------------------- ---- -------
----- - --------- - - -------------------
----- ----- - -----------------
----- ----------- - -------------------
------- ------------
----------- -
------------------------- ----- ----------- --
--
----------- -
------------------------- ----- ----------- ---
--
-------- -
----- - ----- - - ---------------------------------------
------ -
-----
------------ ------------
------- -------------------------------------------
------- -------------------------------------------
------
--
-
---CounterView 使用 FluxMixin，该 Mixin 为我们提供了一个 getFlux 方法来获取 Dispatcher 和 Store，以便在组件中触发动作和获取 Store 的当前状态。现在，基于这个 CounterView 组件你已经可以像下面 “演示应用" 一样，创建一个简单的计数器应用。
演示应用
接下来，我们将使用上述实现的组件、Store 和 Dispatcher，来演示如何构建一个基于 Flux 架构思想的应用程序。
步骤1 创建 Store
-- -------------------- ---- -------
----- - ----- - - -------------------
----- ------------ ------- ----- -
------------- -
--------
---------- - --
-
-------------------- -
------ ------------- -
---- ------------
-------------
------------------
------
---- ------------
-------------
------------------
------
-
-
---------- -
------ -----------
-
-
-------------- - -------------步骤2 创建 Dispatcher
-- -------------------- ---- ------- ----- - ---------- - - ------------------- ----- ------------ - -------------------------- ----- ---------- - --- ------------- ----- ------------ - --- --------------- --------------------------------------- -------- ----------- - --------------------- ----- ----------- --- - -------- ----------- - --------------------- ----- ----------- --- -
步骤3 创建视图
-- -------------------- ---- -------
----- - --------- - - -------------------
----- ----- - -----------------
----- -------- - ---------------------
----- ------------ - --------------------------
----- ----------- - -------------------
------- ------------
----------- -
------------------------- ----- ----------- --
--
----------- -
------------------------- ----- ----------- ---
--
-------- -
----- - ----- - - ---------------------------------------
------ -
-----
------------ ------------
------- -------------------------------------------
------- -------------------------------------------
------
--
-
---
---------------------------- --- --------------------------------步骤4 运行应用
我们现在可以在浏览器中运行这个应用，使用以下命令启动服务器：
npm install -g http-server http-server
该应用程序将在您的本地服务器中启动，并将在您的本地主机上的端口为 8080。打开浏览器并访问 http://localhost:8080，您应该可以看到一个简单的、可递增/递减的计数器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb781e8991b448dc67f