JavaScriptオブジェクト向けプログラミング実戦01 JavaScript Resource Loader

Webフロントエンドのプログラミングでは、javascriptスクリプトファイルとcssファイルを動的にロード/アンインストールする必要がある場合があります.例えば、Client Sildeの多言語化の切り替え、ウェブサイトの皮膚のダイナミックな切り替えなどを実現する必要があります.次に、Javasrcriptのオブジェクト向けプログラミングと組み合わせて、JavaScript/cssファイルの動的ロード/アンインストールを実現するためにHelper Classをいくつか作成します.

// JavaScriptLoader-Singleton-,Timo.Lee,[email protected]

var Timo = window.Timo || {};

Timo.Html=window.Timo.Html || {};

Timo.Html.ResourceLoader = (function() {

    //Private

    function RegisterJavaScript(URL) {

        var JsFile = document.createElement("script");

        JsFile.setAttribute("type", "text/javascript");

        JsFile.setAttribute("src", URL);

        document.getElementsByTagName("head")[0].appendChild(JsFile);

        return JsFile;

    } //eo end

    function RegisterCss(URL) {

        var CssFile = document.createElement("link");

        CssFile.setAttribute("rel", "stylesheet");

        CssFile.setAttribute("type", "text/css");

        CssFile.setAttribute("href", URL);

        document.getElementsByTagName("head")[0].appendChild(CssFile);

        return CssFile;

    } //eo end

    function ReplaceJavaScript(OriginalURL, NewURL) {

        var scriptList = document.getElementsByTagName("script");

        for (var i = scriptList.length; i >= 0; i--) {

            if (scriptList[i] && scriptList[i].getAttribute("src") != null && scriptList[i].getAttribute("src").indexOf(OriginalURL) != -1) {

                var newScript = RegisterJavaScript(NewURL);

                scriptList[i].parentNode.replaceChild(newScript, scriptList[i]);

            }

        }

    } //eo end

    function ReplaceCss(OriginalURL, NewURL) {

        var cssList = document.getElementsByTagName("link");

        for (var i = cssList.length; i >= 0; i--) {

            if (cssList[i] && cssList[i].getAttribute("href") != null && cssList[i].getAttribute("href").indexOf(OriginalURL) != -1) {

                var newCss = RegisterCss(NewURL);

                cssList[i].parentNode.replaceChild(newCss, cssList[i]);

            }

        }

    } //eo end

    function RemoveJavaScript(URL) {

        var scriptList = document.getElementsByTagName("script");

        for (var i = scriptList.length; i >= 0; i--) {

            if (scriptList[i] && scriptList[i].getAttribute("src") != null && scriptList[i].getAttribute("src").indexOf(URL) != -1) {

                scriptList[i].parentNode.removeChild(scriptList[i]);

            }

        }

    } //eo end

    function RemoveCss(URL) {

        var cssList = document.getElementsByTagName("link");

        for (var i = cssList.length; i >= 0; i--) {

            if (cssList[i] && cssList[i].getAttribute("href") != null && cssList[i].getAttribute("href").indexOf(URL) != -1) {

                cssList[i].parentNode.removeChild(cssList[i]);

            }

        }

    } //eo end

    return {

        RESOURCE_TYPE_CSS: "css",

        RESOURCE_TYPE_JavaScript: "javascript",

        //pulibc

        LoadResource: function(URL, ResourceType) {

            if (!ResourceType) {

                new Error("Missing Parameter ResourceType,The ResourceType would be [css] or [javascript].");

                return;

            }

            if (!URL || URL == "") {

                new Error("Missing Parameter URL.");

                return;

            }

            switch (ResourceType) {

                case "javascript":

                    RegisterJavaScript(URL);

                    break;

                case "css":

                    RegisterCss(URL);

                    break;

                default:

                    break;

            }



        } //eo end

       ,

        //public

        ReplaceResource: function(URL, ResourceType) {

            if (!ResourceType) {

                new Error("Missing Parameter ResourceType,The ResourceType would be [css] or [javascript].");

                return;

            }

            if (!URL || URL == "") {

                new Error("Missing Parameter URL.");

                return;

            }

            switch (ResourceType, OriginalURL, NewURL) {

                case "javascript":

                    ReplaceJavaScript(OriginalURL, NewURL);

                    break;

                case "css":

                    ReplaceCss(OriginalURL, NewURL);

                    break;

                default:

                    break;

            }

        } // eo end

       ,

        //public

        RemoveResource: function(URL, ResourceType) {

            if (!ResourceType) {

                new Error("Missing Parameter ResourceType,The ResourceType would be [css] or [javascript].");

                return;

            }

            if (!URL || URL == "") {

                new Error("Missing Parameter URL.");

                return;

            }

            switch (ResourceType) {

                case "javascript":

                    RemoveJavaScript(URL);

                    break;

                case "css":

                    RemoveCss(URL);

                    break;

                default:

                    break;

            }

        } //eo end

    };

})(); 

 
使用方法:

 <title>Html Resource Loader Demo</title>

    <script type="text/javascript" src="../JavaScript/Utils/Timo.Html.ResourceLoader.js"></script>

    <script type="text/javascript">

        window.onload = function() {

            //AppInit

        Timo.Html.ResourceLoader.LoadResource("/JavaScript/Test/Demo.js", Timo.Html.ResourceLoader.RESOURCE_TYPE_JavaScript);

        }

    </script>

 
END…..