如何将RequireJS函数转换为纯jQuery?

时间:2019-01-13 19:17:23

标签: jquery requirejs

我对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函数以及变量如我上面的第一个代码片段所示)。

任何指针将不胜感激!

谢谢

0 个答案:

没有答案
相关问题