Polymer 使用聚合物和requirejs

在尝试创建使用requirejs模块的聚合物元素时，我遇到了一个阻塞。我知道polymer不是为配合requirejs而设计的，但目前它是我唯一的选择

在寻找答案时，我发现了两种解决方案：

• 不要使用requirejs并使您的模块与HTML导入兼容
• 将

  Polymer（）

  调用放入requirejs回调中，如下所述

因为我必须使用require，至少目前是这样，所以我选择了2号解决方案。然而，事实证明，该解决方案会导致元素注册和存储的异步延迟

深入研究这个问题，我开始破解未记录的聚合物内部，目的是在requirejs完成它的工作之前完全停止聚合物。以下是我的想法：

Polymer.require = function(tag, deps, func) {
    var stopper = {}
    Polymer.queue.wait(stopper);
    require(deps, function() {
        delete stopper.__queue;
        Polymer.queue.check();
        Polymer(tag, func.apply(this, arguments));
    });
};

---

我知道这是非常错误的。有更好的解决方案吗？

我发现，如果我将对require的调用嵌入到Polymer脚本中，我就避免了这个问题

<link rel="import" href="../polymer/polymer.html"/>
<script src="../requirejs/require.js"></script>
<script src="../something/something.js"></script>

<polymer-element name="some-component">
    <template>...</template>
    <script>
     (function() {
       Polymer('some-component', {
            someMethod: function () {

               require(['something'], function (Something) {
                    var something = new Something();
                    ...
               }
        }
     )();
    </script>
</polymer-element>

...
（功能（）{
聚合物（“某些组分”{
someMethod：函数（）{
需要（['something'，函数（something）{
var something=新事物（）；
...
}
}
)();

斯科特·迈尔斯（Scott Miles）提出了一些建议，但我发现这有点过于简单和僵化，因为它依赖于：

• 标记按顺序执行，因此排除：

  • async

    脚本标记
  • 基于

    xhr

    的脚本加载

• polymer

  从
  标签加载，因此：
  • 不会加载

    layout.html

    和关联的

    css

  • 以后调用

    polymer.html

如果您想要对引导逻辑进行更多控制，则需要在组件完全加载之前在组件之间执行一定程度的同步（这是

requirejs

和

polymer

都竞相要做的）

前面的示例是一种更具声明性（read

polymer

）的操作方式，但缺少细粒度的调整。我要展示如何通过使用一种更具命令性的方法来完全定制负载顺序，

requirejs

被赋予优先权来协调其余的引导

---

在撰写本文时，由于各种脚本无法并行加载，因此这种额外控制的代价是性能更差，但我仍在对此进行优化。

这就留下了一个问题，即您在哪里调用

require.config

，请参阅类似的