Question

我在打字稿中创建了一个小型库，我希望能够在很多项目中使用，有些项目使用requirejs，而其他项目则没有。

我已经看到其他脚本执行此操作，它使用define并检查AMD，如果它们不存在，则将对象附加到窗口对象或其他内容。

我想知道最好的方法是什么？如果可能的话，任何快捷方式或w / e都可以在打字稿中进行。

这是一个示例模块

export module Utilities {
//This is used to grab query string values from a javascript file
//pass the filename (without .js) into the constructor, then use
//GetValue(name) to find the query string values
export class QueryStringHelper {
    names: string[] = [];
    values: string[] = [];
    constructor(public fileName: string) {
        this.getQueryStringNameAndValues();
    }
   // GetValue(queryStringName: string) => number;

    GetValue(queryStringName: string) {
        var i = this.names.indexOf(queryStringName);
        if (i == -1)
            return undefined;
        else {
            if (this.values.length > i)
                return this.values[i];
        }
    }
    getQueryStringNameAndValues() {
        var doc: HTMLDocument = document;
        var scriptQuery: string = '';

        // Look for the <script> node that loads this script to get its parameters.
        // This starts looking at the end instead of just considering the last
        // because deferred and async scripts run out of order.
        // If the script is loaded twice, then this will run in reverse order.
        // take from Google Prettify
        for (var scripts = doc.scripts, i = scripts.length; --i >= 0;) {
            var script = <HTMLScriptElement>scripts[i];
            var match = script.src.match("^[^?#]*\\/" + this.fileName + "\\.js(\\?[^#]*)?(?:#.*)?$");
            if (match) {
               scriptQuery = match[1] || '';
                // Remove the script from the DOM so that multiple runs at least run
                // multiple times even if parameter sets are interpreted in reverse
                // order.
                script.parentNode.removeChild(script);
                break;
            }
        }

        var that = this;
        scriptQuery.replace(
            /[?&]([^&=]+)=([^&]+)/g,
            function (_, name, value) {
                value = decodeURIComponent(value);
                name = decodeURIComponent(name);
                that.names.push(name);
                that.values.push(value);
                return "";
            });
        }
    }
}

当然，当我使用requireJS并将其加载到网站上的解释时，这是有效的，但是如果我尝试在没有requireJS的情况下加载它，我会得到明显的define is not defined异常。

我将如何制作......“可选”。

我确信之前已经回答了这个问题，但我无法弄清楚要搜索的内容（并且无法命名问题...可以随意编辑）

编辑示例

所以我知道这种方式有效，但这是一种正确的方式来做我正在寻找的东西吗？如果我这样做，将来会有什么问题？

//i guess by default this is attached to the window object
//so it's automatically available to anything that just includes it
class TestClass {
    constructor(public testValue: string) {
    }

    getTestValue(): string {
    return this.testValue;
    }
}
//attempt to support amd
if (typeof window['define'] === "function" && window['define']['amd']) {
    window['define']("TestClass", [], function () {
        return TestClass;
    });
}

这就产生了这个javascript

var TestClass = (function () {
    function TestClass(testValue) {
        this.testValue = testValue;
    }
    TestClass.prototype.getTestValue = function () {
        return this.testValue;
    };  
    return TestClass;
})();

if (typeof window['define'] === "function" && window['define']['amd']) {
    window['define']("TestClass", [], function () {
        return TestClass;
    });
}

Answer 1

这不是TypeScript支持的模式。原因是此技术仅适用于本身没有任何模块依赖关系的模块。您仍然可以使用TypeScript作为模块，但您必须自己致电define，而不是使用顶级export关键字。

使用打字稿制作AMD可选项

1 个答案: