如何解决YUI3-如何同步加载模块？
| 为了加载缺少的模块，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>
//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);
})();
解决方法
您可以通过将每个类放在各自的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);
},{requires: [\'baseClass\']});
<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();
})
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。