JavaScript Framework fairy support js
table of contents
Module event handling

Single processing

Let's take a look inside the unzipped directory on the previous page

Unzipped directory
|-- distWork
|-- src
|   |-- js
|   |  `-- modules
|   |      `-- index.js
|   `-- page
|      `-- index.html
|-- Gruntfile.js
`-- package.json
index.html 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div><button data-name="sample">sample</button></div>
</body>
</html>
index.js 
export class Index {

    constructor() {
    }

    sample_click(event) {
        alert("Hello fairysupport");
    }

}

Contents of index.html
Load the framework using<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
There is fairysupport.min.js in distWork/js.
npm run watch_local executed on the previous page is a command to automatically generate distWork from the src directory when there is a change in the src directory.
npm run server executed on the previous page is a command to start the http server on port 8000 with the distWork directory as the public directory.
Both are defined in package.json. Details of these builds will be explained on another page.
It is a rule of this framework to write id="fs-js" in the script tag that load the framework.
It is a rule of this framework to write the data-page-root attribute in the script tag that load the framework.
data-page-root attribute value writes the root of the web page that uses this framework.
We will use an HTML file as a sample this time, but this framework will work even if the extension is not html. Also, this framework works without the extension.
Therefore, Web application that have not used this framework can introduce this framework part way through by setting the data-page-root attribute value correctly.
<div><button data-name="sample">sample</button></div>
data-name attribute is defined in the button tag. This will be explained in the contents of index.js below.


Contents of index.js
It is a rule of this framework to have the same name as the web page and the extension js.
It is a rule of this framework to create under js/modules.
For example, when you want to use this framework at http://localhost:8000/page/sub/index.html, if data-page-root attribute value is http://localhost:8000/page, you will create src/page/sub/index.html and src/js/modules/sub/index.js.
It is a rule of this framework to make it an export class.
It is a rule of this framework to make the class name the first uppercase camel case of the js file name.
If the file name is abc-def.js, it will be export class AbcDef.
If the file name is abc_def.js, it will be export class AbcDef.
When <button data-name="sample">sample</button> is clicked, sample_click method is executed.
This framework is designed to execute the method of js file when an event occurs in the tag with the data-name attribute.
Event object is passed as the argument of the method.
It is a rule of this framework that the left side of _ is the data-name attribute value.
It is a rule of this framework that the right side of _ is the event name


Framework movement
This framework works based on rules, not settings.
Import the corresponding js file from the modules directory from the current URL and the data-page-root attribute value.
The modules directory must be in the same hierarchy as fairysupport.min.js
fairysupport.min.js is automatically generated directly under distWork/js by npm run watch_local
src/js/modules directory is copied to distWork/js by npm run watch_local
Therefore, the developer must create the modules directory directly under src/js.
When this framework imports js corresponding to the web page under the modules directory, it bind the tag with the data-name attribute value in the web page and the method of the js class.
If you write a method named [data-name attribute value_event name], this framework will automatically bind it with the tag with the data-name attribute value in the web page.


Multiple processing

Let's add more methods to index.js and add them to data-name separated by commas.

index.js 
export class Index {

    constructor() {
    }

    sample_click(event) {
        alert("Hello fairysupport");
    }

    second_click(event) {
        alert("second");
    }

}
index.html 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div><button data-name="sample,second">sample</button></div>
</body>
</html>

Added the second_click method.
Added second to data-name attribute.
Let's start npm run watch_local and npm run server and check the operation.
Hello fairysupport and second alert should be output


Try rewriting the return value of sample_click to false

index.js 
export class Index {

    constructor() {
    }

    sample_click(event) {
        alert("Hello fairysupport");
        return false;
    }

    second_click(event) {
        alert("second");
    }

}

When multiple methods are bind to the data-name attribute separated by commas, If the previously executed method returns false, the later method will not be executed.


Pre-processing, post-processing

sample_click、second_clickと2つメソッドを定義しましたが、共通の前処理と後処理を定義できます
You can define pre-processing and post-processing common to sample_click and second_click

index.js 
export class Index {

    constructor() {
    }

    beforeEvent(event) {
        console.log("beforeEvent");
        console.log(event);
    }
    
    afterEvent(event, result) {
        console.log("afterEvent");
        console.log(event);
        console.log(result);
    }

    sample_click(event) {
        alert("Hello fairysupport");
    }

    second_click(event) {
        alert("second");
    }

}

We created a beforeEvent. Event object is passed as an argument.
beforeEvent is the common pre-processing of events.
It is a rule of this framework to the method name is beforeEvent.
I created an afterEvent. The first argument is the event object and the second argument is the return value of sample_click or second_click.
afterEvent is a common post-processing of the event.
It is a rule of this framework to the method name is afterEvent.


Because index.js is ordinary JavaScript, you can also define common processing in the parent class.

src/js/base/parentController.js 
export class ParentController {

    constructor() {
    }

    beforeEvent(event) {
        console.log("beforeEvent");
        console.log(event);
    }
    
    afterEvent(event, result) {
        console.log("afterEvent");
        console.log(event);
        console.log(result);
    }

}
index.js 
import {ParentController} from "../base/parentController.js";

export class Index extends ParentController {

    constructor() {
        super();
    }

    sample_click(event) {
        alert("Hello fairysupport");
    }

    second_click(event) {
        alert("second");
    }

}

Pre-processing and post-processing when binding

You can define pre-processing and post-processing when a tag with data-name attribute bind a method of this class.

index.js 
export class Index {

    constructor() {
    }

    beforeName(data) {
        console.log("beforeName");
        console.log(data);
    }
    afterName(data) {
        console.log("afterName");
        console.log(data);
    }

    sample_click(event) {
        alert("Hello fairysupport");
    }

    second_click(event) {
        alert("second");
    }

}

We created beforeName. Arguments are passed an object with name: data-name attribute value, event: event name, and value: DOM of the tag with data-name attribute.
beforeName is the pre-processing when it is binding
It is a rule of this framework to method name is beforeName
We created afterName. Arguments are passed an object with name: data-name attribute value, event: event name, and value: DOM of the tag with data-name attribute.
afterName is the post-processing when it is binding
It is a rule of this framework to method name is afterName


Pre-processing and post-processing when unbind

You can define pre-processing and post-processing when the tag with data-name attribute unbind method of this class.

index.html 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div><button id="sample" data-name="sample,second">sample</button></div>
    <div><button data-name="remove">remove</button></div>
</body>
</html>
index.js 
export class Index {

    constructor() {
    }

    beforeRemoveName(data) {
        console.log("beforeRemoveName");
        console.log(data);
    }
    afterRemoveName(data) {
        console.log("afterRemoveName");
        console.log(data);
    }

    sample_click(event) {
        alert("Hello fairysupport");
    }

    second_click(event) {
        alert("second");
    }

    remove_click(event) {
        delete document.getElementById('sample').dataset.name;
    }

}

We created beforeRemoveName. Arguments are passed an object with name: data-name attribute value, event: event name, and value: DOM of the tag with data-name attribute.
beforeRemoveName is the pre-processing when it is unbinding
It is a rule of this framework to method name is beforeRemoveName
We created afterRemoveName. Arguments are passed an object with name: data-name attribute value, event: event name, and value: DOM of the tag with data-name attribute.
afterRemoveName is the post-processing when it is unbinding
It is a rule of this framework to method name is afterRemoveName
Click the remove button to unbind, and you click the sample but web page is not response.


Error handling

You can define a method to be executed when an exception is throw

index.html 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div><button id="sample" data-name="sample">sample</button></div>
</body>
</html>
index.js 
export class Index {

    constructor() {
    }

    sample_click(event) {
        throw "error";
    }

    errorHandle(event, exception) {
        console.log("errorHandle");
        console.log(event);
        console.log(exception);
    }
    
}

We created an errorHandle. Arguments are event objects, exception are passed.
It is a rule of this framework to method name is errorHandle.


End processing

You can define a method that will be executed even if the process is successful or the exception is throw.

index.html 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div><button data-name="sample">sample</button></div>
    <div><button data-name="sample2">sample2</button></div>
</body>
</html>
index.js 
export class Index {

    constructor() {
    }

    sample_click(event) {
        return "sample";
    }

    sample2_click(event) {
        throw "sample2";
    }

    errorHandle(event, exception) {
        console.log("errorHandle");
        console.log(event);
        console.log(exception);
    }
    
    finalHandle(event, returnValue) {
        console.log("finalHandle");
        console.log(event);
        console.log(returnValue);
    }
}

We created a finalHandle. The argument is an event object, the return value of the processed method is passed.
It is a rule of this framework to method name is finalHandle.


Get module

You can get an instance of module from anywhere called $f.getModuleController()


Next page Binding class fields and tags on the screen

table of contents