发表于 | | 阅读次数

之前在 Stack Overflow 看到题目 `parseInt(1/0, 19)，代码执行的结果是 18，令人出乎意料。虽然这个题目是很少见到的情况（0作为被除数、采用19进制），但这个题目是一个很好的了解JavaScript parseInt 函数的机会。

要解答 parseInt(1/0, 19)这个题目，要理解两个知识点：

  1. 1/0 的值是什么？
  2. parseInt 函数是怎么样将一个 String 转化成Int？

0 作为被除数

JavaScript里的所有算术运算采用的是IEEE 754 Standard。在 IEEE 754 Standard 中定义当被除数为 0 时，结果是（正/负）无穷大，无穷大在 JavaScript 中使用 Infinity 代表。所以表达式 1/0 的结果是正无穷大，即：Infinity。

parseInt函数

parseInt的定义是：接收一个字符串并返回一个基于指定基数的整型值。语法为：

1
parseInt(string, radix);

parseInt 执行的步骤可以分为四个：

  • 初步解析 string 参数
  • 解析 radix 基数参数
  • 根据 radix 再次解析字符串
  • 返回结果

执行步骤说明如下：

阅读全文 »

发表于 | 分类于 | | 阅读次数

准备测试环境

  1. 在Qunit官网下载qunit.js和qunit.css两个文件，然后放进qunit文件夹；

  2. 创建test.html，内容为：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>QUnit Example</title>
        <link rel="stylesheet" href="qunit/qunit.css">
    </head>
    <body>
        <div id="qunit"></div>
        <div id="qunit-fixture"></div>
        <script src="qunit/qunit.js"></script>
        <!– 源文件 –>
        <!– 测试脚本 –>
    </body>
    </html>

QUnit 对源文件和测试脚本的存放目录结构没有任何要求，可以自由配置，只要在 tests.html（此文件名亦可自定义）正确引用 qunit.js、qunit.css、源文件和测试脚本文件即可。这里我采用如下的目录结构：

阅读全文 »

发表于 | | 阅读次数

背景介绍


近期，编写了一个针对JavaScript日期格式化类的测试。这个JavaScript日期格式化类模仿Java中的SimpleDateFormat类（java.text.SimpleDateFormat）的格式。


测试采用QUnit作为JavaScript单元测试工具。结合QUnit，同时需要SimpleDateFormat类的格式输出结果做比对，那么最为简便的测试环境是使用JSP（容器/服务器可选择Tomcat），测试的步骤如下：



  1. 定义格式化模式（Pattern），这个模式同时需要在 JSP页面 和 测试脚本中定义。比如：”HH:mm:ss”；

  2. 在JSP页面中，使用SimpleDateFormat类格式化日期，并将日期原始数据和格式化结果写在页面上。例如：
    <div class=”date”><%= date.getTime()%></div>
    <div class=”result”><%= formatter.format(date)%></div>

  3. 在测试脚本中，获取页面上的日期原始数据并进行格式化；将结果与(2)中输出的结果进行比对。


测试分为“模式（Pattern）”测试，“本地化（Locale）”测试，“边界值（Boundary）”测试以及“随机（Random）”测试。其中：



阅读全文 »

发表于 | | 阅读次数

文档对象模型（DOM）

DOM全称Document Object Model，由浏览器实现的一套编程接口，以便动态更改文档（通过JavaScript）。DOM是一棵树，在浏览器解析HTML页面的时候生成，这棵树由JavaScript节点对象（Node Objects）组成。

<!DOCTYPE html>
<html>
    <head><title>DOM Tree</title></head>
    <body>
        <p>DOM Demo</p>
    </body>
</html>

上面的代码将生成如下的DOM：

                        ■ DOCTYPE(9)
                        ↓
                        ■ HTML(1)
          ↙        ↙              ↘             ↘
   ■ #text(3)  ■ HEAD(1)          ■ BODY(1)       ■ #text(3)
                  ↓               ↙   ↓  ↘
               ■ TITLE(1)  ■ 回车换行(3)  ■ P(1)   ■ 回车换行(3)
                  ↓                       ↓
               ■ #text(3)                #text(3)

括号中的数字代表节点类别：1代表元素节点、3代表文本节点、10代表文档类型节点

节点对象（Node Objects）

DOM树由节点对象组成，节点对象根据类型的不同又分为许多类别，但都派生于Node。Node类是一个JavaScript构造函数，继承Object，拥有节点的通用属性和方法。节点对象的继承关系例子：

元素节点对象A
HTMLAnchorElement < HTML *Element < HTML Element < Element < Node < Object

文本节点
Text < CharacterData < Node < Object

文档节点
HTMLDocument < Document < Node < Object

文档片段节点
DocumentFragment < Node < Object

根据节点的不同，节点对象分为许多类别，这些类别都有自己的构造函数。常见的节点类别有：

阅读全文 »

发表于 | 分类于 | | 阅读次数

underscore.js 里有一个数组重新随机排序的函数 _.shuffle：

1
2
3
4
5
6
7
8
9
10
11
12
13
// Shuffle an array.
_.shuffle = function (obj) {
    var rand;
    var index = 0;
    var shuffled = [];
    each(obj, function (value) {
        // _.random函数返回[0, index]之间的随机数
        rand = _.random(index++);
        shuffled[index - 1] = shuffled[rand];
        shuffled[rand] = value;
    });
    return shuffled;
};

函数的算法

  1. 创建 数组 shuffled = []，用于保存随机排序后的数组；
  2. 迭代 待排序数组，设定当前迭代索引 index = 0；
  3. 生成 随机索引 rand。rand 的值介于 [0, index]；
  4. 添加 元素到 shuffled 数组，值为 shuffled[rand]；
  5. 赋予 shuffle[rand] 当前迭代元素的值

运行过程

假定现有待随机排序数组 array = [1, 2, 3, 4, 5]，那么第一次迭代的时候情形如下：

阅读全文 »
0%