page-unit
Library for Page framework that provides Unit abstraction. It's based on the Async Tree Pattern.
Install
npm install @page-libs/unit
Run test
npm test
Run build
npm run build
Package is already built. So, for using in Page you just need to install it.
Unit
Unit implementation
class Unit {
constructor (elm) {
this.elm = elm
for (let propertyName of Object.getOwnPropertyNames(Object.getPrototypeOf(this))) {
if (this[propertyName] instanceof Function &&
this[propertyName] !== 'constructor' &&
propertyName.startsWith('on')) {
this.elm[propertyName] = this[propertyName].bind(this)
}
}
}
override (unit, methodName, method) {
unit.elm[methodName] = method.bind(this)
}
}Every class that extends Unit has override method. It can be used for rebinding events from encapsulated elements to a custom events of Unit that encapsulates them. In the example below, when button is clicked, onsubmit is used instead of onclick event of the button.
Example
Let's say we have html template(pseudocode):
<div id="user-form">
<input id ="name">
<input id ="password">
<button id="submit">Sign in</button>
</div>const { Unit } = require('@page-libs/unit')
class UserForm extends Unit {
constructor (elm, nameUnit, passwordUnit, submitButtonUnit) {
super(elm)
this.nameUnit = nameUnit
this.passwordUnit = passwordUnit
this.submitButtonUnit = submitButtonUnit
// so when submit button is clicked, onsubmit event will be invoked
this.override(this.submitButtonUnit, 'onclick', this.onsubmit)
}
onsubmit () {
// ajaxRequest using nameUnit.value() and passwordUnit.value();
}
}const { Unit } = require('@page-libs/unit')
class SubmitButton extends Unit {
constructor (elm) {
super(elm)
}
onclick () {
/* it can be defined, but it also can be
overridden with some other event(in that case this method would be ignored) */
}
}const { Unit } = require('@page-libs/unit')
class NameInput extends Unit {
constructor (elm) {
super(elm)
}
value () {
return this.elm.value
}
}const { Unit } = require('@page-libs/unit')
class PasswordInput extends Unit {
constructor (elm) {
super(elm)
}
value () {
return this.elm.value
}
}Then you can declare elements in the following style:
new UserForm(
document.getElementById('user-form'),
new NameInput(document.getElementById('name')),
new PasswordInput(document.getElementById('password')),
new SubmitButton(document.getElementById('submit'))
)