加载 javascript 库但没有返回对象答案

【问题标题】：loading a javascript library and not getting an object returned加载 javascript 库但没有返回对象
【发布时间】：2015-05-27 11:46:11
【问题描述】：

我正在尝试在 XPages 中加载一个 javascript 库。

通常在 HTML 中，参考如下所示：

<html>
<head>
<script src="https://hammerjs.github.io/dist/hammer.js"></script>
</head>
<body>
</body>
</html>

这给了我一个 DOM 中的 Hammer 对象，我可以进一步使用它。

在 XPages 中我做了以下设置：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" disableTheme="true"
    dojoForm="false" dojoTheme="false" dojoParseOnLoad="false"
    createForm="false">
    <xp:this.resources>
        <xp:script src="https://hammerjs.github.io/dist/hammer.js"
            clientSide="true">
        </xp:script>
    </xp:this.resources>
</xp:view>

或者：

<?xml version="1.0" encoding="UTF-8" ?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" disableTheme="true" dojoForm="false" dojoTheme="false" dojoParseOnLoad="false" createForm="false">
    <xp:this.resources>
        <xp:headTag tagName="script">
            <xp:this.attributes>
                <xp:parameter name="script" value="text/javascript" />
                <xp:parameter name="src" value="https://hammerjs.github.io/dist/hammer.js" />
            </xp:this.attributes>
        </xp:headTag>
    </xp:this.resources>
</xp:view>

但是 Hammer 对象在 DOM 中不存在！

我做错了什么？

【问题讨论】：

首先看看你在做什么只是加载库。然后你需要脚本来调用它。
确实我下面的回答是不正确的。我将删除，即使没有在脚本中调用它，您仍然应该能够在浏览器控制台中手动调用它。
hammer.js 使用 AMD，因此与 Dojo 冲突。请参阅有关如何从hammer.js 中删除AMD 加载的答案：stackoverflow.com/a/24324497/785061

标签： xpages

【解决方案1】：

hammer.js 使用 AMD。这是使用 AMD 的hammer.js 源代码中的一个 sn-p：

if (typeof define == TYPE_FUNCTION && define.amd) {
    define(function() {
        return Hammer;
    });
} else if (typeof module != 'undefined' && module.exports) {
    module.exports = Hammer;
} else {
    window[exportName] = Hammer;
}

不幸的是，AMD 加载与 XPages 中的 Dojo 发生冲突。见this answer on how to remove AMD loading。

在您的情况下，您需要下载hammer.js，更改AMD加载部分，将其添加到您的nsf，然后从您的nsf加载脚本。

您可以通过将hammer.js 中的代码更改为例如以下代码来删除AMD 加载部分：

//if (typeof define == TYPE_FUNCTION && define.amd) {
//    define(function() {
//        return Hammer;
//    });
//} else if (typeof module != 'undefined' && module.exports) {
if (typeof module != 'undefined' && module.exports) {
    module.exports = Hammer;
} else {
    window[exportName] = Hammer;
}

【讨论】：

嗨 Per，听起来您以前遇到过类似的问题。你的方法就像一个魅力。谢谢！

【解决方案2】：

解决此问题的另一种方法是使用 AMD 加载程序，它是较新版本的 Domino 上 Dojo 的一部分。

这段代码实现了hammer.js文档中的基本示例（我只使用jQuery作为准备函数）：

require({
    async: true, 
    aliases: [['jquery', '//code.jquery.com/jquery-1.11.3.min.js'],
             ['Hammer', '//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min.js']]
}, ['jquery', 'Hammer'], function(jq, Hammer){
    $(function() {
        var myElement = document.getElementById('myElement');

        // create a simple instance
        // by default, it only adds horizontal recognizers
        var mc = new Hammer(myElement);

        // listen to events...
        mc.on("panleft panright tap press", function(ev) {
            myElement.textContent = ev.type +" gesture detected.";
        });
    });
});

然后只需将代码添加到脚本标签中的 xpage 中：

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:this.resources>
        <xp:styleSheet href="./css/basicImpl.css"></xp:styleSheet>
        <xp:script src="./js/basicImpl.js" clientSide="true"></xp:script>
    </xp:this.resources>
    <div id="myElement"></div>
</xp:view>

我也在使用示例中的样式表：

#myElement {
    background: silver;
    height: 300px;
    text-align: center;
    font: 30px/300px Helvetica, Arial, sans-serif;
}

【讨论】：

【解决方案3】：

一些事情没有特别的顺序：

您可以使用 Chrome 开发工具测试脚本是否已加载，然后转到控制台。然后，您可以将脚本放入以调用锤子代码。如果脚本未加载，那么您将收到错误消息。您的脚本可能已加载。
通过 Hammer js 站点验证您正在正确加载脚本
尝试将您的代码放入仅加载客户端代码的onClientLoad 事件中。
将 Hammer.js 代码放入您的 NSF，以确保您没有与 github 的连接问题。使用 Package Explorer 并将文件放在 WebContent/js 文件夹中。将任何 CSS 放入 WebContent/CSS 文件夹中

【讨论】：

例如我设置：但随后我收到消息 ReferenceError: Hammer is not defined var mc = new Hammer(myElement);
onClient 事件不是针对 XSP 的吗？
这是客户端脚本，我想删除我的答案，当我推送删除时，它会询问我是否要删除帖子，我当然不想这样做。
但是你的脚本块应该做同样的事情。
hammer.js 使用 AMD，因此与 Dojo 冲突，请参阅 stackoverflow.com/a/24324497/785061