Mootools 打破 Panoramio Javascript API答案

【问题标题】：Mootools Breaking Panoramio Javascript APIMootools 打破 Panoramio Javascript API
【发布时间】：2012-12-08 12:28:35
【问题描述】：

我正在尝试使用 Panoramio 的 JavaScript API，但在使用 MooTools 框架时它无法显示。在 this jsFiddle 上使用 Chrome 的检查功能会在包含的 JavaScript 中显示此错误：

Uncaught SyntaxError: Invalid regular expression: /function (keys){
    var obj = {}, length = Math.min(this.length, keys.length);
    for (var i = 0; i < length; i++) obj[keys[i]] = this[i];
    return obj;
}/: Nothing to repeat

我尝试使用 API 的站点是 Joomla 2.5，因此使用了 MooTools 框架。把fiddle上的框架改成jQuery或者完全去掉会产生图片，不会出现错误。

我试图以某种方式合并 jQuery 的 noConflict() 函数，并为 MooTools 搜索了类似的函数，但没有成功。

非常欢迎任何解决此问题的建议。还是 Panoramio 的 JavaScript API 本身的限制？

【问题讨论】：

标签： javascript joomla mootools panoramio

【解决方案1】：

MooTools 在Array.prototype 中添加了一堆函数，而不会阻止它们被枚举。这意味着它们会出现在数组上的for-in 循环中。

Panoramio JavaScript 似乎在不允许这样做的情况下在数组上使用 for..in，因为错误消息包含 MooTools 添加的 associate 函数的源代码：

// (Result of `String(Array.prototype.associate)` when MooTools is loaded
function (keys){
    var obj = {}, length = Math.min(this.length, keys.length);
        for (var i = 0; i < length; i++) obj[keys[i]] = this[i];
        return obj;
}

这是 Panoramio 脚本中的一个错误，不应该永远使用 for..in 在没有正确保护措施的情况下循环数组。请参阅Myths and realities of for..in（来自我的博客）。如果您可以获得 Panoramio 脚本的未压缩版本，您可能可以修复相关循环。

有些人还认为，MooTools 向Array.prototype 添加可枚举属性是一个错误（或至少是一个糟糕的设计决定）。

Dimitar Christoff cmets 中的注释 （感谢 Dimitar！） 如果您在加载 MooTools 之后加载 Panoramio 脚本，它可以工作：http://jsfiddle.net/DEWvZ/2/ 但请注意，如果您稍后对 Panoramio 进行任何调用，一旦 MooTools 加载，那些可能会失败，因为如果他们在一个地方（初始化）犯了错误，他们很可能也会在其他地方犯错。

【讨论】：

谢谢。那么这是否意味着它是 Panoramio 的 JavaScript 中的一个错误，没有解决方法？
@Adder：就像我上面说的，如果你能得到一个未压缩版本的脚本，你可以找到相关的for..in循环并修复它们（修复是添加@987654334 @ 根据需要，请参阅链接文章）。（当然，从技术上讲，您也可以在压缩版本中找到并修复它们，只是要困难得多。）
@T.J.Crowder 找到压缩版本可能并不太难 ;-)
应该提到你链接到你自己的文章。
gist.github.com/4240237#2460 - 第 2460 行，用于数组中。 mootools 99% 的不兼容错误就是这个问题。不知道如何正确循环数组的人应该做的最后一件事是公共 js API。

【解决方案2】：

这个 Panoramio JavaScript API 小部件。

另一种 Panoramio JavaScript API 小部件，您还可以在其中使用 example and code is here 更改背景颜色。

我创建了一个blogspot page，在那里我创建了许多 Panoramio JavaScript 和 HTML API 小部件。

它在作曲时不显示。它在发布后显示。我在我的 blogspot 网站上使用过它。它的工作。

<div dir="ltr" style="text-align: center;" trbidi="on">
<script src="https://ssl.panoramio.com/wapi/wapi.js?v=1&amp;hl=en"></script>
<div id="wapiblock" style="float: right; margin: 10px 15px"></div>
<script type="text/javascript">
var myRequest = {
  'tag': 'kahna',
  'rect': {'sw': {'lat': -30, 'lng': 10.5}, 'ne': {'lat': 50.5, 'lng': 30}}
};
  var myOptions = {
  'width': 300,
  'height': 200
};
var wapiblock = document.getElementById('wapiblock');
var photo_widget = new panoramio.PhotoWidget('wapiblock', myRequest, myOptions);
photo_widget.setPosition(0);
</script>
</div>

【讨论】：