摘要：
即使经验丰富，天赋过人，也不得不承认，你并不能记得所有的东西，尤其是各种各样的语言的API，参考手册（Cheat Sheet）和Google肯定是必备，为了更方便的使用，也有很多有心的人收集整理了很多，比如下面这些。不过，在这之前再推荐一个最近发现的插件，将这些一网打尽，很不错的体验： All Cheat Sheets Chrome Extension 如果插件打不开，也可以直接打开网站 http://overapi.comjQueryjQuery Cheat SheetjQuery 1.5 Visual Cheat Sheet [.pdf] ... 阅读全文
摘要：
原载于我的博客：使用Backbon.js开发Chrome便签插件2012-10-16 By BeiYuu开始之前在Web Store上没找到满意的便签插件，就只好自己动手写了Notty Notes，你可以试试看，多多提建议哦~ Backbone的流行，与前端复杂度的提高息息相关，尤其越来越多的大型单页应用的上线，代码的组织方面就产生很多新的问题。所以MV*的概念又一次在前端应用开来，不管最后那个*被定义成为什么，M(odel)和V(iew)这两层的分离，对于代码的组织大有好处。Backbone就是很简洁恰当的解决了这个问题，并没有带来一点点多余之物，这也是他的动人之处。Chrome的美丽与Ba 阅读全文
摘要：
nodejs作为一个新兴的后台语言，有很多吸引人的地方：RESTful API单线程非阻塞IOGoogle V8事件驱动Node的处理模型和现在常用的使用操作系统线程的并发模型不同。基于线程的网络相对效率低并且难以使用。与传统线程模型对每个新连接都要申请2M的线程堆栈相比，Node在高负载下表现出更好的内存效率。而且，Node用户不必关心进程死锁，因为Node里根本没有锁的概念。Node几乎没有直接执行IO操作的函数，进程也就永不阻塞，因为没有阻塞，即使不是专家也能编写快速的系统。Node在设计上受Ruby的Event Machine和Python的Twisted影响并且和它们有些像。Node 阅读全文
摘要：
WEB应用的快速发展，是的本地存储一些数据也成为一种重要的需求，实现的方案也有很多，最普通的就是cookie了，大家也经常都用，但是cookie的缺点是显而易见的，其他的方案比如：IE6以上的userData，Firefox下面的globalStorage，以及Flash的本地存储，除了Flash之外，其他的几个都有一些兼容性的问题。sessionStorage与localStorageWeb Storage实际上由两部分组成：sessionStorage与localStorage。sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能 阅读全文
摘要：
这是一篇原创翻译文章。原文地址。我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为他可以和主页面并行加载，不会阻塞主页面。当然使用iframe也是有利有弊的：Steve Souders在他的blog里面有阐述：Using Iframes Sparingly:iframe会阻塞主页面的onload事件主页面和iframe共享同一个连接池阻塞主页面的onload是这两个问题中最影响性能的方面。一般都是想让onload时间越早触发越好，一方面是用户体验过更重要的是google给网站的加载速度的打分：用户可以用IE和FF中Google工具栏来计时。那么为了提高页面性能 阅读全文
摘要：
在之前的文章中，我们讲了浏览器对于JavaScript代码执行的限制和基于计时器的伪线程机制。这里，我们再看看如何在JavaScript中处理大量数据。在几年之前，开发人员不会去考虑在服务端之外处理大量的数据。现在这种观念已经改变了，很多Ajax程序需要在客户端和服务器端传输大量的数据。此外，更新DOM节点的处理在浏览器端来看也是一个很耗时的工作。而且，需要对这些信息进行分析处理的时候也很可能导致程序无响应，浏览器抛出错误。将需要大量处理数据的过程分割成很多小段，然后通过JavaScript的计时器来分别执行，就可以防止浏览器假死。先看看怎么开始：1 function ProcessArray 阅读全文
摘要：
原文点击这里灵活的js语言可以轻易的就完成截然相反的两种编程模式–函数型程序设计和面向对象的程序设计。js原生的支持将函数当做变量来处理。你可以将一个函数赋值给一个变量，然后把他传给其他的变量。抽象的说，我们可以认为js的函数是一个特殊的变量：只不过他的形式是“函数”。js原生的也提供对象。在js中，对象可以认为是一系列平面化的属性值和方法。他们看起来像是一个数据字典，而不像你在其他诸如java、c++、c#中看到的对象那样。在经典的面向对象编程中，类表示可以通过new操作符来生成一个实例的模板。但是在js中，没有可以当做蓝本来生成对象的。在js中，一个对象的蓝本更像是一个数据字典。所以在js 阅读全文
摘要：
书签小工具（Bookmarklets）是一个非常棒的javascript代码小片断伪装成的小应用，它驻留在你的浏览器里并为网页提供额外的功能。这里我们将研究如何从头开始创建一个书签小工具及一些最佳实践的建议 阅读全文
摘要：
为什么要用VIM？1、他是一个文本编辑器，不是IDE，所以他很快、很轻、很高效。2、不想动鼠标，因为它离键盘实在太远了。3、看看电影里那些个黑客，不都是噼里啪啦的敲键盘，哪有弄个鼠标点来点去的？4、自己捣鼓一些脚本，一句顶五句，腿不疼了，腰也不酸了，吃嘛嘛香了。5、这样的年代，没有整过linux简直不好意思说自己是搞网络的，linux必须得用用vim吧6、一个编辑器不同插件就能搞定所有语言，搞定所有你想要的。7、完全跨平台，一个伟大的人绝对没有种族歧视，你应该被这种伟大所感染。8、商业化产品可能是有用的， 但最好的东西往往是免费的， 空气，水，Vim。9、周围同事不是用 Vim 就是 Emac 阅读全文
摘要：
效果演示看这里。先来看看使用方法。HTML文件中这样写：[代码]调用的话需要这样写：[代码]当然要引用这个插件才行。下面我们来讲解这个插件的编写。一、jQuery插件编写的方法写一个jQuery插件，首先需要一些必要的结构，如下所示：代码这个结构和我们最终的结果有些出入，但是大体上jQuery插件的结构就是如此。首先要写成一个闭包的形式，不污染命名空间，然后根据jQuery提供的接口来编写，这里的... 阅读全文
摘要：
关于鼠标位置的检测，我们先来看看jQuery和YUI中的实现jQuery中：[代码]YUI中：[代码]YUI的写法比起jQuery来确是“工程化”了很多，如果是按照代码行数发工资的话，推荐YUI，哈哈。之前翻译PPK的作品的是提到了无论如何都不要检测浏览器的类型，因为没必要，而且浏览器的UA都在胡言乱语。关于document.documentElement和document... 阅读全文
摘要：
这是一个简单可用的拖拽代码。用鼠标和键盘都可以操作。当示例的box上的#链接处于活动状态的时候（不论是用tab然后点击enter或者使用鼠标点击）这个元素就能够通过方向键拖拽。然后点击enter或者Esc释放。（可以随意改变这些键。我不确定释放键应该设置成为什么所以enter和Esc都可以）使用1、复制文章后面的dragDrop对象。2、复制我的addEventSimple和removeEvent... 阅读全文
摘要：
在所有的表单项里面，文件上传部分是最难添加样式的。IE支持一些（不是很多）样式属性，Mozilla很少，其他浏览器几乎没有。“浏览”按钮在CSS操作里面也很难访问。问题在一个网站中可能我的输入框式下面这样的： 设计者可能想让上传部分也像这样然后再添加一个select按钮。但是当我想把普通的输入框改为上传框时就根本不能工作。浏览器之间有很大的不同，给默认按钮添加样式也几乎不可... 阅读全文
摘要：
今天我打算使用一些元素的透明度设置来实现淡出淡入效果。但是有些浏览器对于某些元素的透明度设置支持不够。而且要设置表格的透明度，几乎在所有的浏览器里面都不可能。这里是测试页。在JavaScript里面设置透明度我用下面的代码来设置透明度：function setOpacity(value) { testObj.style.opacity = value/10; testObj.style.filte... 阅读全文
摘要：
在这一章我打算通过直接修改页面的样式表而不是通过访问元素的办法来修改PRE的背景颜色。不幸的是，浏览器严重的不兼容性让这个代码基本上不能使用。请注意代码和传统的DHTML的区别。在DHTML你通过直接修改页面上的特定元素来改变样式，而这里的代码修改的是样式表。在这里查看W3C DOM-CSS的兼容性列表。定义一个页面总是包含一个或者几个样式表，一个样式表里面包含一条或者几条规则，一条规则里有详细的... 阅读全文
摘要：
有时候你想看看文档的默认样式。比如，你的某个段落的宽度是50%，你想知道在用户的浏览器中他的确切的像素是多少。另外，有时候你也许想知道添加到一个元素或者链接上的样式的具体内容。而style属性只能读取元素的内联形式的样式，所以如果你想读取其他样式就得另想办法了。偏移在使用一些小技巧之前，IE和Mozilla已经添加了一个比较好的办法：offsetSomething。使用这些属性你就能够读取这个段落... 阅读全文
摘要：
在这一章我会给出查找页面上的元素位置的代码。他能帮助你找到真正的位置，假如你改变了窗口的尺寸，然后再次运行代码，也会告诉你新的位置。offset在所有的浏览器里面元素的offsetTop和offsetLeft两个属性都是很有用的。他们会给出你元素相对于父元素的坐标位置。这段代码会向上查找offsetParent，然后添加offsetTop和offsetLeft。最终无论offsetParent在哪... 阅读全文
摘要：
这一章会对范围对象做一些介绍。使用这个对象你能选取HTML文档中的任何部分然后根据选取信息作一些事情。最常见的范围对象是由用户选择的。虽然我们会讲解用程序创建范围对象，但是我们把精力主要集中在如何将用户的选取范围转换成为W3C 范围或者微软的文档范围对象。什么是范围范围是指HTML文档中的任意一部分内容。一个范围的开始和结束点都可以是随意的，甚至是相同的（一个空范围）。最常见的范围就是用户选取的文... 阅读全文
摘要：
这一章详细介绍的表单错误提示的方法比那种大多数使用警告框的方法要好的多。在我看来，警告框只用在浏览器不支持其他显示错误信息的办法的时候。W3C建议我们在表单项的附近显示错误信息。这是一种很好的办法，所以我们只在浏览器不支持这种高级的办法的时候才使用警告对话框。例子试试下面的例子。每一项都是必须的。另外我会坚持email项是否有@符号。如果没有也会提示错误信息。var W3CDOM = (docum... 阅读全文
摘要：
这一章我会处理一个简单的W3C DOM脚本。他会帮助我们从一个新的角度来看待交互设计。想法假设你有一个在线的CD评级工具。你希望用户查看他们喜欢的所有CD。但是你怎么知道用户平均会查看多少张呢？你在这个页面上需要添加多少字段呢？在W3CDOM出现之前这确实是一个问题。假设你放置了7张CD。但是用户很可能只想查看一张，太多可能会吓着用户，而有些用户想查看自己的所有CD，这样就不得不反复提交很多次。这... 阅读全文
摘要：
在这一章我有一个检查用户输入然后打印用户输入的表单和代码。下面我会着重讲解检测文本的代码。表单实例这是一个表单的实力。这里有一个小问题：因为我的服务器现在不支持，所以表单不能提交。我会打印出你的输入，然后返回一个false，这样表单就没有被提交。onSubmit的代码做了两件事情：检查你是否在四个文本框里面都填写了数据，然后把所有的元素都连接起来打印在下面的文本区域中。原文中有实例，需要童鞋请移步... 阅读全文
摘要：
在这一章我主要介绍一些用来检测用户输入的代码，利用这些代码，你也可以写一些自己的检测函数。因为每一个表单的检测项都不同，所以我也不能给你一个万能的代码。你需要用我在这一章介绍的这些元素构建自己的检测函数。我在后面一张还有一个例子，你也可以参考。在这一章我会首先讨论一下用JavaScript来检测表单的局限性，然后会解释一下提交时间处理程序，然后是表单本身的一些方法和属性。最后就是如何访问表单元素。... 阅读全文
摘要：
HTML有一些相关有不同tag名字的相关元素，比如H1-H6或者input，select和TEXTAREA。getElementByTagName只能取得那些有相同tag名称的元素，所以你不能用他来取得所有的标题或者整个表单内容。getElementByTagNames（注意是复数的names）会获得一些tag的元素，然后按照他们的顺序保存在一个数组中。这非常的有用，比如在上一章的TOCScrip... 阅读全文
摘要：
在这一章我会解释我的网站上的所有页面都在运行的内容表格的代码。他会生产这个页面的所有h3和h4的列表，然后给他们添加一个链接。如果你也想这么做，那么你还需要我的getElementByTagNames()函数。代码function createTOC() { var y = document.createElement('div'); y.id = 'innertoc'; var a = y.ap... 阅读全文
摘要：
在这一章我会给出一个在CMS里非常有用的更新页面的代码。在任一段落点击鼠标你就可以修改了。完成以后点击按钮，修改的文本就显示了。例子这个页面就是个例子。点击一个段落，编辑，然后点Ready。你的修改就会呈现。问题遇到的第一个问题是：我想用文本框作为编辑区域。一开始我却把内容放不进文本框去。读者发现Mozilla的一个警告说是只有在文本框放置到文档之后才能设置它的value。另外，在Mozilla下... 阅读全文
摘要：
文档对象模式（Document Object Model DOM）用来描述HTML页面中那些输入框、图片、段落等等元素与最顶级的结构document之间的关系。用适当的方法来选取这些元素，我们就可以改变他们。在这一章我主要介绍已经被新一代的浏览器所支持的W3C 第一级的DOM。对他的运作做一个大概的了解并且让你知道你可以对他们做什么。首先是对于DOM的一些建议和DOM设计的目的，然后我会告诉你什么... 阅读全文
摘要：
这里有个addEventSimple和removeEventSimple函数，有时候需要不那么显眼的事件处理程序的时候我就用这两个函数注册。function addEventSimple(obj,evt,fn) { if (obj.addEventListener) obj.addEventListener(evt,fn,false); else if (obj.attachEvent) ob... 阅读全文
摘要：
检测用户的按键是事件处理程序的一个很特别的环节。这一章我们着力解决一些非常棘手的问题，并且制定一个完备的表格。第一个问题是对于按键事件来说根本就没有标准，按照规范说的：包含键盘等输入设备的事件模型会在以后的DOM规范中作出解释。正如我们了解到的，浏览器在最开始设计的时候并没有一个标准，大家都像做实验似的，最后的成品虽然是有用的，但是肯定造成了兼容性的问题。按键问题也不例外：这里有两个属性能检测到用... 阅读全文
摘要：
为了让我们的JavaScript驱动的页面对那些不能或者不想使用鼠标的用户也能很好的使用，我们对于像mouseover和click这样的事件做一些处理，同样的，对于非鼠标事件也同样的要我们的脚本执行。 转载请注明以下信息： 测试的局限性 这一章我们打算寻找哪些事件可以用来仿真鼠标事件。注意这一系列测试不包括屏幕阅读器。因为我不能满足所有的条件，因此测试也有局限性。这个测试目标仅仅只是那些在图形界面... 阅读全文
摘要：
鼠标事件是到目前为止最重要的事件。在这一章我将介绍一些鼠标事件的最常见的问题和技巧。先看看都有哪些鼠标事件：mousedown,mouseup_and_click,dblclick,mousemove和mouseover mouseout。然后还会解释一下relatedTarget,fromElement和toElement这些事件属性。最后是微软的mouseenter和mouseleave事件。... 阅读全文
摘要：
在第一章中我提到一个初次看起来可能不是那么好理解的是一个问题：“如果一个元素和他的父元素对于同样的事件都有事件处理程序，那么哪个会首先执行呢？”毫无疑问，看是什么浏览器。基本问题很简单。假设你的一个元素包含在另外一个元素中。-----------------------------------| element1 || ------------------------- |... 阅读全文
摘要：
为了理解Event属性，我将在这里给出一些示例代码。在这个范畴内有非常严重的浏览器兼容性问题。当我们想去读一读关于Event的一些资料时，常常会湮没在大量的属性里面，这些属性其中的大多数不能良好的运行在大多数的浏览器。这里有event的兼容性列表。我不打算给这些属性列个表，因为那些情况实在是太让人晕头了，而且对你的学习也不会有一点点的帮助。在写5段代码前我先要问关于浏览器的5个问题。1、event... 阅读全文
摘要：
在这一章我会讲解如何去访问一个事件对象。现在我们已经注册了事件处理程序，对于事件我们还想更深入的了解。我们想知道事件发生时候的鼠标位置，我们想知道用户按下了哪些键。这些都是可能的，虽然这部分有很多烦人的浏览器兼容性问题。（这里可以快速查看浏览器兼容性列表）。要读出事件的属性，必须要先能访问到事件。浏览器兼容性站在浏览器战争的角度看，Netscape实现了一个访问模型（后来被W3C做借鉴）和很多的事... 阅读全文
摘要：
在这一章我会讲解两种高级时间注册模型：W3C和微软的。因为这两个方法都不能跨浏览器，所以在现在看来他们的使用场合并不多。W3C和微软都着力于发展自己的事件注册模型来取代Netscape的传统模型。虽然对于微软的模型我不是很感冒，但是w3c的还是不错的，除了这个鼠标定位 的问题。不过现在只有小部分浏览器支持。W3CW3C的DOM层面事件规范注意到了传统模式的问题。他对于你想在一个元素上绑定多个事件提... 阅读全文
摘要：
在这一章我会讲解给元素注册事件的最好的一种办法，那就是：确保一个特定的事件在特定的HTML元素上发生并且能运行特定的脚本。在最古老的JavaScript浏览器里注册事件只能通过内联模式。自从DHTML从根本上改变了你操作页面的方法，事件的注册就必须有扩展性而且要有很强的适应性。所以就必须有相应的事件模型。Netscape在第三代浏览器中就开始了，IE在第四代浏览器开始。因为Netscape 3就开... 阅读全文
摘要：
在这一章我会谈到一些最古老的添加事件处理程序的方法，这些方法甚至被第二代浏览器所支持。这些古老的浏览器只支持一种注册事件处理程序的方法，这个方法是Netscape发明的。因为Netscape先发制人，所以如果微软也想做支持JavaScript事件的浏览器就得跟着Netscape走，所以这里没有兼容性的问题。所以这种模式在任何支持JavaScript的浏览器都能运行---除了Mac上的IE3，他根本... 阅读全文
摘要：
在这一章我将对重要的事件做一个概述，包括一些流行的浏览器的兼容性问题。 在这里提出的事件，当他们发生在一个确定的HTML元素上的时候，他们的名字能够被大多数的浏览器所识别。也就是说，浏览器会查找你为这个HTML元素所注册的事件处理程序的脚本，而且会被立即执行。 一开始只有为数很少的一些事件。这些事件在几乎所有的JavaScript浏览器都能运行，即使是那些非常古老的。需要注意的是那些早期的事件只能... 阅读全文
摘要：
Events是每一个JavaScript程序核心。什么是事件处理，它有什么问题和怎样写出跨浏览器的代码，我将在这一章做一个概述。我也会提供一些有精彩的关于事件处理程序的细节的文章。 没有event就没有脚本。可以看看任何有JavaScript代码的网页：几乎所有的例子都有一个事件触发了脚本。原因非常简单。JavaScript就是给你的页面添加内部活动：用户做一些事情然后页面做出回应。 因此Java... 阅读全文
摘要：
Aptana是个优秀的Javascript的IDE，ZenCoding也是最近才从小众上面知晓的一个相当帅气的HTML编写的插件，关于他的介绍，这里有比较简洁明了的这里有比较详实系统的这里是一个展示视频如何在Aptana里面安装Zencoding，有官方指导，现在做一些说明如下：由于Aptana本身就是基于Eclipse的，所以，Zen Coding也是支持Eclipse的，只是需要一个Ecli... 阅读全文