frntnd-class-with-plugins
Version:
Class that can be extended using plugins
102 lines (75 loc) • 3.09 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Tutorial: README</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Tutorial: README</h1>
<section>
<header>
<h2>README</h2>
</header>
<article>
<h1>Class with plugins</h1><p>Class with plugins is an npm module that gives you a class with that allows you to extend its functionality using plugins
that can expose properties on the class or run functions using 'hooks'</p>
<h1>Installing</h1><p>Run npm install</p>
<h1>Testing</h1><p>Run npm test</p>
<h1>Usage</h1><p>Extend the ClassWithPlugins class and call the hook function to allow plugins to hook into certain points in the code</p>
<pre class="prettyprint source"><code>import ClassWithPlugins from 'class-with-plugins';
class Model extends ClassWithPlugins {
static get _type() {
return 'Model';
}
}</code></pre><p>Write a plugin, this example clones a model and removes its id -, createdOn - and modifiedOn property</p>
<pre class="prettyprint source"><code>import _ from 'lodash';
import ClassWithPlugins from 'class-with-plugins';
// 'Model' refers to the static get _type on the class, 'clone' is the name of the plugin
ClassWithPlugins.registerPlugin('Model', 'clone', {
// expose the 'clone' property on the Model
expose: ['clone'],
clone(model) {
const clone = _.clone(model);
delete clone[this.idKey];
delete clone[this.modifiedOnKey];
delete clone[this.createdOnKey];
return clone;
}
});</code></pre><p>Now to have the plugin be present in you class, make sure it appears in the plugins property of the class (an array of strings)</p>
<pre class="prettyprint source"><code>class Model extends ClassWithPlugins {
...
...
...
}
Model.prototype.plugins = ['clone'];</code></pre><p>or</p>
<pre class="prettyprint source"><code>class Model extends ClassWithPlugins {
constructor(options = {}) {
options.plugins = ['clone'];
super(options);
}
}</code></pre><p>then, finally, to use the plugin</p>
<pre class="prettyprint source"><code>const model = new Model({...});
model.clone({id:3, name: 'bob'});
> {name: 'bob'}</code></pre>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="ClassWithPlugins.html">ClassWithPlugins</a></li></ul><h3>Tutorials</h3><ul><li><a href="tutorial-README.html">README</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.3</a> on Thu Sep 24 2015 22:53:49 GMT+0200 (CEST)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>