Whole system

Let's change index.html and index.js to the following.

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="bind1"></div>
    <div data-obj="bind2"></div>
    <div><button data-name="sample">sample</button></div>
</body>
</html>

index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        this.bind1.textContent = $f.msg('key1', {'replace1': 'val1', 'replace2': 'val2', 'replace3': 'val3'});
        this.bind2.textContent = $f.msg('key2', {'replace1': 'val1', 'replace2': 'val2', 'replace3': 'val3'});
    }

}

Let's create src/js/msg/msg.json, src/js/msg/msg.ja.json, src/js/msg/msg.ja-JP.json, src/js/msg/msg.en.json and src/js/msg/msg.en-US.json

msg.json

{
     "key1" : "key1 => ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

msg.ja.json

{
     "key1" : "key1 => ja ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => ja ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

msg.ja-JP.json

{
     "key1" : "key1 => ja-JP ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => ja-JP ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

msg.en.json

{
     "key1" : "key1 => en ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => en ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

msg.en-US.json

{
     "key1" : "key1 => en-US ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
    ,"key2" : "key2 => en-US ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

Let's run it and click the sample button.
Value of json file created under src/js/msg is outputted above the sample button.
About $f.msg('key1', {'replace1': 'val1', 'replace2': 'val2', 'replace3': 'val3'}); calling in index.js.
$f is the object of this framework.
msg is method that returns the value of json under src/js/msg.
The second argument of the msg method is the value that replaces the part enclosed in ${} in json.If you don't want to replace it, please add \.
If you want to define a messages, define it in msg.json and get it by calling the msg method.
Because msg.json is json, enclose the key and value in double quotes. Not a single quote.
msg.json is created under src/js/msg. This is a framework rule.
Also, you can prepare msg.json as well as msg.{Language to use}.json
The language to be used is applied in the order of priority of the value of the query parameter lang, the value of navigator.language.
Therefore, if you access the URL with ?lang=en, the value defined in msg.en.json will be output.
If msg.{Language to use}.json does not exist, msg.json will be applied.
Therefore, if you delete msg.ja.json, msg.ja-JP.json, msg.en.json, msg.en-US.json and access web page, the value defined in msg.json will be output.

Page specific

Let's create src/page/sub/index.html, src/js/modules/sub/index.js

src/page/sub/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="bind1"></div>
    <div data-obj="bind2"></div>
    <div data-obj="bind3"></div>
    <div data-obj="bind4"></div>
    <div><button data-name="sample">sample</button></div>
</body>
</html>

src/js/modules/sub/index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        this.bind1.textContent = $f.msg('key1', {'replace1': 'val1', 'replace2': 'val2', 'replace3': 'val3'});
        this.bind2.textContent = $f.msg('key2', {'replace1': 'val1', 'replace2': 'val2', 'replace3': 'val3'});
        this.bind3.textContent = $f.msg('key_sub', {'replace1': 'val1', 'replace2': 'val2', 'replace3': 'val3'});
        this.bind4.textContent = $f.msg('key_sub_index', {'replace1': 'val1', 'replace2': 'val2', 'replace3': 'val3'});
    }

}

Let's create src/js/msg/sub/msg.en.json, src/js/msg/sub/index/msg.en.json

src/js/msg/sub/msg.en.json

{
     "key_sub" : "key_sub => en ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

src/js/msg/sub/index/msg.en.json

{
     "key_sub_index" : "key_sub_index => en ${replace1}--\\${replace1}--${replace1}--${replace2}--${replace3}"
}

Let's access sub/index.html with ?lang=en.
When you click the sample button, the message above the sample button will be output.
msg.json created under src/js/msg/sub can be used only when the js file corresponding to the web page exists under ssrc/js/modules/sub or src/js/modules/sub.js.
msg.json created under src/js/msg/sub/index can be used only when the js file corresponding to the web page exists under src/js/modules/sub/index or src/js/modules/sub/index.js

Next page template

table of contents