• 也说JS脚本加载控制


    问题背景

      前端采用的 iframe + html 做后台管理系统。现在js、jquery插件非常多,每次页面都是引用就类似这样:

        <script src="../Scripts/jquery-1.7.1.js"></script>
        <script src="../Scripts/uploadify/jquery.uploadify.js"></script>
        <script src="../Scripts/uploadify/swfobject.js"></script>
        <link href="../Scripts/uploadify/uploadify.css" rel="stylesheet" />

      有时候需要更新其中一个组件,为了避免客户端浏览器手动刷新,一般的做法是增加版本号,比如 xxx.js?v=1111。

          或者说,需要删掉某个组件,引用某个组件。

          在这2种情况下,都需要针对每个页面,增加 script 引用。每次新建一个html,就要把之前的页面的 script 引用都复制过来,有木有?

    解决办法

      现在有Require.js , sea.js ,labjs 等等各种高大上的框架。

      以上框架中,楼主仅试过用lab.js解决这种问题,它可以很好的控制脚本的异步加载,以及脚本的依赖,然后可以在脚本加载完毕后,做初始化的操作。当时仅仅是做了一个Demo,一直过了很长时间,也没有使用,原因无它,如果希望能控制脚本的动态加载时,又希望像以前一样直接在页面上引用script,换句话来说,楼主要的不是重写脚本引用方式,而是在原有基础上稍作改善。

         关键方法很简单,使用了 document.writeIn('...') 来加载。这种加载方式,是同步加载,就是它了。

      具体思路则是,定义一个数组存放脚本以及css路径,建议使用绝对路径,这样不会因为页面所在的位置而导致脚本加载不上。

         然后做了一点点小改进,同步加载js,异步加载css。同时支持设置版本号,这样可以轻松控制客户端的自动更新。大致实现代码如下:

      在实际应用过程中,这个js脚本,是会经常发生变更,所以必须再通过 document.writeIn 加载这个脚本。首先可以以如下形式写在页面中

    <script>
    document.writeIn('...');
    </script>

      这样略微不方便啦。于是楼主又写了一个脚本,仅仅只有如上一行代码,就是用来控制加载前面定义通用的脚本组件。这个只有一行代码的脚本,是万年不变的,所有页面直接引用即可,由它来控制后面的脚本变化。

    测试

      上面说,脚本加载的形式是同步的,为了证明这一点,楼主不得不写一点简单的例子。看看下面的html代码:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    </head>
    <body>
        <input type="text" id="uid" value="111" />
    </body>
    </html>
    <script src="Scripts/com/boot.js"></script>
    <script>
        alert($("#uid").val());
    </script>

      而boot.js就是引导脚本,就是之前提到的一行代码:

    /*引导加载所有的js文件*/document.writeln("<script src='/Scripts/com/bootallscript.js?v=" + Math.random() + "'></script>");

      bootallscript.js就是最核心的了,复杂加载所有的js和css。

    (function () {
        var base = '/Scripts/';
        var loader = {
            base: '/Scripts/',
            ver: 1,
            content: [ //定义需要加载的脚本
                  'jquery-1.7.1.min.js'
            ],
            loadcss: function (cssUrl) {
                var link = document.createElement("link");
                link.rel = "stylesheet";
                link.type = "text/css";
                link.href = cssUrl;
                document.getElementsByTagName("head")[0].appendChild(link);
            },
            run: function () {
                for (var i in loader.content) {
                    var c = loader.content[i];
                    if (c.length <= 2) continue;
                    var p = loader.base + c + "?v=" + loader.ver;;
                    var type = c.substr(c.length - 2, c.length);
                    if (type === 'js') { //同步加载js文件
                        document.writeln("<script src='" + p + "' ></script>");
                    } else { //异步加载css文件
                        loader.loadcss(p);
                    }
                }
            }
        };
        //加载js脚本 
        loader.run();
    })();

      运行后会发现,页面在加载完成后,使用jQuery获取到了控件的值。这种方式和原来的直接脚本引用,差别不大吧。

      说到这里,我们新建页面后,只需要引用 boot.js就能加载上所有的组件,而页面逻辑相关的js,也可以直接引用在boot.js下方,没有改变原来的脚本引用习惯,又能极大的节省了代码,完善对脚本的控制,这就是楼主想要的效果了。  

      写在最后,当然mvc对类似的问题有了解决方案,这里不探讨,因为讨论的是 前端 iframe+html 无 C# 。

      示例下载

  • 相关阅读:
    eclipse版本、代号
    eclipse中jdk及编译器版本问题
    改变cmd命令行颜色
    mysql-installer-community-8.0.12.0的安装
    算法简介
    Java--将数据以文本形式导出
    安装MySQL
    网络配置
    电脑拷软件到其他设备
    探针设备
  • 原文地址:https://www.cnblogs.com/codealone/p/3798366.html
Copyright © 2020-2023  润新知