JavaScript フレームワーク fairy support js
目次
moduleのプロパティと画面上の要素の紐づけ

単一紐づけ

index.html、index.jsを下記に変更しましょう

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 data-obj="obj"></div>
    <div><input type="text" data-name="sample"></div>
</body>
</html>
index.js 
export class Index {

    constructor() {
    }

    sample_input(event) {
        this.obj.textContent = event.target.value;
    }

}

index.htmlにdata-obj属性を付けたタグを作成しました
実行して、画面上のテキストフィールドに値を入力すると、data-obj="obj"が付いたタグに入力した値が表示されます
このフレームワークはwebページ内のdata-obj属性値を持つタグとwebページに対応するjsクラスのプロパティを自動的に結びつけます
index.js内のthis.objはdata-obj="obj"が付いたタグのオブジェクトとなります
data-obj属性はdata-name属性とは違い、カンマ区切りで複数指定できません


複数紐づけ

index.html、index.jsを下記に変更しましょう

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 data-obj="obj"></div>
    <div data-list="list"></div>
    <div data-list="list"></div>
    <div><input type="text" data-name="sample"></div>
</body>
</html>
index.js 
export class Index {

    constructor() {
    }

    sample_input(event) {
        this.obj.textContent = event.target.value;
        
        for (const item of this.list.values()) {
            item.textContent = event.target.value;
        }
        
        /*
        これでも全く同じです
        this.list.forEach((item) => {
            item.textContent = event.target.value;
        });
        */
        
    }

}

index.htmlにdata-list属性を付けたタグを作成しました
実行して、画面上のテキストフィールドに値を入力すると、data-list="list"が付いたタグに入力した値が表示されます
このフレームワークはwebページ内のdata-list属性値を持つタグとwebページに対応するjsクラスのプロパティを自動的に結びつけます
data-objとの違いは、data-objは同一値が画面上に1つであるのに対して、data-listは画面上に同一値が複数存在可能であることです
js内でdata-listの付いたオブジェクトを取得するには、valuesメソッドを実行しforで1つづつ処理していくことになります
または、forEachメソッドを使い、引数に関数を渡して処理していくこともできます
data-list属性はdata-name属性とは違い、カンマ区切りで複数指定できません


結びつけられる時の前処理、後処理

data-obj、data-list属性を持つタグとこのクラスのプロパティが結びつけられるときの前処理と後処理を定義できます

index.js 
export class Index {

    constructor() {
    }

    beforeBindObj(data) {
        console.log("beforeBindObj");
        console.log(data);
    }
    afterBindObj(data) {
        console.log("afterBindObj");
        console.log(data);
    }

    beforeBindList(data) {
        console.log("beforeBindList");
        console.log(data);
    }
    afterBindList(data) {
        console.log("afterBindList");
        console.log(data);
    }

    sample_input(event) {
        this.obj.textContent = event.target.value;
        
        for (const item of this.list.values()) {
            item.textContent = event.target.value;
        }
        
    }

}

beforeBindObjを作成しました。引数はname:data-obj属性値、value:data-obj属性を持つタグのDOMを要素に持つオブジェクトが渡されます
beforeBindObjは結びつけられる時の前処理となります
afterBindObjを作成しました。引数はname:data-obj属性値、value:data-obj属性を持つタグのDOMを要素に持つオブジェクトが渡されます
afterBindObjは結びつけられる時の後処理となります
beforeBindListを作成しました。引数はname:data-list属性値、value:data-list属性を持つタグのDOMを要素に持つオブジェクトが渡されます
beforeBindListは結びつけられる時の前処理となります
afterBindListを作成しました。引数はname:data-list属性値、value:data-list属性を持つタグのDOMを要素に持つオブジェクトが渡されます
afterBindListは結びつけられる時の後処理となります


結びつけが解除される時の前処理、後処理

data-obj、data-list属性を持つタグとこのクラスのプロパティの結びつけが解除される時の前処理と後処理を定義できます

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 data-obj="obj"></div>
    <div data-list="list"></div>
    <div data-list="list"></div>
    <div><input type="text" data-name="sample"></div>
    <div><button data-name="remove">remove</button></div>
</body>
</html>
index.js 
export class Index {

    constructor() {
    }

