从浏览器缓存访问文件时需要JS Refress问题

时间:2017-02-10 11:04:40

标签: javascript jquery kendo-ui requirejs

使用requiredjs。部署到任何环境(现在从本地截图)后,我得到刷新问题。页面加载不正确。我在firebug中检查了网络选项卡。它的显示(下图)。当文件获得200 OK(BF Cache)状态时,页面加载不正确。

enter image description here

错误:

enter image description here

给出ctrl + f5

所有页面都正确显示。

enter image description here

有些时候我需要提供很多ctrl + f5,然后只需要工作asexpected

我的requirejs配置文件:

require.config({
    baseUrl: "../../../../../../../Scripts",
    //waitSecond: 0,
    //urlArgs : "q="+new Date().getTime(),
    enforcedefine: true,
    paths: {
        //RequireJS Plugins.
        'text': 'lib/requirejs/text',
        'domReady': 'lib/requirejs/domReady',
        'app': 'app',
        'noext': 'lib/requirejs/noext',

        // Shared Libraries.
        'jquery': 'lib/Kendo/jquery.min',
        'jqueryMigrate': 'lib/jquery-migrate-1.2.1.min',
        'jszip': 'lib/jszip',
        'kendo': 'lib/Kendo/kendo.all.min',
        'materialize': 'lib/materialize/materialize',
        'jqueryValidate': 'jquery.validate.min',
        'jsignature': 'lib/jSignature/jSignature.min',
        'jqueryMaskedinput': 'lib/jquery/jquery.maskedinput.min',
        'jqueryMd5': 'lib/jquery/jquery.md5',
        'truckNotifier': 'Controls/serviceTruck.Notifier'
    },
    shim: {
        'app': {
            deps: ['kendo']
        },
        'kendo': {
            deps: ['jquery', 'jszip'],
        },
        'jqueryExtensions': {
            deps: ['jquery'],
        },
        'materialize': {
            deps: ['jquery', 'kendo'],
        },
        'krossRespJs': {
            deps: ['jquery'],
        },
        'jqueryMaskedinput': {
            deps: ['jquery'],
        },
        'truckUploadSelector': {
            deps: ['jquery'],
        },
        'underscore': {
            exports: '_'
        }
    }
});

app.js文件:

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define([
            'domReady!',
            'text',
            'noext',
            'jquery',
            'kendo',
            'jszip',
            'truckNotifier'
        ], factory);
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function (domReady,text,noext,$,kendo,jszip,truckNotifier) {
    'use strict';
    var app = kendo.observable({
        // ---- PUBLIC FIELDS ----
        DATE_FORMAT: 'MM/dd/yyyy',
        DATE_MASK: '99/99/9999',
        DATE_TIME_FORMAT: 'MM/dd/yyyy HH:mm',
        DATE_TIME_MASK: '99/99/9999 99:99',
        PHONE_MASK: '(999) 999-9999',
        TIME_FORMAT: 'HH:mm',
        TIME_MASK: '99:99',
        $notifier: $('#notify_container'),
        router: new kendo.Router(),
        isInitialized: false,
        /** This call sets up background components of the current page.  */

        initialize: function () {
            var self = this;
            // Initialize this first so it can show loading while the rest 
            // of this module loads.

            if (!self.isInitialized) {
                $('.link-external').attr('target', '_blank');

                $('#notify_container').serviceTruckNotifier();
                self.isInitialized = true;
            }

            window.JSZip = jszip;

        },
        showPleaseWait: function (show) {
        },
        /* Pops up a notification at the top of the page. */
        notify: function (type, message) {
            var types = {
                'push': 'notifyPush',
                'info': 'notifyInfo',
                'success': 'notifySuccess',
                'error': 'notifyError',
                'warn': 'notifyWarn',
                'expired': 'notifyExpired'
            };
            this.$notifier.serviceTruckNotifier(types[type], message);
        }
    });
    app.initialize();
    return app;
}));
在View Page中使用

脚本:

<script>
    require([
        'domReady!',
        'text',
        'noext',
        'app',
        'jquery',
        'jqueryValidate',
        'kendo',
        'truckNotifier'
    ],
    function (
        domReady,
        text,
        noext,
        app,
        $,
        jqueryValidate,
        kendo,
        truckNotifier
        ) {
        var notifier = $('#notify_container'),
            message = '@(ViewBag.Message)';
        $("#primaryTextButton").kendoButton();
        $('.all-content').removeClass('dn');
        $('.mcenter').addClass('dn');
        if (message != "") {
            notifier.serviceTruckNotifier("notifyExpired", "@C.LINK_HAS_BEEN_EXPIRED");
        }
    });
</script>

HTML文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/Styles/all/css")
    <script src="~/Scripts/lib/requirejs/require.js"></script>
    <script src="~/Scripts/config.js"></script>

</head>
<body id="@RenderSection("BodyId", false)">
    @{
        System.Reflection.Assembly web = typeof(ServiceTruck.Web.Models.ExternalLogin).Assembly;

        System.Reflection.Assembly assembly = System.Reflection.Assembly.GetExecutingAssembly();
        System.Diagnostics.FileVersionInfo fvi = System.Diagnostics.FileVersionInfo.GetVersionInfo(web.Location);
        string version = fvi.FileVersion;

        System.Reflection.AssemblyName webName = web.GetName();
        string myVersion = version.ToString();
        ViewBag.Version = myVersion;
    }

    @RenderSection("featured", required: false)
    <section class="container-fluid">
        @RenderBody()
    </section>
    <!-- Service Truck Layout Footer Start -->
    <footer class="copy-right">
        <div class="col-md-6 text-left">
            <p>All rights reserved.</p>
            <p>Copyright © 2016 <a href="#">Name</a>.</p>
        </div>
        <div class="col-md-6 text-right">
            <p>Build @myVersion</p>
            <p>Recommended Browsers: Internet Explorer 11, Firefox 48, Chrome 52</p>
        </div>
    </footer>
    <!-- Service Truck Layout Footer End -->
    @RenderSection("scripts", required: false)

</body>
</html>

1 个答案:

答案 0 :(得分:0)

您的配置绝对错误的一件事是shim的{​​{1}}:

app

您的 'app': { deps: ['kendo'] }, 模块是AMD模块:它调用app。所以你不能使用define。为无法从中受益的模块设置shim可能会导致未定义的行为。

我有时会对此进行实验,并且从一个版本的RequireJS到下一个版本的结果不一致。关键是为AMD模块设置shim没有定义的语义。