javascript - 页面中有多个js文件，每个文件都以require() : bad practice or OK?开头

Question

我正在编写一个框架，允许您的模块定义在提供页面之前将哪些 JS 文件添加到页面中。这个想法是一个模块可能会添加如下内容:

require([ 'dojo/topic', 'dojo/_base/window', 'hotplate/hotDojoWidgets/AlertBar' ], function( topic, win, AlertBar
){
  globalAlertBar = new AlertBar( { background: '#FF4444' } );
  globalAlertBar.placeAt( document.body, 'first' );
  globalAlertBar.startup();

  topic.subscribe('globalAlert', function( message, displayFor ){
    displayFor = displayFor || 2500;
    globalAlertBar.set( 'message', message );
    globalAlertBar.show( displayFor );
  });
});

例如，这允许我允许应用程序周围的其他小部件发布 globalAlert 以显示警报栏。 现在:

• 添加到要加载的 JS 列表中的任何 JS/Dojo 文件都以“require”开头。对我来说，这只是异步代码，将在加载后的某个时刻运行。框架中以这种方式加载的大多数代码将等待主题发布，并采取相应的行动
• “应用程序”只是这些模块之一，它将订阅发布容器对象的主题
• 由 require() 加载的“正确”Dojo 小部件显然会使用“define”——一切如常，不用担心

问题:

1) 如果我在页面引用的 JS/Dojo 文件之一中运行 ready()，这将是页面级的 ready()，包括加载的所有 .js 文件在文件中？还是只针对当前文件加载的文件？

2)我意识到“正确”的做事方式是只有一个运行 require() 的 JS 文件，并从该文件加载其他所有内容(或者甚至更好地使用 data -dojo-main )。但是，我正在尝试定义独立工作的模块(使用服务器和客户端代码)并将其自身添加到页面中...那么，在应用程序页面中拥有一堆文件，然后将它们添加到页面中，这实际上是不好的做法吗？ require()'ing 并运行 Dojo 代码？

谢谢!

梅克。

附注 如果您好奇，https://github.com/mercmobily/hotplate ...该项目在此处发布后开始!

Answer 1

每个页面/文件/脚本可以有任意数量的需求。 define 每个页面只能使用一次，因为这就是页面/脚本位置和模块 ID 之间建立关联的原因。 define 并不严格用于小部件 - 它定义一个模块，可以是函数、构造函数(类)、单例对象，或者只是做一些工作而不返回任何内容。

require 是异步的；因此，当所有依赖项完成加载时会触发回调方法:

require(modules, callback);

dojo/ready本质上是基于“ block ”的。在所有依赖项均已加载且 DOM 准备就绪之前，回调不会触发。它不是基于页面的，也不是全局的 - 如果第一个需求等待 DOM，则很可能在页面上有第二个需求在第一个需求之前触发。