基于打字稿模块的应用程序的通用与应用程序初始化

Question

我正在将我现有的 JS 应用程序（购物车 + 相关网站）转移到 Typescript。

我现在在我的 JS 文件中有一大堆函数来初始化不同的外部组件

    // Initialize components
    initBrowser();
    initKnockout();
    initModernizr();
    initjQM();
    initGoogleAnalytics();

他们设置了从window.console.log 到knockout.js 的所有绑定、自定义Modernizr.js 测试和jQuery 移动页面转换逻辑。

我的问题是我应该如何在 Typescript 模块中最好地使用模块来组织和初始化这样的事情。 （我的应用很小，我只使用内部模块）

选项 1：没有“类”的模块，只是初始化所有内容

module RR
{
     initBrowser();
     initKnockout();
     initModernizr();
     initJQM();
     initGoogleAnalytics();

     // define functions
}

选项 2：带有“静态初始化程序”类的模块

module RR 
{
    class AppInitializer
    {
        private static instance:AppInitializer = new AppInitializer(); 

        constructor()
        {
           initBrowser();
           initKnockout();
           initModernizr();
           initJQM();
           initGoogleAnalytics();             
        }

        // define functions
     }
}

选项 3：初始化所有内容且仅创建一次的单个应用程序对象

module RR 
{
    class MyApp
    {    
        constructor()
        {
           init();             
        }

        init()
        {
            initBrowser();
            initKnockout();
            initModernizr();
            initJQM();
            initGoogleAnalytics(); 
        }

        // define functions
     }

     // create the application
     var MyApp = new MyApp();

}

选项4：......你的想法......

什么是初始化与特定应用程序模块或类没有真正关系的此类事物的好方法。

此外，我还有其他初始化函数来设置我的 jQuery 不显眼的初始化，例如。我的登录按钮，客户服务页面逻辑。这些功能是特定于实际网站的，与我之前提到的功能不同

    // initialize shopping cart
    initLogin();
    initCustomerService();
    initVideo(true);

到目前为止，我只是在一个闭包中一次性初始化了所有内容，但我想更好地组织事情，并希望得到任何建议。

Answer 1

您可以使用外部模块。 Bootstrap.ts：

// Load components
import initBrowser = require('./initBrowser');
import initKnockout = require('./initKnockout');
import initModernizr = require('./initModernizr');
import initjQM = require('./initjQM');
import initGoogleAnalytics = require('./initGoogleAnalytics');

// Initialize components
initBrowser();
initKnockout();
initModernizr();
initjQM();
initGoogleAnalytics();

这样您就不必担心对 JavaScript 文件进行排序。代码编写方式中的顺序是明确的并且您不会不必要地污染window。

要了解有关外部模块的更多信息：http://www.youtube.com/watch?v=KDrWLMUY0R0&hd=1