Tag: JavaScript

为什么我发现JavaScript / jQuery如此难以正确？: 我的背景是在C，我已经拿起PHP，MySQL，HTML，CSS没有太多的问题。但是我发现Javascript / jQuery令人惊讶地很难正确的。非常令人沮丧。为什么？它似乎违反了一些传统的编程原则（例如可变范围）未定义的variables似乎无处不在，已经有了与它们相关的值。例如（从jQuery文档）： $("a").click(function(event) { event.preventDefault(); $('<div/>') .append('default ' + event.type + ' prevented') .appendTo('#log'); }); 什么是“事件”？我必须使用这个variables名吗？我应该假设这个对象是神奇的实例化正确的东西，我可以使用JQuery API的任何方法列表？似乎有一堆随机规则（例如返回false来停止默认操作，但有时这不起作用？） debugging时的非确定性行为。（例如，我刷新浏览器，尝试一些并获得结果X的JSvariables我在Firebug中看，我再次刷新，我得到的结果Y？）很难看的代码非常混乱。什么时候发生？我使用的是Firebug和Chrome开发者工具，但是我没有得到足够的知名度。似乎每天都有一些随机的JS“规则”出现，我从来没有见过任何我的JS书籍或教程。为了使Javascript / jQuery更具有确定性，可控性和逻辑性，我需要做些什么？有没有解释Javascript的怪癖/陷阱的资源？谢谢！

位置：修正了Chrome和IE浏览器中的closurescanvas菜单: 什么意图我正在使用使用CSS和JavaScript的canvas菜单。 canvas菜单按预期工作。我想要一个边栏菜单在屏幕左边，并在菜单被触发时移动。这个想法是有一个100px的菜单触发器，并具有100％的高度，始终在屏幕左侧。使用绝对位置我有所有浏览器的高度问题，使用固定的位置Firefox工作正常，但遇到下面提到的问题。错误火狐问题：没有，据我所知。 Chrome浏览器问题：滚动几个像素后，边栏菜单触发器不能拉伸整个页面。 Internet Explorer：边栏菜单被触发时，边栏似乎完全消失。的jsfiddle 因为我的代码在HTML，CSS和JavaScript上都很重，所以我包含了一个jsFiddle 。请注意，就我所知，问题只发生在Chrome浏览器和Internet Explorer上。您可以通过向下滚动页面，然后单击左侧的菜单button来复制问题。截图值得注意的HTML代码（小提琴中的完整代码） <div id="sbContainer" class="sbContainer"> <div class="sbPush"> <header class="contain-to-grid sbMenu sbFX"> <nav class="top-bar" data-topbar> <ul class="title-area show-for-small-only"><!–SITENAME–></ul> <section class="top-bar-section"><!–LINKS–></section> </nav> </header> <div class="sbContent-one"> <div class="sbContent-two"> <div class="sbMenuTrigger" data-effect="sbFX"><!–SIDEBAR TRIGGER–></div> <div class="sbMainContent" role="document"><!–PAGE CONTENT–></div> </div> </div> </div> </div> […]

什么是每英寸点数和每英寸点数: 在访问jsfiddle.net时，我从Chrome开发者工具控制台标签中收到了此消息：考虑使用“dppx”单位而不是“dpi”，因为在CSS中，“dpi”是指每英寸点数，而不是每英寸点数，因此不符合屏幕的实际“dpi”。在媒体查询expression式中：只有屏幕和（-webkit-min-device-pixel-ratio：2），不是全部，不是全部，只有屏幕和（最小分辨率：192dpi），只有屏幕和（最小分辨率：2dppx）它是蓝色的，所以我假设这不是一个警告或错误。那么为什么我会遇到这个消息？我怎么能摆脱它，或者这只是jsfiddle本身的问题？

在寻找JavaScript月采摘器: 我正在寻找一个JavaScript月份select工具。我已经在网站上使用jQuery，所以如果它是一个jQuery插件，那将很适合。我也接受其他select。基本上，我在jQuery UI Date Picker的简化版本之后。我不在乎这个月的哪一天，只是月份和年份。使用date选取器控件感觉像是矫枉过正和kludge。我知道我可以使用一对select框，但感觉混乱，然后我也需要一个确认button。我在设想一个由六列组成的两行或三行四列的网格，用于月份select，以及当前和未来的年份。（也许列出几年的能力？我不能看到有人需要提前一年或两年以上，所以如果我能列出当前和未来两年，这将是膨胀。）这真的只是DatePicker的一个愚蠢的版本。有这样的事情吗？

