QUnit系列 -
<div id="cnblogs_post_body"> 大家都知道单元测试对于保证代码质量的重要性，但是对客户端代码进行单元测试则要困难的多。一个比较棘手的问题是，因为JavaScript代码和后台代码或者html结合的比较紧密，他缺少真正单元的概念。例如对dom的操作，无论我们是借助jquery这样的类库，把js代码单独放在一个文件，还是直接使用内嵌代码的实现方式，都没有可以测试的单元。那么什么是单元呢。一般而言，单元就是一个功能函数，相同的输入，输出结果是一定的。这种情况的函数，做单元测试是相当简单的，但有时候你需要处理一些特殊情况，例如对dom的操作。对于我们来说他仍然是有用的，我们可以指出哪些代码可以构造到单元里面，然后对他做相应的测试。
创建单元测试
有了上面的指导思想，对于我们开始一项全新工作，并引入单元测试时相当简单的工作。不过本文介绍的内容是，帮助你对已有代码完善单元测试，我们需要解决下面的难题：提取现有代码，对重要部分作测试；发现潜在问题并加以修复。
提取现有代码把他放到不同地方，而不影响现有功能，我们把这一过程称为重构，重构是改善代码设计相当有用的方式。任何对代码的修改都有可能影响现有功能，这也就体现了单元测试的重要性，他会让你的工作更有保障。而这时候我们还没有单元测试，所以需要借助手工测试的方式来保证任何代码的修改没有产生新的bug。我们现在有了理论基础，接下来要做的就是找个例子来实践下。下面的代码会找到所有包含 title 属性的连接, 然后根据情况显示过去了多少时间，例如： &ldquo;5 days ago&rdquo;:
<div class="cnblogs_code"><!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Mangled date examples</title> <script> function prettyDate(time){ var date = new Date(time || ""), diff = (((new Date()).getTime() - date.getTime()) / 1000), day_diff = Math.floor(diff / 86400); if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 ) return; return day_diff == 0 && ( diff < 60 && "just now" || diff < 120 && "1 minute ago" || diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" || diff < 7200 && "1 hour ago" || diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") || day_diff == 1 && "Yesterday" || day_diff < 7 && day_diff + " days ago" || day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago"; } window.onload = function() { var links = document.getElementsByTagName("a"); for ( var i = 0; i < links.length; i++ ) { if ( links.title ) { var date = prettyDate(links.title); if ( date ) { links.innerHTML = date; } } } }; </script></head><body> <ul> <li class="entry" id="post57"> <p>blah blah blah...</p> <small class="extra"> Posted <span class="time"><a href="/2008/01/blah/57/" title="2008-01-28T20:24:17Z"><span>January 28th, 2008</span></a></span> by <span class="author"><a href="/john/">John Resig</a></span> </small> </li> <!-- 更多内容... --></ul> </body></html>
页:
[1]