- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我们使用 YUI3 加载器来管理加载我们的 javascript 和 css 文件。作为每个页面上引导 js 代码的一部分,我们有如下内容:
YUI({
...
groups: {
...
myGroup: {
modules: {
"my-module": {
...
path: "MyModule.js",
requires: [ "yui-base" ]
},
}
...
}
}
}).use("my-module", function (Y) {
Y.MyModule.doStuff();
});
MyModule.js 有如下内容:
YUI.add('my-module', function (Y) {
Y.MyModule = function () {
...
_validator: Y.Lang.isString
};
}, '3.4.0', {
requires: [ "yui-base" ]
});
YUI 还声称 here加载程序可以与非 YUI3“模块”一起使用,因为它们在配置中指定了它们的依赖关系。他们为 yui2 组提供了以下示例模块配置:
yui2: {
combine: true,
base: 'http://yui.yahooapis.com/2.8.0r4/build/',
comboBase: 'http://yui.yahooapis.com/combo?',
root: '2.8.0r4/build/',
modules: { // one or more external modules that can be loaded along side of YUI
yui2_yde: {
path: "yahoo-dom-event/yahoo-dom-event.js"
},
yui2_anim: {
path: "animation/animation.js",
requires: ['yui2_yde']
}
}
}
这表明 YUI 足够聪明,仅在 yahoo-dom-event.js 加载并运行后才加载并运行 YUI2 的 animation.js。
我不明白的是,如果这适用于非 YUI 模块,为什么我必须用 YUI.add 和冗余的需求列表包装我自己的模块(因为配置中也指定了需求)?
我尝试删除添加包装器(我将其替换为 (function (Y) {/* module content */})(YUI);
),但这会导致页面出现 js 错误加载:Y.Lang 未定义。因此,似乎在没有包装 add() 调用的情况下,脚本在定义 Y.Lang 的基本 yui 脚本之前执行。然而,如果是这样的话,那么对于非 YUI 模块(不调用 YUI.add())来说这不是一个问题吗?
最佳答案
区分使用 YUI3 特性(沙盒 Y.Lang
等)的自定义模块和完全外部代码很重要。
在第一种情况下,YUI.add()
包装器始终是必需的,因为沙箱 Y
变量在模块回调之外不可用(YUI.add()
的第二个参数)。不幸的是,由于 Y.Loader
中的限制,在手写模块中重复模块配置是必要的(组合加载魔术发生的地方)。使用 YUI 的模块 build tools自动添加包装器和元数据。
使用完全外部代码,您只需提供 fullpath
配置属性,YUI 会做正确的事情。在内部,YUI 知道给定 <script>
的时间。请求完成,并将成功与配置的模块名称相关联。
为了简化事情,我将使用 YUI.applyConfig演示配置位。使用它,您可以创建任意数量的 YUI 沙箱(通过 YUI().use(...)
)并混合配置,而不是到处重复它。
YUI.applyConfig({
"modules": {
"leaflet": {
"fullpath": "http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"
},
"my-leaflet-thing": {
"path": "path/to/my-leaflet-thing.js",
"requires": [
"base-build",
"node-base",
"leaflet"
]
}
}
});
my-leaflet-thing.js 看起来像这样:
YUI.add("my-leaflet-thing", function (Y) {
// a safe reference to the global "L" provided by leaflet.js
var L = Y.config.global.L;
Y.MyLeafletThing = Y.Base.create("myLeaflet", Y.Base, {
initializer: function () {
var id = this.get('node').get('id');
var map = L.map(id);
// etc
}
}, {
ATTRS: {
node: {
getter: Y.one
}
}
});
// third argument is a version number,
// but it doesn't affect anything right now
}, "1.0.0", {
"requires": [
"base-build",
"node-base",
"leaflet"
]
});
鉴于此设置,由于这需要非异步库,您可以安全地执行此操作:
YUI().use("my-leaflet-thing", function (Y) {
var instance = new Y.MyLeafletThing({
"node": "#foo"
});
});
注意:如果一个外部文件动态加载它自己(例如,async Google Maps API),YUI 将只知道初始请求成功,而不是整个文件链加载。要解决这个问题,您需要在 fullpath
中使用查询字符串回调参数。配置,与需要它的模块中的一些全局公开回调相关联。
在这些情况下,最好进行内部 Y.use()
(注意沙箱变量)以更好地封装所需的全局变量。
配置:
YUI.applyConfig({
"modules": {
"google-maps-api": {
"fullpath": "http://maps.googleapis.com/maps/api/js" +
"?v=3&sensor=false&callback=initGMapsAPI"
},
"my-google-map-thing": {
"path": "path/to/my-google-map-thing.js",
"requires": [
"base-build",
"node-base"
]
}
}
});
my-google-map-thing.js:
YUI.add("my-google-map-thing", function (Y) {
// publish a custom event that will be fired from the global callback
Y.publish('gmaps:ready', {
emitFacade: true,
fireOnce: true
});
// private sentinel to determine if Y.use() has been called
var isUsed = false;
// expose global function that matches "callback" parameter value
Y.config.global.initGMapsAPI = function () {
// Y.config.global.google is now available
Y.fire('gmaps:ready');
};
Y.MyGoogleMapThing = Y.Base.create("myGoogleMap", Y.Base, {
initializer: function () {
Y.on('gmaps:ready', this.render, this);
if (!isUsed) {
isUsed = true;
Y.use("google-maps-api");
}
},
render: function () {
// safe reference to global "google"
var google = Y.config.global.google;
var id = this.get('node').get('id');
var map = new google.maps.Map(id, {
// ...
});
// etc
}
}, {
ATTRS: {
node: {
getter: Y.one
}
}
});
}, "1.0.0", {
"requires": [
"base-build",
"node-base"
]
});
总结:YUI.add()
仅在编写依赖于 YUI3 沙盒资源的模块时才需要。加载外部代码,只要它是同步的,就像使用 fullpath
一样简单。配置属性。异步外部加载有点麻烦,但仍然可行。
关于javascript - 为什么在指定 YUI 模块时需要 YUI.add,如果需要,非 YUI 模块如何工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18109852/
我在Windows 10中使用一些简单的Powershell代码遇到了这个奇怪的问题,我认为这可能是我做错了,但我不是Powershell的天才。 我有这个: $ix = [System.Net.Dn
var urlsearch = "http://192.168.10.113:8080/collective-intellegence/StoreClicks?userid=" + userId +
我有一个非常奇怪的问题,过去两天一直让我抓狂。 我有一个我试图控制的串行设备(LS 100 光度计)。使用设置了正确参数的终端(白蚁),我可以发送命令(“MES”),然后是定界符(CR LF),然后我
我目前正试图让无需注册的 COM 使用 Excel 作为客户端,使用 .NET dll 作为服务器。目前,我只是试图让概念验证工作,但遇到了麻烦。 显然,当我使用 Excel 时,我不能简单地使用与可
我开发了简单的 REST API - https://github.com/pavelpetrcz/MandaysFigu - 我的问题是在本地主机上,WildFly 16 服务器的应用程序运行正常。
我遇到了奇怪的情况 - 从 Django shell 创建一些 Mongoengine 对象是成功的,但是从 Django View 创建相同的对象看起来成功,但 MongoDB 中没有出现任何数据。
我是 flask 的新手,只编写了一个相当简单的网络应用程序——没有数据库,只是一个航类搜索 API 的前端。一切正常,但为了提高我的技能,我正在尝试使用应用程序工厂和蓝图重构我的代码。让它与 pus
我的谷歌分析 JavaScript 事件在开发者控制台中运行得很好。 但是当从外部 js 文件包含在页面上时,它们根本不起作用。由于某种原因。 例如; 下面的内容将在包含在控制台中时运行。但当包含在单
这是一本名为“Node.js 8 the Right Way”的书中的任务。你可以在下面看到它: 这是我的解决方案: 'use strict'; const zmq = require('zeromq
我正在阅读文本行,并创建其独特单词的列表(在将它们小写之后)。我可以使它与 flatMap 一起工作,但不能使它与 map 的“子”流一起工作。 flatMap 看起来更简洁和“更好”,但为什么 di
我正在编写一些 PowerShell 脚本来进行一些构建自动化。我发现 here echo $? 根据前面的语句返回真或假。我刚刚发现 echo 是 Write-Output 的别名。 写主机 $?
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 4年前关闭。 Improve thi
我将一个工作 View Controller 类从另一个项目复制到一个新项目中。我无法在新项目中加载 View 。在旧项目中我使用了presentModalViewController。在新版本中,我
我对 javascript 很陌生,所以很难看出我哪里出错了。由于某种原因,我的功能无法正常工作。任何帮助,将不胜感激。我尝试在外部 js 文件、头部/主体中使用它们,但似乎没有任何效果。错误要么出在
我正在尝试学习Flutter中的复选框。 问题是,当我想在Scaffold(body :)中使用复选框时,它正在工作。但我想在不同的地方使用它,例如ListView中的项目。 return Cente
我们当前使用的是 sleuth 2.2.3.RELEASE,我们看不到在 http header 中传递的 userId 字段没有传播。下面是我们的代码。 BaggageField REQUEST_I
我有一个组合框,其中包含一个项目,比如“a”。我想调用该组合框的 Action 监听器,仅在手动选择项目“a”完成时才调用。我也尝试过 ItemStateChanged,但它的工作原理与 Action
你能看一下照片吗?现在,一步前我执行了 this.interrupt()。您可以看到 this.isInterrupted() 为 false。我仔细观察——“这个”没有改变。它具有相同的 ID (1
我们当前使用的是 sleuth 2.2.3.RELEASE,我们看不到在 http header 中传递的 userId 字段没有传播。下面是我们的代码。 BaggageField REQUEST_I
我正在尝试在我的网站上设置一个联系表单,当有人点击发送时,就会运行一个作业,并在该作业中向所有管理员用户发送通知。不过,我在失败的工作表中不断收到此错误: Illuminate\Database\El
我是一名优秀的程序员,十分优秀!