Question

我一直试图弄清楚为什么这两个原型对象的范围有点麻烦 - 第一个是基于PreloadJS的预加载器，第二个是我的QUnit测试。我已经解决了这个问题，但是我意外地删除了某人善意回复的原始帖子，所以我转发了这个工作版本，以便对那个人说谢谢

'use strict';

define(['preloadjs'], function (PreloadJS) {
    var Preloader = function (model) {
        this.model = model;
        this.totalLoaded = 0;
        this.context = model.context;
        this.isFinished = false;

        this.onStart = (model.onStart != null) ? model.onStart : function (e) {};
        this.onUpdate = (model.onUpdate != null) ? model.onUpdate : function (e) {};
        this.onComplete = (model.onComplete != null) ? model.onComplete : function (e) {};

        this.preload = null;

        // make sure assets exists
        if (model.assets == null) {
            model.assets = {};
        }

        this.init();
    };

    /**
     * initialise preloader
     * @return {null}
     */
    Preloader.prototype.init = function() {
        var self = this;

        var preload = new PreloadJS();
        if (this.onStart != null) { 
            this.onStart(); 
        }
        preload.onProgress = function (e) { self.onUpdate(e); };
        preload.onComplete = function (e) { self.handleComplete(e); };
        preload.onFileLoad = function (e) { self.onFileLoad(e); };
        preload.loadManifest(this.model.manifest);

        this.preload = preload;
    };

    Preloader.prototype.handleComplete = function(e) {
        this.isFinished = true;

        this.onComplete(e);
    };

    /**
     * called when each file in the manifest is loaded - if it's an image, 
     * create an image object and populate its properties
     * @param  {event} e    event object
     * @return {null}
     */
    Preloader.prototype.onFileLoad = function(e) {
        if (e.type == PreloadJS.IMAGE) {
            var self = this;

            var img = new Image();
            img.src = e.src;
            img.onload = function () { self.handleFileComplete(); };
            this.model.assets[e.id] = img;
        }
    };

    /**
     * iterates totalLoaded when each image has intialised
     * @return {null}
     */
    Preloader.prototype.handleFileComplete = function() {
        this.totalLoaded++;
    };

    // public interface
    return Preloader;
});

这是预加载器QUnit测试

'use strict';

define(function (require) {
    var Preloader = require('Preloader');

    var manifest = [
        { src : '../app/images/splash-screen.jpg', id : 'splash-screen' }
    ];

    var assets = {};

    var startFired = 0;
    var updateFired = 0;
    var completeFired = 0;

    var totalLoaded = 0;

    var scopetest = 'test';

    var loaded = 0;

    var pl = new Preloader({
        manifest : manifest,
        assets : assets, 
        onStart : function (e) {
            startFired++;
        },
        onUpdate : function (e) {
            updateFired++;

            totalLoaded = e.loaded;
        },
        onComplete : function (e) {
            completeFired++;

            // adding the unit tests into the onComplete function fixed the inconsistent test results i was getting
            test('Preloader tests', function () {
                expect(4);

                equal(startFired, 1, 'onStart was called once exactly');
                ok((updateFired > 0), 'onUpdate was called at least once. Total: ' + updateFired);
                equal(completeFired, 1, 'onComplete was called once exactly');
                notEqual(pl.model.assets['splash-screen'], undefined, 'there was at least one asset loaded: ' + pl.model.assets['splash-screen']);

            });

            QUnit.start();
        }
    });

    QUnit.stop();
});

谢谢您的回复并对删除帖子道歉

Answer 1

OP已经回答了这个问题 - 这是我的接受

在requirejs和qunit中的javascript范围

1 个答案: