为了加载丢失的模块，YUI 允许我们在 use(...) 方法中指定它们，传入回调并在所有模块加载时执行我们的操作 - 异步。这在我的案例中提出了许多问题。更具体地说，如果我在回调中创建了我的类，我发现不可能在当前文件之外实例化我的类(不能保证它们会在"new"发生时准备好)。我的解决方法是在 YUI.use(...) 中只包装某些方法调用，但这会产生另一个扩展对象的问题。理想情况下，我需要做的是在我的任何代码执行之前同步加载所有模块。下面是我目前失败成功的代码(编辑:允许汇总)。
HTML:
<html>
<head>
<!-- Built using YUI dep configurator -->
<!-- JS -->
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/oop/oop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event-custom/event-custom-base-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event/event-base-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/dom/dom-style-ie-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/pluginhost/pluginhost-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/node/node-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event/event-base-ie-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event/event-delegate-min.js"></script>
<!-- My JS -->
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
var test = new MyNS.ExtendingClass();
</script>
</head>
<body>
<h1>Hello World!</h3>
</body>
</html>
test.js
//namespace
if (!MyNS) var MyNS = {};
(function(){
var Y = YUI().use('node', 'io', 'autocomplete');
MyNS.BaseClass = function() {
console.log('Base class newed. Y: ' + Y);
var self = this;
self.init();
};
MyNS.BaseClass.prototype = {
init: function() {
console.log('Initting! Y: ' + Y);
}
, test: function() {
console.log('test fired!');
}
};
})();
(function(){
var Y = YUI().use('node');
MyNS.ExtendingClass = function() {
console.log('Extended class newed. Y: ' + Y);
var self = this;
MyNS.ExtendingClass.superclass.constructor.call(self);
};
MyNS.ExtendingClass.prototype = {
testExtended: function() {
console.log('testExtended fired!');
}
};
Y.extend(MyNS.ExtendingClass, MyNS.BaseClass);
})();
此代码现在可以运行，但需要 10 (!!!) 个 js 文件才能实现。有没有办法确保所有依赖项都动态加载并且在我的代码执行之前加载？一定有吧？
最佳答案
您可以通过将每个类放在它们自己的 YUI 模块中并使用 YUI 进行命名空间来解决这个问题。
创建一个新文件 my-classes.js，其中包含您的两个类定义:
YUI().add('baseClass', function(Y) {
// constructor
Y.namespace('NS').BaseClass = function () {
this.msg = 'hi!';
}
}, '1', {requires: ['oop', 'node', 'event']}); // dependencies for your class
YUI().add('extendingClass', function(Y) {
// constructor
Y.namespace('NS').ExtendingClass = function () {
Y.NS.ExtendingClass.superclass.constructor.call(this);
alert(this.msg);
}
Y.extend(Y.NS.ExtendingClass, Y.NS.BaseClass);
}, '1', {requires: ['baseClass']});
在您的页面中包含 YUI 种子文件:
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
还包括您的类文件和一个初始化文件:
<script type="text/javascript" src="my-classes.js"></script>
<script type="text/javascript" src="my-init.js"></script>
在你的初始化文件中:
YUI().use('extendingClass', function(Y) {
Y.test = new Y.NS.ExtendingClass();
})
现在，在您的代码执行之前，应该解析并加载所有依赖项。它是异步的，但是您需要一个解决方案来确保在您的代码执行之前加载所有内容。
希望这对您有所帮助。
关于javascript - YUI3 - 如何同步加载模块？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6458701/