简介
appls 是一个专注于应用标准化的 npm 包。开发者可以利用 appls，快速开发出符合应用标准的前端应用。该包主要用于处理前端应用开发中常见重复问题，包括但不限于：
- 标题化
- 页面管理
- 统一状态管理
- 统一异常处理
- 统一日志处理
appls 的出现极大的简化了前端开发复杂度，使得开发者更加站在业务的高度。
安装
使用 npm 包管理工具，推荐使用 npm 安装：
npm i appls
使用教程
初始化
在入口 js 文件中，我们需要先初始化 appls，代码如下：
-- -------------------- ---- ------- ------ - ----- ------- ------ - ---- -------- ----- ------ - --- -------- ------ --------- --- ----- ------ - --- --------- ----- ---- ----- ------- ---- ----- - - --- ------ ------- ------ --- ------ ------- --
在上述代码中，我们通过引入 appls 中的 Appl、Config、Router 类进行初始化。我们首先需要指定页面的标题（Config），接着是页面的路由（Router），然后通过 Appl 类进行初始化。
现在我们可以直接通过负责完成页面管理、状态管理等工作的 Appl 实例开发我们自己的应用了。
页面开发
我们来看一个简单的应用页面代码示例：
-- -------------------- ---- -------
------ - ---- --------------
------ ----- ---- --------
------ ------ ---- --------------------
------ - ---- - ---- --------
----- ---- ------- ---- -
------------------ -
-------------
---------- - -
----- ------- --------
--
-
-------- -
----- --------- - -----------
----------- -----
--
------ -
----------------------------------------
--
-
-
-------------------- ------这里我们已经假设已经完成Appl 实例的初始化了。 在上述代码中，我们定义了一个名为 Home 的组件，继承了 appls 包中的 Page 类。在 Home 组件中，重写了 render 方法定义了一个简单的样式组件，并最终通过 a.regist('Home', Home); 方法将当前页面配置到 Appl 实例中，注册页面。
状态管理
在 appls 包中，状态来自于 react 的状态管理机制。 我们将所有的应用组件的状态统一管理，方便页面之间的互动和数据传递。
示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- --------------------
------ - ---- - ---- --------
------ - ---- --------------
----- ---- ------- ---- -
------------------ -
-------------
---------- - -
------ ---
--
----------------
-
-------- - -- -- -
---------------
------ -
-
--- --
------ -------
--
-
--- --
------ ---- -----
--
-
--- --
------ ----------- ------
--
--
---
--
---------- - ---- -- -
----- ---- - ---------------------------- -- ------- --- ----
--------------
-----
---
---------------------------------------
--
-------- -
----- --------- - -----------
----------- -----
--
------ -
-----------
---------------------------- -- -
----
-------------
----------- -- -
-------------------------
--
-
----------------------
-------------------------
------
---
------------
--
-
-
-------------------- ------在上述代码中，我们引入了 Appl 实例的 setAppData 方法，来实现数据的共享。这里我们通过 this.props.history.push(/blog/${id}); 切换页面。
异常情况处理
在 appls 中，异常情况处理需要开发者自己实现。 我们可以在 componentDidCatch 方法中做些处理：
-- -------------------- ---- -------
------ - ---- --------------
------ ----- ---- --------
------ ------ ---- --------------------
------ - ---- - ---- --------
----- --------------- ------- --------------- -
------------------ -
-------------
---------- - - --------- ----- --
-
------ ------------------------------- -
------ - --------- ---- --
-
------------------------ ---------- -
------------------ --------------------------
-
-------- -
-- --------------------- -
------ ------------- ---- ------------
-
------ --------------------
-
-
----- ---- ------- ---- -
------------------ -
-------------
---------- - -
------ ---
--
----------------
-
-------- - -- -- -
---------------
------ -
-
--- --
------ -------
--
-
--- --
------ ---- -----
--
-
--- --
------ ----------- ------
--
--
---
--
---------- - ---- -- -
----- ---- - ---------------------------- -- ------- --- ----
--------------
-----
---
---------------------------------------
--
-------- -
----- --------- - -----------
----------- -----
--
------ -
-----------------
-----------
---------------------------- -- -
----
-------------
----------- -- -
-------------------------
--
-
----------------------
-------------------------
------
---
------------
------------------
--
-
-
-------------------- ------在上述代码中，我们通过引入 MyErrorBoundary 组件，通过 componentDidCatch 方法捕获异常并处理异常情况。
日志记录
在 appls 中，日志记录也需要开发者自己实现。 我们可以通过报错来引出日志记录，示例代码如下：
-- -------------------- ---- -------
------ - ---- --------------
------ ----- ---- --------
------ ------ ---- --------------------
------ - ---- - ---- --------
----- ---- ------- ---- -
------------------ -
-------------
---------- - -
------ ---
--
----------------
-
-------- - -- -- -
---------------
------ -
-
--- --
------ -------
--
-
--- --
------ ---- -----
--
-
--- --
------ ----------- ------
--
--
---
--
---------- - ---- -- -
--- -
----- ---- - ---------------------------- -- ------- --- ----
--------------
-----
---
---------------------------------------
----- --- ----------- -- - ---- --------- ---------- --------
- ----- ------- -
------------------
-
--
-------- -
----- --------- - -----------
----------- -----
--
------ -
-----------
---------------------------- -- -
----
-------------
----------- -- -
-------------------------
--
-
----------------------
-------------------------
------
---
------------
--
-
-
-------------------- ------在上述代码中，我们通过 try/catch 来引入和记录错误，使用 a.logError 方法来将错误记录到统一的日志中心。
结论
在本篇文章中，我们介绍了如何使用 npm 包 appls 来开发符合应用标准的前端应用。 我们也详细讲解了它的使用教程、状态管理、异常情况处理以及日志记录相关的内容，这些都是前端应用开发中非常重要的知识点。 在学习完本文后，您可以快速的开发出自己的前端应用，并且使得你的应用更加符合标准化，便于拓展维护，快速迭代。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/78583