    beforeRemoveObj(data) {
        console.log("beforeRemoveObj");
        console.log(data);
    }
    afterRemoveObj(data) {
        console.log("afterRemoveObj");
        console.log(data);
    }

    beforeRemoveList(data) {
        console.log("beforeRemoveList");
        console.log(data);
    }
    afterRemoveList(data) {
        console.log("afterRemoveList");
        console.log(data);
    }

    sample_input(event) {
        if (this.obj) {
            this.obj.textContent = event.target.value;
        }
        for (const item of this.list.values()) {
            item.textContent = event.target.value;
        }
        
    }

    remove_click(event) {
        if (this.obj) {
            delete this.obj.dataset.obj;
        }
        for (const item of this.list.values()) {
            delete item.dataset.list;
        }
        
    }

}

beforeRemoveObjを作成しました。引数はname:data-obj属性値、value:結びつけが解除されるDOMを要素に持つオブジェクトが渡されます
beforeRemoveObjは結びつけが解除される時の前処理となります
afterRemoveObjを作成しました。引数はname:data-obj属性値、value:結びつけが解除されるDOMを要素に持つオブジェクトが渡されます
afterRemoveObjは結びつけが解除される時の後処理となります
beforeRemoveListを作成しました。引数はname:data-list属性値、value:結びつけが解除されるDOMを要素に持つオブジェクトが渡されます
beforeRemoveListは結びつけが解除される時の前処理となります
afterRemoveListを作成しました。引数はname:data-list属性値、value:結びつけが解除されるDOMを要素に持つオブジェクトが渡されます
afterRemoveListは結びつけが解除される時の後処理となります


削除処理

data-obj、data-list属性を持つタグを画面上から削除できます

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 data-obj="obj"></div>
    <div data-list="list"></div>
    <div data-list="list"></div>
    <div><input type="text" data-name="sample"></div>
    <div><button data-name="remove">remove</button></div>
</body>
</html>
index.js 
export class Index {

    constructor() {
    }

    sample_input(event) {
        if (this.obj) {
            this.obj.textContent = event.target.value;
        }
        for (const item of this.list.values()) {
            item.textContent = event.target.value;
        }
        
    }

    remove_click(event) {
        if (this.obj) {
            this.obj = null;
        }
        for (const item of this.list.values()) {
            this.list.remove(item);
        }
        
    }

}

remove_click内にて
data-objと紐づいたプロパティにnullを格納しています
data-listと紐づいたプロパティのremoveメソッドを実行しています
removeボタンをクリックするとdata-obj、data-list属性を持つタグが画面から除去されます


置換処理

data-obj、data-list属性を持つタグを入れ替えできます

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 data-obj="obj"></div>
    <div data-list="list"></div>
    <div data-list="list"></div>
    <div><input type="text" data-name="sample"></div>
    <div><button data-name="replace">replace</button></div>
</body>
</html>
index.js 
export class Index {

    constructor() {
    }

    sample_input(event) {
        if (this.obj) {
            this.obj.textContent = event.target.value;
        }
        for (const item of this.list.values()) {
            item.textContent = event.target.value;
        }
        
    }

    replace_click(event) {
        let div = document.createElement('DIV');
        div.dataset.obj = 'obj';
        div.textContent = 'replace';
        this.obj = div;
        
        for (const item of this.list.values()) {
            div = document.createElement('DIV');
            div.dataset.list = 'list';
            div.textContent = 'replace';
            this.list.replace(item, div);
        }
        
    }

}

replaceボタンを設置しました
data-objと紐づいたプロパティにcreateElementで新たに作成したオブジェクトを格納しています
data-listと紐づいたプロパティのreplaceメソッドを実行し、createElementで新たに作成したオブジェクトと入れ替えています


data-list属性を持つタグと紐づいたプロパティのメソッド

data-list属性を持つタグと紐づいたプロパティはvalues、forEach、remove、replaceの他にtoArrayメソッドとsizeメソッドとhasメソッドを持ちます
toArrayメソッドは引数無しで、このプロパティに紐づいているDOMを配列にして返します
sizeメソッドは引数無しで、このプロパティに紐づいているタグの数を返します
hasメソッドは引数が1つ必要で、DOMを渡してください。渡されたDOMがこのプロパティに含まれている場合、trueを返します


次ページmoduleの初期処理

目次