javascript - 我应该如何使用 TypeScript 在 AMD 模式下调用 Spin.js？

Question

我必须使用 Spin.js 实现加载效果。下面是我的代码:

/// <amd-dependency path="spin" />
export class SpinnerUtil {
    private target: HTMLElement;
    private spinner: Spinner;

    public constructor(target: HTMLElement) {
        this.target = target;
    }

    public Spin() {
        var target = this.target;
        if (target.childElementCount == 0) {
            this.spinner = new Spinner().spin(target);
        }
    }

    public Stop() {
        this.spinner.stop();
        $(this.target).empty();
    }
}

我在另一个 TypeScript 文件中这样调用它:

初始化:

require.config({
baseUrl: 'javascripts',
paths: {
    'jquery': '../libraries/jquery/jquery-2.1.0',
    'spin': '../libraries/spin/spin-1.3.3'
},

调用:

import SP = require('utilities/Spin');

var spinnerId = 'spinnerView' + this.viewId;
this.$el.find('#spinnerView').attr('id', spinnerId);
var target: HTMLElement = document.getElementById(spinnerId);
this.spinner = new SP.SpinnerUtil(target);
this.spinner.Spin();

当我在浏览器中运行这个应用程序时，它抛出了如下错误:

Uncaught ReferenceError: Spinner is not defined.

(Spin.js已经在context中加载，但是Spinner实例还是无法初始化。)

我应该怎么做才能解决这个问题？

---

你好，这是我的简单测试代码:

/// <reference path="../typing/require.d.ts" />

require.config({
    baseUrl: '../',
    paths: {
        'jquery': '../libraries/jquery-2.1.0',
        'spin': '../libraries/spin-1.3.3'
    },
    shim: {
        jquery: {
            exports: '$'
        },
        spin: {
            exports: '$'
        }
    }
}); 

//require(['jquery','spin'], ($,Spinner) => {
    $(function () {
        new Spinner().spin($('#content')[0]);
    });
//});

效果很好，但是如果我删除这一行'require(['jquery','spin'], ($,Spinner) => {'，它会抛出一个编译错误“找不到符号'Spinner' "，我怎么能在没有'require'语句的情况下使用 Spinner？我应该导入一些东西吗？

Answer 1

此处的问题出在您导入的 spin.js 库中。该库需要将 spin() 函数附加到 JQuery ($) - 以便函数 spin() 可用于任何 JQuery 对象。
你需要在你的 require.config 中添加一个 shim，如下所示:

require.config({
baseUrl: 'javascripts',
paths: {
    'jquery': '../libraries/jquery/jquery-2.1.0',
    'spin': '../libraries/spin/spin-1.3.3'
},
shim: {
spin: {
            exports: '$'
        }
}

这将扩展 JQuery 库函数以包含自旋库函数。
希望这会有所帮助。