0

I created three widgets that are added to YUI as modules. All widgets use the same javascript library (commons.js) using the Y.Get.js method. These widgets are defined in separate js files (I need to do it so that these widgets are standalone). All of them are loaded into an HTML file and rendered. However, by inspecting the elements of the HTML file in browser, it turns out that the commons.js file is included for three times in the HTML file, but with different IDs:

<script charset="utf-8" id="yui_3_5_0_1_1374466627361_24" src="js/common.js"></script>
<script charset="utf-8" id="yui_3_5_0_1_1374466627361_32" src="js/common.js"></script>
<script charset="utf-8" id="yui_3_5_0_1_1374466627361_38" src="js/common.js"></script>

Is there a way in YUI to avoid this duplication? Thank you!

Xiang Zhang
  • 53
  • 6

1 Answers1

1

Y.Get.js will always be called when you include a module if you used it in the module's body.

Here are some suggestions:

  • Put the contents of common.js into a YUI module. This is probably the best choice
  • Use YUI to load it and wrap it automatically into a module:

Example:

YUI({
  modules: {
    'my-common': {
      fullpath: 'js/common.js',
      requires: []
    }
  },
  onProgress: function (e) {
    for (var _module, i = 0, length = e.data.length; i < length; i++) {
      _module = e.data[i];
      if (_module.name === 'my-common') {
        YUI.add('my-common', function (Y) {
          Y.MyCommon = MyCommon;
        });
      }
    }
  }
}).use('my-common', function (Y) {
  // ...
});
  • Load the module from the YUI().use() callback using Y.Get.js:

Example:

YUI(/* ... */).use('some-module', function (Y) {
  Y.Get.js('js/common.js', function () {
    // rest of your stuff
  });
});
  • Check if it's already loaded before loading it
juandopazo
  • 6,283
  • 2
  • 26
  • 29
  • Thanks for your answer! I finally solved the problem by putting each widget in an iframe so they become independent on each other and the parent document. – Xiang Zhang Jul 27 '13 at 19:04