使用 Typescript 的延迟加载模式答案

【问题标题】：Lazy loading Pattern with Typescript使用 Typescript 的延迟加载模式
【发布时间】：2017-05-13 17:20:48
【问题描述】：

因此，对于 C# 和其他语言，您可以在属性上使用 get 和 set 评估器，构建延迟加载模式非常简单。

我最近才开始使用 Type Script，并且正在尝试实现相同的目标。我正在通过 Ajax 调用加载具有大部分属性的 Poco。问题可以描述如下：

export interface IDeferredObject<T> {
    HasLoaded: boolean;
    DeferredURI: string;         
}

export class Library{        

    LibraryName: string;
    Books: IDeferredObject<Book[]>;        
}   

export class Book {
    Title: string;
    UniqueNumber: number;
}



window.onload = () => {
    //Instantiate new Library
    var lib = new Library();

    //Set some properties
    lib.LibraryName = "Some Library";

    //Set the Deferred URI Rest EndPoint
    lib.Books.DeferredURI = "http://somerestendpoint";
    lib.Books.HasLoaded;      



    //Something will trigger a  GET to lib.Books which then needs to load using the Deferred Uri       

};

几个问题：我

接口是否适合在这里使用？
我想在访问图书馆图书属性时触发加载操作。这甚至可能吗？

我知道这是一个非常开放的问题，只是在寻找有关如何构建该模式的一些指导。

谢谢

【问题讨论】：

标签： javascript design-patterns typescript lazy-loading

【解决方案1】：

Books 可以被声明为一个属性（参见get and set in TypeScript）并且在它的getter 中你可以启动一个ajax 调用。唯一的问题是您无法知道 ajax 调用何时返回，并且您不想在 Books 的值正在加载时阻止代码执行。您可以使用promise 来解决您的问题。下面的代码使用了JQuery Deferred Object，它由$.ajax调用返回（从1.5版本开始）。

一个变化 - HasLoaded 和 DeferredURI。它们应该驻留在“加载器类”中，即Library，因为在我的示例中，Library 类负责数据检索。

export class Library {
    private _loadedBooks: Book[];
    public get Books(): any {
        var result: any = null;
        // Check first if we've already loaded values from remote source and immediately resolve deferred object with a cached value as a result
        if(this.HasLoaded) {
            result = $.Deferred();
            result.resolve(this._loadedBooks);
        }
        else {
            // Initiate ajax call and when it is finished cache the value in a private field
            result = $.ajax(this.DeferredURI)
                          .done((values) => {
                              this.HasLoaded = true;
                              this._loadedBooks = values; 
                          });
        }
        return result;
   }
}

然后代码使用者将使用Books，如下所示：

var library = new Library();
library.Books.done((books: Book[]) => {
    // do whatever you need with books collection
});

对我来说，这种设计是反直觉的，并且此代码的用户不会期望 Books 字段/属性返回延迟对象。所以我建议把它改成方法，比如loadBooksAsync()。该名称表明此方法中的代码是异步的，并暗示返回值是一个延迟对象，该值稍后会在某处可用。

【讨论】：

【解决方案2】：

接口是否适合在这里使用？

是的，使用接口也可以简化TypeScript中的耦合问题

另请参阅：Programmers: Why are interfaces useful?

我想在访问图书馆图书属性时触发加载操作。这甚至可能吗？

是的，可以实现任何你喜欢的加载模式。在代码加载方面，TypeScript 只是 JavaScript。

但是，对于中小型应用程序，加载通常不在TypeScript 级别处理，而是由module loader 和script bundler 处理。

支持声明：

https://github.com/SlexAxton/yepnope.js#deprecation-notice

弃用通知

...yepnope 的作者认为前端社区现在提供了更好的加载脚本以及有条件加载脚本的软件。这些新工具的 API 都不像 yepnope 那样简单，但我们向您保证，这可能值得您花时间。我们不正式认可任何替代品，但是我们强烈建议您遵循使用模块的方法，然后使用 require.js、webpack、browserify 或许多其他优秀的依赖管理 构建工具...

另见：

【讨论】：