当你使用 Meteor 框架制作一个项目时,它会将所有文件打包在一起,但似乎没有办法明确地说"我希望在那个文件之前加载这个文件"。
例如,假设我有 2 个 javascript 文件:foo.js
和 bar.js
。
文件bar.js
实际上包含代码,具体取决于foo.js
内部的代码,但 Meteor 在foo.js
之前加载bar.js
,破坏了项目。
- 在 node 中.js我只会在
foo.js
中使用require('./bar')
- 在浏览器中,我会放置一个指向
foo.js
的<script>
标签,然后放置另一个指向bar.js
的标签,以便以正确的顺序加载文件。
我们如何在流星中做到这一点?
根据 Meteor 文档,文件当前按以下顺序加载:
- 首先加载 [project_root]/lib 中的文件
- 文件按目录深度排序。首先加载更深的文件。
- 文件按字母顺序排序。
- 主文件最后加载。
源:http://docs.meteor.com/#structuringyourapp
不是适用于所有场景的解决方案,但我认为理想情况下,任何依赖于其他代码的东西都将放置在 Meteor.startup 函数中,以确保所有内容都已加载。
您可以随时使用像 yepnope 这样的 JS 加载器.js并将其添加到客户端.js文件中。这对我有用。
我有一组在公共命名空间(js global(下构建的实用程序函数。
即
// utils/utils.js
Utils = {};
然后在子文件夹中:
// utils/validation/validation.js
Utils.Validation = {};
// utils/validation/creditCard.js
Utils.Validation.creditCard = ... // validation logic etc
我也有一堆使用 Utils 的代码及其子对象。
显然,这种结构不能作为 Meteor 首先加载子文件夹。
为了使它按预期工作,我必须创建具有无意义名称的/subfolder/subfolder/subfolder,然后将根对象推入大多数深层子文件夹中,并将分支对象推入不那么深的子文件夹中。
这对我的口味来说是非常违反直觉的,并且容易出错(假设您的组件在文件夹结构中更深(。
为了解决这个问题,我使用了带有延迟和承诺的 Q 库。解决方案仍然不干净,因为它使您重复例行代码并进行检查,但它可以让您完全控制加载顺序而不会弄乱目录结构(向那些说您可以根据需要组织 meteor 代码的人问好(。
例:
//utils.js
UtilsDefer = UtilsDefer || Q.defer();
UtilsDefer.resolve({
// here some root utils stuff
});
//cards.js
// here we'll depend on Utils but don't want to care about directory structure
UtilsDefer = UtilsDefer || Q.defer(); // it will be a) already
// resolved defer from utils.js, or b) new defer that will
// be resolved later in utils.js
UtilsDefer.then(function(Utils) {
// do something with utils usage, or for instance add some fields here
Utils.CreditCardDefer = Utils.CreditCardDefer || Q.defer();
Utils.CreditCardDefer.resolve({
// Credit card utils here
})
});
//someOtherFile.js
// it will be pain to use sub-objects with this method though:
UtilsDefer = UtilsDefer || Q.defer();
UtilsDefer.then(function(Utils) {
Utils.CreditCardDefer = Utils.CreditCardDefer || Q.defer();
Utils.CreditCardDefer.then(function(CreditCard) {
// do stuff with CreditCard _if_ you need to do it on startup stage
})
});
这是一个相当狭窄的用例的例子,因为大多数情况下,您会很高兴在某些用户交互回调或Meteor.startup
中处理这些全局变量,其中所有内容都已初始化。否则,如果您希望在非常早期阶段对初始化顺序进行细粒度控制,这可能是一个解决方案。