随着前端技术的不断发展，越来越多的模块化工具被研发出来，npm 是其中最为重要的一个。在前端开发中，我们通常使用众多的开源库和框架来辅助我们的编码工作。但是，我们也经常遇到这样的问题：一个库或框架并不能完全满足我们的需求。而这时，我们需要用到一些额外的插件来进行拓展。这个时候就需要用到 fplugin。
什么是 fplugin
fplugin 是一个基于函数式编程思想的插件框架，它不仅可以被用于普通的 JavaScript 代码，也可以用于 React 和 Redux。fplugin 的特点是可以在不污染全局空间的情况下，实现插件化编程。
fplugin 的安装与引用
通过 npm 安装 fplugin：
npm install --save fplugin
在需要使用 fplugin 的地方引入插件：
import fplugin from 'fplugin';
fplugin 的基础使用教程
fplugin 的核心是共享全局上下文，我们可以给这个全局上下文加上一些额外的函数。这些函数可以不分先后地被调用，从而实现插件化编程的方式。
假设我们有一个 run 函数：
function run() {
console.log('Hello fplugin!');
}我们可以使用 fplugin 为它添加一个执行前的拦截函数 beforeRun 和一个执行后的钩子函数 afterRun，这两个函数可以在运行 run 函数时被执行：
-- -------------------- ---- ------- ------ ------- ---- ---------- -------- ----- - ------------------ ----------- - -- -- - ------------------------ -- -- - ------------------- ------ --- -- -- - ----------------------- -- -- - ------------------ ------ --- -- -- --- -- -----------------
在这里，我们为 run 函数添加了两个插件。这两个插件分别是 beforeRun 和 afterRun。他们在 run 函数被执行前后被调用，输出的信息是：
before run Hello fplugin! after run
fplugin 不仅可以用于普通的 JavaScript 代码，它也可以用于 React 和 Redux 上。下面会分别介绍如何在 React 和 Redux 上使用 fplugin。
fplugin 在 React 上的使用教程
在 React 中，fplugin 可以很方便地被用于丰富组件的生命周期和传入的属性。我们来看一个具体的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ----------
----- --------------- ------- --------------- -
-------- -
----- - ------------- ------------ ------------- - - -----------
------ -
------ -----------
----------- -- -
------------ -- -----------------------------
------------------------------------
----------- -- ----------------------------
--
---------------
--
--
-
-
--------------------------- ----- -- -
------------------- ---------
------------------- -- ---------
---
-------------------------- ----- -- -
------------------ ---------
------------------- -- ---------
---
------ ------- ----------------在这里，我们实现了一个自定义输入框的组件 CustomTextInput。组件接受两个插件 beforeChange 和 afterChange。这两个插件分别在输入框的值改变前和改变后执行。
使用方法：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------- ---- --------------------
-------- ----- -
------ -
----------------
------------------- -- -
------------------- ------ --- ----- -- -----------
--
------------------ -- -
------------------ ------ --- ----- -- -----------
--
--
--
-这样，每次输入框的值改变时，就会在控制台输出一条相应信息。
fplugin 在 Redux 上的使用教程
在 Redux 中，fplugin 可以用于改变 reducer 函数的行为。我们来看一个具体例子，实现一个能够限制 state 中属性的长度的插件：
-- -------------------- ---- -------
----- ----------- - ------ - --- -- ------- -- ------- ------- -- -
----- -------- - -------------- --------
--------------------------------- -- -
-- ------- ------------- --- -------- -- -------------------- - ------ -
------------- - ---------------------- -------
-
---
------ ---------
--
------ ------- ------------这个插件接受一个参数 limit，代表想要限制的字符串长度。它将传入的 reducer 函数包装，实现 state 所有的字符串属性都不能超过限制长度的功能。
使用方法：
import { createStore } from 'redux';
import lengthLimit from './lengthLimit';
import rootReducer from './reducers';
const store = createStore(
lengthLimit(5)(rootReducer)
);在这里，我们首先将 rootReduer 函数使用 lengthLimit 插件包装，这样就可以使其限制字符串的长度为 5 个字符。这样，state 中所有的字符串属性在超出长度限制时都会被截断。
总结
fplugin 是一个基于函数式编程思想的插件框架。它可以在不污染全局空间的情况下，实现插件化编程，同时也能够用于 React 和 Redux 上进行开发。希望这篇文章能给读者带来一些帮助，同时也希望读者在实际开发中能够加以应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056b4c81e8991b448e5491
