随笔分类 - JavaScript
摘要：介绍 低层次的语言，如C，具有低级别的内存管理命令，如：malloc()和free()，需要开发者手工释放内存。然而像javascript这样的高级语言情况则不同，对象（objects, strings 等）创建的时候分配内存，当他们不在使用的时候内存会被自动回收，这个自动回收的过程被称为垃圾回收。因为垃圾回收的存在，让javascript等高级语言开发者产生了一个错误的认识，以为可以不用关心内存管理。 内存生命周期 不管什么样的编程语言，内存的生命周期基本上是一致的。分配你需要的内存使用他进行读写操作当内存不需要的时候，释放资源 步骤1和步骤2对于所有语言都一样，能明显觉察到。至...
阅读全文
摘要：最近在翻看John Resig的大作《ProJavaScriptTechniques》，里面讲到了如何做javascript的类型判断的问题。文中介绍了两种方式，一种是使用typeof，另一种是使用constructor。略感遗憾的是作为jquery的作者，他尽然没有介绍jquery使用的类型判断方式。不过没有关系，我在这里给大家一起总结下。 在这里我首先像大家推荐一个很好用的在线编辑器：http://jsfiddle.net/。他提供了jquery、mootools、prototype和YUI三个主流js框架的各个版本，当你需要编写简单的js测试程序的时候可以直接使用它。省去了打开编辑...
阅读全文
摘要：自动化测试另外一个比较重要的内容点是性能测试，很多问题可能有不止一种解决方案，很多时候并不知道哪个是最好的解决方案。例如有很多创建javascript对象的方法，使用javascript构造器、使用函数的方法或者使用闭包。我们可能会从可测试化、灵活性和性能的角度去考虑使用哪种方式。足见性能是相当重要的一点。 1.基准和相对性能 当一个问题我们有两个以上的解决方案的时候，判断哪个解决方案更好的原则很简单，就是哪个的性能更好。判断的原则也很简单：1.创建new Date()作为开始时间；2.执行要衡量的代码；3.代码执行完毕，创建new Date()作为结束时间，减去开始时间算出总时长；4...
阅读全文
摘要：TDD是一个迭代的开发过程，他包括下面的步骤：1.编写测试；2.运行测试，观察失败；3.确保测试通过；4.重构，减少重复。 每次迭代中，测试就是规范。在我们完成开发之后，测试就可以通过了。之后我们就需要进行减少重复代码和提高设计的重构工作，然后再次运行测试，并保证其通过。 虽然TDD不主张预期的大设计，但是我们在TDD开始之前还是需要做个简单的设计。我们要如何写自己的第一个设计呢？当我们获得了足够信息可以制定测试的时候，测试代码的编写，本身就是设计。我们指定在特定情况下特定代码的行为，系统之间组件如何响应，以及他们之间如何组合。下面我们会举例，以便大家更好的学习。 TDD中的迭代时间...
阅读全文
摘要：通过之前文件关于单元测试的介绍，我们学会了如何减少代码的缺陷，通过回归测试抓取bug，减少对公共测试的依赖提高开发效率。本章我们的关注点将会放在测试驱动开发（TDD）上，他是测试先行、开发置后的开发模式。他有很多的好处，例如：更好的可测试代码、更简洁的接口和可以提高开发者信心的代码质量。 测试驱动开发的目标和目的 测试驱动开发的目标是简洁的代码。TDD是一种迭代的开发过程，每个迭代式以写单元测试开始，单元测试可以作为将要开发功能的规范文档。短期迭代对代码的反馈是及时的，这样可以更容易发现我们不好的设计。编写开发代码之前，先写单元测试还可以提高单元测试覆盖率。 1.开发置后 传统的开...
阅读全文
摘要：FuncUnit相关的知识我在之前的博文已有简单介绍，大家可以自行阅读《javascriptMVC入门 -- 12.FuncUnit》。他提供了很多api方法，我的文章中没有涉及，大家可以去官网查看，地址：http://www.javascriptmvc.com/。 今天我们将通过一个简单的例子，介绍如何把FuncUnit引入项目中，对无法执行单元测试的js文件进行自动化的功能测试。我例子是对jquery焦点图插件进行测试，先来看一下项目结构： 蓝框选中的就是测试文件。根目录下面的documentjs、funcunit、jquery、steal四个文件夹对应于javascriptMVC...
阅读全文
摘要：本篇我们将通过对Date.strftime编写单元测试的例子，学会断言、测试用例函数的相关知识。 首先我们先来看Date.strftime的实现代码。Date.prototype.strftime = (function () { function strftime(format) { var date = this; return (format + "").replace(/%([a-zA-Z])/g, function (m, f) { var formatter = Date.formats && Date.formats[f]; ...
阅读全文
摘要：从今天开始，我将以读书笔记的方式向大家介绍《Test-Driven JavaScript Development》相关内容。我不太清楚这本书是否已经有了中文的译本，有兴趣的朋友可以去搜索下，或者直接读英文原版。因为是读书笔记，算是供大家参考学习的资料，所以文章中很多知识或者概念的定义或者讲解可能不会那么精确。只要大家能明白我表达的内容即可，没必要太较真。 之前我写了《QUnit系列》有兴趣的朋友可以去阅读，他是当前比较流行的javascript测试的框架。通过学习QUnit相关知识，觉得很有必要丰富下自己的理论知识。只有有了强大的理论基础，你在工作上才会更有指导性和针对性。 本文将介绍...
阅读全文
摘要：分析别人的源代码，除了可以了解程序功能是如何实现之外，还可以学到一些比较先进的编程方式和思想，进而提高自己的水平。本着这一想法，我将对QUnit的源代码加以解读，也希望对大家js水平的提高有个帮助作用。 好的js框架在语言上总是很干练的，里面也使用了很多比较先进的编程技巧，这就要求读者必须要有比较扎实的js基础知识。在这里我重点推荐汤姆大叔的译作《深入理解JavaScript系列》。文章很多共有50多篇，前20多篇对js基础知识作了很深入的讲解（市面上没看到比他更深入的书籍和博文，也可能是我看的资料少的缘故），后20多篇讲的是js的设计模式，我重点推荐前20多篇。相信通过对该系列重复的阅...
阅读全文
摘要：测试用户操作 问题 那些依赖于用户操作的代码，不能通过执行函数来测试。通常元素的事件使用异步函数，例如click，这些需要模拟。 解决方案 你可以使用jQuery的trigger()方法来触发事件，然后测试预期的行为。如果你不想浏览器事件被触发，你可以使用triggerHandler()来执行事件相关方法。这对于测试链接的click事件是有帮助的，因为trigger()可能会使浏览器改变地址栏信息，这恐怕不是测试过程中想要发生的。假设我们有一个简单的KeyLogger需要测试：function KeyLogger( target ) { if ( !(this instanceo...
阅读全文
摘要：自动化测试软件对于开发来说是一个很重要的工具，而单元测试对于自动化测试来说是基本组成部分：软件的每一个组件或者单元可以在非人工介入的情况下，使用测试工具一遍遍的重复执行。换句话说，就是你可以写一次测试，然后不用付出额外成本的任意执行多次。 除了测试覆盖率带来的好处外，测试还可以指导软件设计，这就是TDD（基于测试驱动的设计）：先有测试，后有开发代码。你开始写一个简单的测试，然后写实现代码并保证代码能通过测试。完成上述步骤后，扩展你的测试，让他覆盖更多设计功能，然后再编写实现代码。重复上面的步骤直到完成开发，你会发现你的实现代码和之前的版本已经非常不一样了。 JavaScript的单元测...
阅读全文
摘要：JavaScript测试框架：QUnit 下面我们将介绍使用QUnit来完成前一章中的单元测试。<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Refactored date examples</title> <link rel="stylesheet" href="../qunit.cs
阅读全文
摘要：以前，在web上要显示灰度图片的话，只有手工使用图片软件转换。但是现在借助于html5的canvas可以实现这个过程，而不需要再借助图片编辑软件了。我用html5和jquery做了一个demo，来展示如何实现这个功能。demo地址：http://webdesignerwall.com/demo/html5-grayscale/目的这个demo将会向你展示用html5和jquery，如何实现鼠标在图片上移动移出时，灰度图像和原图之间的切换。在html5出现之前，要实现这个功能就需要准备两个图片，一个灰度图片，一个原图。但是现在借助于html5可以实现的更快更容易，因为灰度图片是直接在原图上生..
阅读全文
摘要：大家都知道单元测试对于保证代码质量的重要性，但是对客户端代码进行单元测试则要困难的多。一个比较棘手的问题是，因为JavaScript代码和后台代码或者html结合的比较紧密，他缺少真正单元的概念。例如对dom的操作，无论我们是借助jquery这样的类库，把js代码单独放在一个文件，还是直接使用内嵌代码的实现方式，都没有可以测试的单元。 那么什么是单元呢。一般而言，单元就是一个功能函数，相同的输入，输出结果是一定的。这种情况的函数，做单元测试是相当简单的，但有时候你需要处理一些特殊情况，例如对dom的操作。对于我们来说他仍然是有用的，我们可以指出哪些代码可以构造到单元里面，然后对他做相应的...
阅读全文
摘要：今天看qunit源代码，发现一段很奇怪的代码，虽然能领会他的意思，但是不明白双感叹号起到的作用。function id( name ) { return !!( typeof document !== "undefined" && document && document.getElementById ) && document.getElementById( name );} 然后去网上查了些资料，他相当于三元运算符，返回boolean值。var ret = !!document.getElementById等价于：var
阅读全文
摘要：今天我们要用canvas制作一个猜字母的小游戏，先来张效果图。 游戏设计很简单，系统会随机从a-z的26个字母中选择一个保存起来，你键盘输入一个字母，系统会提示你正确字符比你当前输入字母小还是大，直到你输入正确的字母游戏才结束。 下面介绍js代码中需要用到的一些变量及其他们的含义，系统会在开始的时候初始化这些变量。guesses：用户猜字母的次数；message：帮助玩家如何玩游戏的说明；letters：保存26个英文字母的数组；today：当前时间；letterToGuess：系统选中的字母，也就是你需要猜中的字母；higherOrLower：提示用户当前输入的字母比答案大还是小；l...
阅读全文
摘要：从今天开始，我们将开始一个关于html5 canvas的系列课程。这个系列是我读《HTML5 Canvas：Native Interactivity and Animation for the Web》后的总结，有兴趣的朋友可以去下载英文原版书籍阅读。这本书通过介绍canvas游戏开发的方式，向我们展现canvas强大的功能，我觉得相当不错，通过阅读这本书我学到了canvas很多的知识。其实canvas本身的api并不多，关键是活学活用，学会对api的组合使用制作出令人难以置信的效果。而这本书就是你学习canvas最好的选择，只可惜他暂时还没有中文版，英文不好的朋友只有再等等了。 大家都...
阅读全文
摘要：今天要介绍的是走马灯效果的制作，效果图如下，页面中‘Recent Posts’就是走马灯部分。 现在我们介绍如何制作走马灯，首先定义html页面结构。<div id="outer"> <header> ... </header> <article> ... </article> <aside> ... </aside></div> 走马灯部分的html是通过js实现的，这部分html会添加在上面html header对象下面，生成的html结构如下：<div id=&quo
阅读全文
摘要：今天课程介绍的是移动的背景，顺便讲解下div+css动画的原理。首先还是先介绍如何制作移动的背景效果。 html代码比较简单，我就全贴出来了，稍后介绍js的实现。<!DOCTYPE html><html><head> <title></title> <style type="text/css"> header { display: block; width: 660px; height: 380px; margin: auto; backg...
阅读全文
摘要：今天我们要介绍的jquery动画效果是，当移动鼠标或者按键盘的左右键时，图片走廊中的图片向相应方向转动。 先来看张效果图，教程最后附有demo，大家可以下载。 首先要做的工作是创建html文本。<div id="proximity"> <img src="img/proximity1.jpg" alt="CH-47 Chinook" /> <img src="img/proximity2.jpg" alt="Mi-24W" /> <img src=&qu
阅读全文