Tag: JavaScript

一个改进的isNumeric（）函数？: 在一些项目中，我需要validation一些数据，并尽可能确定它是可以在math运算中使用的javascript数值。 jQuery和其他一些JavaScript库已经包含这样一个函数，通常称为isNumeric。在stackoverflow上也有一个post被广泛接受为答案，这是前面提到的库所使用的相同的一般例程。 function isNumber(n) { return !isNaN(parseFloat(n)) && isFinite(n); } 作为我的第一篇文章，我无法在该主题中回复。我在接受的职位上遇到的问题是，似乎有一些angular落案件影响了我正在做的一些工作，所以我做了一些改变，试图掩盖我遇到的问题。首先，如果参数是一个长度为1的数组，则上面的代码将返回true，并且该单个元素的types被上述逻辑视为数字。在我看来，如果它是一个数组，那么它不是数字。为了缓解这个问题，我添加了一个检查从逻辑折扣数组 function isNumber(n) { return Object.prototype.toString.call(n) !== '[object Array]' &&!isNaN(parseFloat(n)) && isFinite(n); } 当然，你也可以使用Array.isArray而不是Object.prototype.toString.call(n) !== '[object Array]' 编辑：我已经改变了代码，以反映数组的一般性testing，或者你可以使用jquery $.isArray或原型Object.isArray 我的第二个问题是负hex整数文字string（“-0xA” – > -10）不计算为数字。但是，正数hex整数string（“0xA” – > 10）将被视为数字。我需要两个是有效的数字。然后我修改了逻辑来考虑这一点。 function isNumber(n) { return Object.prototype.toString.call(n) !== '[object Array]' &&!isNaN(parseFloat(n)) && isFinite(n.toString().replace(/^-/, […]

window.name作为数据传输：一个有效的方法？: 概述和原始问题 window.name是一个有趣的野兽。 MDN的描述暗示了最初的意图：窗口的名称主要用于设置超链接和窗体的目标。 Windows不需要有名字。所以，这意味着我们可以在这个窗口中打开控制台，并写下： var win = window.open('http://google.com', 'el goog'); …然后让它通过popup式窗口拦截器，该窗口应该在名为“el goog”的窗口中打开google.com。由于同源策略，我无法访问win的name属性，但是如果我在新窗口中打开一个控制台并inputname ，我会得到"el goog" 。如果我把窗口发回到我打开的域名（在这个例子中是stackoverflow.com），我可以得到name属性，而且没有改变。 win.location.replace(location.href); win.name; // "el goog" 这意味着我们可以通过设置窗口的name属性来拥有一种跨域的会话存储。如果google.com在窗口被发回到原始域之前更改了window.name的值，我们将看到新值而不是“el goog”。这可以用作跨域数据传输，类似于JSONP或CORS的实用程序。我做了一些search试图find更多的信息，显然dojo 认为它是合法的运输。但不知何故，这并不能完全让我放心。所以我的问题是，是否有信誉的网站使用window.name作为数据传输？我认为这很容易被发现，因为他们的文档会给JSONP的查询string添加“callback”，或者为window.name添加“whatever”，但是我从来没有见过类似的东西。有没有人真的发现这在野外？备选问题可能没有人真正使用这种技术，如果那是真的（正如Rob W指出的那样），上面的问题是无法回答的。所以，我的另一个问题是，这种方法有什么问题？这可能有助于解释为什么它没有被真正采用。正如我所看到的，与JSONP相比，这种方法至less有两个好处。使用JSONP，您可以信任来自外国的脚本，以便在您的域上运行。使用window.name ，恶意网站包含的任何脚本都可以在自己的域上运行。使用JSONP，没有办法传入大数据（对于一个URL来说太大），也没有办法做一个HTTP POST。使用window.name ，我们可以发布任意大小的任意数据。有什么缺点？示例实现这是客户端实现的一个非常简单的例子。这不处理POST请求，只有GET。 function fetchData(url, callback) […]

为什么asm.js性能恶化？: 为了看看它是如何执行的，我手写了一个非常短的asm.js模块，它使用32位整型math和types化数组（Int32Array）来模拟二维波动方程。我有三个版本，尽可能相似：普通的（即清晰的，尽pipe是C风格的）JavaScript 与1相同，添加了asm.js注释，以便通过validation器，根据Firefox和其他工具除了没有“使用asm”之外，与2相同。指令在顶部我在http://jsfiddle.net/jtiscione/xj0x0qk3/上留下了一个演示，它允许您在模块之间切换以查看使用每个模块的效果。所有三个工作，但速度不同。这是热点（与asm.js注释）： for (i = 0; ~~i < ~~h; i = (1 + i)|0) { for (j = 0; ~~j < ~~w; j = (1 + j)|0) { if (~~i == 0) { index = (1 + index) | 0; continue; } if (~~(i + 1) == ~~h) […]

为什么我的three.js场景中的焦点仍然集中在相机的视angular，但只在Chrome的Android？: 我正在使用AngularJS和Three.js来尝试开发一个VR应用程序的小例子。我已经根据用户代理是否是移动设备来定义控件。这是一个狡猾的方法，但这只是一个例子。 OrbitControls用于非移动设备，否则使用DeviceOrientationControls。 var controls = new THREE.OrbitControls(camera, game.renderer.domElement); controls.noPan = true; controls.noZoom = true; controls.target.set( camera.position.x, camera.position.y, camera.position.z ); // Really dodgy method of checking if we're on mobile or not if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { controls = new THREE.DeviceOrientationControls(camera, true); controls.connect(); controls.update(); } return controls; 我还创build了一些实际显示的对象。 this.camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.001, […]

可以在课堂上移除一个CSSanimation？: 基本上我想要做的是给一个元素一个CSSanimation，当它获得一个类，然后扭转animation，当我删除该类没有播放animation时，DOM呈现。小提琴在这里： http : //jsfiddle.net/bmh5g/ 正如您在小提琴中所看到的那样，当您hover“hover我”button时，# #item向下翻转。当鼠标hoverbutton时，#item就会消失。我希望#item翻转（理想情况下使用相同的animation，但相反）。这可能吗？ HTML： <div id='trigger'>Hover Me</div> <div id='item'></div> CSS： #item { position: relative; height: 100px; width: 100px; background: red; -webkit-transform: perspective(350px) rotateX(-90deg); transform: perspective(350px) rotateX(-90deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } #item.flipped { animation: flipper 0.7s; animation-fill-mode: forwards; -webkit-animation: flipper 0.7s; -webkit-animation-fill-mode: forwards; } @keyframes […]

我怎样才能得到Rails资产pipe道产生源地图？: 我想让Rails与编译的coffeescript / minified JS一起生成源地图，以便更好地logging错误。尽pipe如此，在networking上似乎还没有全面的文档。有没有人做过这个？我在Rails 3.2和Heroku上。

HTML5 Canvas性能和优化技巧，技巧和编码最佳实践: 你知道一些帆布的最佳实践吗？请添加到这个线程你知道，已经学到，或已经在线阅读了任何和所有的帆布最佳实践，性能提示/技巧由于canvas对于互联网来说还是一个新的东西，而且没有迹象显示它将来会变老，所以并没有太多记载的“最佳实践”或其他非常重要的提示，这些提示是“必须知道的”它在任何一个特定的地方。像这样的东西散落在许多不为人知的地方。人们需要了解的东西太多了，而且还要学习太多东西。我想分享一些东西来帮助那些正在学习Canvas的人，也许一些人已经很了解它，并希望从别人那里得到一些他们觉得是一些最佳实践的反馈，或者在HTML5中使用Canvas的其他技巧和窍门。我想从一个我个人发现对开发人员来说相当有用但出人意料的事情开始。 1.缩进你的代码就像你在其他任何时候一样，用任何其他语言，无论这种情况如何。对于其他任何事情来说，这都是最佳实践，而且我发现，在复杂的canvas应用程序中，在处理几个不同的上下文和保存/恢复状态时，可能会有些混乱。更不用说代码只是更可读，整体更清洁。例如： … // Try to tell me this doesn't make sense to do ctx.fillStyle = 'red'; ctx.fill(); ctx.save(); if (thing < 3) { // indenting ctx.beginPath(); ctx.arc(2, 6, 11, 0, Math.PI*2, true); ctx.closePath(); ctx.beginPath(); ctx.moveTo(20, 40); ctx.lineTo(10, 200); ctx.moveTo(20, 40); ctx.lineTo(100, 40); ctx.closePath(); ctx.save(); […]

在JavaScript中将em转换为px（并获取默认字体大小）: 在某些情况下，可以获得实时测量的精确像素宽度。例如，假设您有一个带有CSS属性的元素（如边框或填充），这是以ems度量的，您需要获取边框或填充的精确像素宽度。有一个涉及这个话题的现有问题：如何通过使用JavaScript或JQuery获取像素的默认字体大小？这个问题是关于获取默认字体大小 – 这是必要的，以便将相对em值转换为确切的px值。这个答案有一个很好的解释如何得到一个元素的默认字体大小：由于ems可以测量宽度，所以你可以通过创build一个1000 ems长的div，然后将它的client-width属性除以1000来计算确切的像素字体大小。我似乎记得ems被截断到最接近的千分之一，所以你需要1000埃姆避免像素结果的错误截断。所以，使用这个答案作为指导，我写了下面的函数来获取默认字体大小： function getDefaultFontSize(parentElement) { parentElement = parentElement || document.body; var div = document.createElement('div'); div.style.width = "1000em"; parentElement.appendChild(div); var pixels = div.offsetWidth / 1000; parentElement.removeChild(div); return pixels; } 一旦你有了默认的字体大小，你可以通过将ems乘以元素的默认字体大小并舍入结果来将任意宽度转换为px宽度： Math.round(ems * getDefaultFontSize(element.parentNode)) 问题： getDefaultFontSize理论上应该是一个简单的副作用自由函数，它返回默认的字体大小。但它有一个不幸的副作用：它修改DOM！它附加一个孩子，然后移除孩子。追加孩子是必要的，以获得一个有效的offsetWidth属性。如果不将子div追加到DOM，则offsetWidth属性保持为0，因为该元素从不呈现。尽pipe我们立即删除了子元素，但这个函数仍然可能会产生意想不到的副作用，比如触发父元素的事件（如Internet Explorer的onpropertychange或W3C的DOMSubtreeModified事件）。问：是否有任何方法可以写一个真正的副作用免费getDefaultFontSize()函数，不会意外触发事件处理程序或导致其他意想不到的副作用？

二维引擎的Javascript: 我正在尝试使用HTML5canvas在JavaScript中构build基于图块的游戏。有许多可供select的引擎，例如： JawsJS GameJS 的Cocos2D MelonJS CraftyJS ImpactJS （商业） … 这样的例子不胜枚举。然而，在所有这些不同的实现中似乎并没有一个事实上的标准。基本上我正在寻找JavaScript游戏引擎的“jQuery”。一个由（更大的）社区支持的，具有优秀的文档并得到积极维护。其中大部分对我来说似乎是一个人的项目。把这个成为一个真正的问题; JavaScript中2D游戏引擎的事实标准是什么？此外，我会非常感兴趣的实际实施（演示pong / pacman游戏除外）的经验。

使用while循环而不是循环进行迭代: ECMAScript 6为迭代引入了生成器，迭代器和语法糖。带有标志的Node.JS v0.11.4 –harmony –use_strict –harmony_generators 了解以下发电机 function* fibonacci() { let previous = 0; let current = 1; while(true) { let temp = previous; previous = current; yield current = temp + current; } } 然后我可以打印小于1000的斐波那契数。 for(let value of fibonacci()) { if(value > 1000) { break; } console.log(value); } 对于这个例子， while循环代替for循环会更自然，类似于 while(value of fibonacci() […]