OO JavaScript构造函数模式：新古典vs原型: 我观看了道格拉斯·克罗克福德（Douglas Crockford）关于Javascript中好的部分的讲话，我的眼睛被打开了。有一次，他说：“Javascript是唯一的语言，好的程序员相信他们可以有效地使用它，而不需要学习它。” 然后我意识到，我就是那个人。在那个演讲中，他发表了一些对我来说非常惊人和有见地的发言。例如，JavaScript是这个星球上最重要的编程语言。或者它是这个星球上最stream行的语言。而且，这是以许多严重的方式被打破的。他对我所做的最令人吃惊的表述是“新的危险”。他不再使用它了。他也不使用this 。他为Javascript中的构造函数提供了一个有趣的模式，允许私有和公共成员variables，并且不依赖于new ，也不依赖this 。它看起来像这样： // neo-classical constructor var container = function(initialParam) { var instance = {}; // empty object // private members var privateField_Value = 0; var privateField_Name = "default"; var privateMethod_M1 = function (a,b,c) { // arbitrary }; // initialParam […]

如何用JavaScript包装节点中的文本的一部分: 我有一个具有挑战性的问题要解决。我正在研究一个以正则expression式作为input的脚本。这个脚本然后在文档中find这个正则expression式的所有匹配，并将每个匹配包装在它自己的<span>元素中。最难的部分是文本是一个格式化的HTML文档，所以我的脚本需要浏览DOM，并一次性在多个文本节点上应用正则expression式，同时根据需要找出需要分割文本节点的位置。例如，用一个正则expression式来捕获以大写字母开始并以句点结尾的完整句子，本文档： <p> <b>HTML</b> is a language used to make <b>websites.</b> It was developed by <i>CERN</i> employees in the early 90s. <p> 会变成这样： <p> <span><b>HTML</b> is a language used to make <b>websites.</b></span> <span>It was developed by <i>CERN</i> employees in the early 90s.</span> <p> 该脚本然后返回所有创build的跨度的列表。我已经有了一些代码，可以find所有的文本节点，并将它们存储在一个列表中，以及它们在整个文档中的位置及其深度。你并不需要理解代码来帮助我，它的recursion结构可能会有点混乱。第一部分，我不知道该怎么做是找出哪些元素应该包含在范围内。 function SmartNode(node, depth, start) { […]

在使用Webpack的vue.js项目中使用（'@'）loginES6导入path: 我开始了一个新的vue.js项目，所以我使用vue-cli工具来构build一个新的webpack项目（即vue init webpack ）。当我走过生成的文件，我注意到在src/router/index.js文件中的以下导入： import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' // <- this one is what my qusestion is about Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello } ] }) 我之前没有看到路标（ @ ）。我怀疑它允许相对path（也许？），但我想确定我明白它真正的作用。我试图在网上search，但无法find解释（因为search“在符号”或使用文字字符@没有帮助作为search条件）。 @在这条路上做什么（链接到文档将是太棒了），这是一个es6的东西？一个webpack的东西？一个vue加载器的东西？ UPDATE 感谢Felix Kling将我指向另一个关于同一个问题的重复的stackoverflow问题/回答。 […]

textarea中的Twitter式自动完成: 我正在寻找一个Javascript自动完成实现，其中包括以下内容：可以在HTML textarea中使用允许在不调用自动完成的情况下input常规文本检测@字符并在input时启动自动完成通过AJAX加载选项列表我相信这与Twitter在Twitter上进行标记时所做的相似，但是我找不到一个很好的，可重用的实现。 jQuery的解决scheme将是完美的。谢谢。

JavaScript中的原型OO: TL; DR：我们是否需要原型OO中的工厂/构造器？我们可以做一个范例转换并完全放弃它们吗？ BackStory：我最近一直在做JavaScript中的原型OO，并发现在JavaScript中执行的面向对象的99％迫使经典的OO模式。我认为原型OO是两件事。方法的静态原型（和静态数据）和数据绑定。我们不需要工厂或build设者。在JavaScript中，这些是包含函数和Object.create Object文字。这意味着我们可以将所有东西都build模为一个静态的蓝图/原型和一个数据绑定抽象，这个抽象最好直接插入到文档样式的数据库中。即从数据库中取出对象，并通过数据克隆原型来创build对象。这将意味着没有构造逻辑，没有工厂，没有new 。示例代码：一个伪示例是： var Entity = Object.create(EventEmitter, { addComponent: { value: function _addComponent(component) { if (this[component.type] !== undefined) { this.removeComponent(this[component.type]); } _.each(_.functions(component), (function _bind(f) { component[f] = component[f].bind(this); }).bind(this)); component.bindEvents(); Object.defineProperty(this, component.type, { value: component, configurable: true }); this.emit("component:add", this, component); […]

AngularJS风格指南 – Todd Motto vs John Papa vs Minko Gechev: 我对Angular很新，我想从一开始就学习好的做法。我遇到过三个Angular风格的指南，他们都很棒。我想知道哪一个最适合我采用，但是我没有资格成为评委，因为我对大型Angular应用程序没有经验。那么哪一个是最好的？或者即使不是更好，那么在开发过程中更直观/更less的问题呢？也许你们中的一些人都有经验，可以指出他们的优点和缺点？链接：托德座右铭： https ： //github.com/toddmotto/angularjs-styleguide 约翰爸爸的： https ： //github.com/johnpapa/angularjs-styleguide Minko Gechev的： https ： //github.com/mgechev/angularjs-style-guide