我对jQuery相当陌生,正当我开始了解它的时候,我偶然发现了一个网站,该网站试图使用requireJS进行离线查看。我认为应用程序中发生了很多事情,导致requireJS功能崩溃。因此,我试图摆脱所有特定于应用程序的功能(因为我已经加载了页面并保存了资源以供离线查看),而只使用纯jQuery处理所有页面交互(例如音频播放器,内容显示器等)。>
这是我尝试转换的requireJS位的示例。这是我在包含所有应用程序js的已编译js文件中看到的内容:
define("site/mixins/interactions/reveal_content", ["exports", "jquery"], function(e, t) {
function n(e) {
this.el = e, this.interactionData = e.find(".interaction_data"), this.container = e.find(".interaction_content")
}
n.prototype = {
init: function() {
var e = (0, t.default)("<div />").append((0, t.default)(this.interactionData.find("td")[1]).detach()),
n = (0, t.default)('<div class="pointer" />').append((0, t.default)(this.interactionData.find("td")[0]).detach());
this.container = this.container.parent().find(".RevealContent"), this.container.append(n), this.container.append(e.hide()), n.click(function() {
(0, t.default)(e).slideToggle("slow")
}), n.find("a").click(function(e) {
e.preventDefault()
})
}
}, e.default = n
})
所以我的理解是,这些define语句包括运行所需的模块/库。因此声明为“ export”和“ jquery”。而且,尽管我在该站点的已保存资源中看到一个jquery.js文件,但没有看到任何名为exports.js的文件,因此不确定该文件所指的是什么。也许它不是文件,而是应用程序其他地方需要的数组,但是整个要点是我正在尝试避免所有类似应用程序的功能,因为我离线执行的所有操作都是在应用程序加载后进行的。
对于它的价值,这里是实际的Reveal_content.js文件,该文件正在由生成映射的应用程序js文件的任何映射使用:
define("bocce/mixins/interactions/reveal_content", ["exports", "jquery"], function(exports, _jquery) {
function RevealContent($el) {
this.el = $el;
this.interactionData = $el.find(".interaction_data");
this.container = $el.find(".interaction_content");
}
RevealContent.prototype = {
init: function init() {
var contentToReveal = (0, _jquery["default"])('<div />').append((0, _jquery["default"])(this.interactionData.find('td')[1]).detach());
var initialContent = (0, _jquery["default"])('<div class="pointer" />').append((0, _jquery["default"])(this.interactionData.find('td')[0]).detach());
this.container = this.container.parent().find('.RevealContent');
this.container.append(initialContent);
this.container.append(contentToReveal.hide());
initialContent.click(function() {
(0, _jquery["default"])(contentToReveal).slideToggle('slow');
});
// prevent any links within initialContent from navigating anywhere
initialContent.find('a').click(function(e) {
e.preventDefault();
});
}
};
exports["default"] = RevealContent;
});
无论如何,我试图超越作为jQuery的角色,以便在脱机页面上,无论哪里有一个类名中包含“ RevealContent”的上升元素,上述requireJS功能都将作为纯jQuery执行,无需任何多余的函数调用(因此,这些e和n函数以及变量如我上面的第一个代码片段所示)。
任何指针将不胜感激!
谢谢