什么是 reef-controller？
reef-controller 是一个针对前端开发的 npm 包，用于实现多页 web 应用程序的路由控制和状态维护。它借鉴了 React 的思想，但又不依赖于 React，可以与其他前端框架（如 Vue、Angular）混合使用。
安装
你可以通过 npm 安装 reef-controller：
--- ------- ---------------
使用
初始化
在页面中引入 reef-controller：
------- -------------------------------------------------
或者在模块化开发中，使用如下代码：
------ ---- ---- ------------------
创建控制器
在控制器中，你可以定义页面的路由规则，并且进行状态管理。
----- --- - --- ------
------- -
-------- -------
--------- --------
----------- ---------
--
----- -
------------ -------
--------- --
-
---创建视图
REEF 可以轻松地创建模板视图，这样你就可以使用道生命力数据来渲染你的 HTML。
例如，在上面的代码中，你也可以在 HTML 中创建以下类似结构的 DOM：
---- ---------
----------- -- -- ------------
-----
-- ----------------------
-- ------------------------
-- ----------------------------
------
-----
----- ----------- --------
-------- -- --- ---- ----------
-------
----- ----------- ---------
-------- -- --- ----- ----------
-------
----- ----------- -----------
-------- -- --- ------- ----------
-------
------
------设置路由规则，REEF会自动更新 currentPage 属性，对应着它在HTML中的变化。这样就可以非常方便地管理多页应用的状态了。
插入视图
最后，插入使用以下代码：
------------------------------------------
注意，上面代码的 document.getElementById('app') 表示要插入的 DOM 元素的 ID。
整个代码如下：
--------- -----
------
------
----- ----------------
----------- ---------------
-------
------
---- ---------
----------- -- -- ------------
-----
-- ----------------------
-- ------------------------
-- ----------------------------
------
-----
----- ----------- --------
-------- -- --- ---- ----------
-------
----- ----------- ---------
-------- -- --- ----- ----------
-------
----- ----------- -----------
-------- -- --- ------- ----------
-------
------
------
------- -------------------------------------------------
--------
----- --- - --- ------
------- -
-------- -------
--------- --------
----------- ---------
--
----- -
------------ -------
--------- --
-
---
------------------------------------------
---------
-------
-------现在你就可以愉快地使用 REEF 来管理你的多页面 web 应用了！
学习意义
- REEF 是一个可以实现多页 web 应用程序路由控制和状态维护的前端开发工具。
- REEF 借鉴了 React 的思想，但又不依赖其它库，可以与其他前端框架混合使用。
- REEF 简单易懂，上手容易，可以有效提升前端开发效率。
示例代码
完整示例代码GitHub仓库： https://github.com/reefjs/reef
可以运行并修改这个示例代码，以便更好地理解REEF的用法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559cb81e8991b448d750f