JavaScript Framework fairy support js
table of contents
Others

You can add query parameters as an anti-cache when getting module, component, template, msg.json.
Add the data-version attribute to the script tag loading fairysupport.min.js. In case of data-version="1", ?1 is added.

<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page" data-version="1"></script>

This framework first load the module. You can define a function if an error occurs at that time.
Let's define function fairysupportInitFail(retryCount, error){}.
If fairysupportInitFail return true, it will go to load module, msg.json again.
The first argument of fairysupportInitFail is the number of reload.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script>
function fairysupportInitFail(retryCount, error){
    console.error(error);
    if (retryCount >= 3) {
        return false;
    } else {
        return true;
    }
}
</script>
<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><button data-name="sample">sample</button></div>
</body>
</html>

You can also define a retry when loading a template that is in a separate file fails.
Let's define function fairysupportTemplateFail(retryCount, error){}.
If fairysupportTemplateFail return true, it will go to load the template again.
The first argument of fairysupportTemplateFail is the number of reload.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script>
function fairysupportTemplateFail(retryCount, error){
    console.error(error);
    if (retryCount >= 3) {
        return false;
    } else {
        return true;
    }
}
</script>
<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><button data-name="sample">sample</button></div>
</body>
</html>

You can also define a retry if the component fails to load.
Let's define function fairysupportComponentFail(retryCount, error){}.
If fairysupportComponentFail return true, it will go to load the component again.
The first argument of fairysupportComponentFail is the number of reload.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script>
function fairysupportComponentFail(retryCount, error){
    console.error(error);
    if (retryCount >= 3) {
        return false;
    } else {
        return true;
    }
}
</script>
<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><button data-name="sample">sample</button></div>
</body>
</html>

Next page Target browser

table of contents