3

这里是 JavaScript 新手。

所以我一直在尝试学习使用 Raphael.js 并遇到了这个http://jsfiddle.net/terryyounghk/AeU2r/代码片段。

现在，如果您查看第 167 行，我就是不明白这个“if”语句。

   Raphael.el.style = function (state, style, aniOptions)
    {
     if (!this.class)
     {
        this.class = style ? style : 'default';
        this.aniOptions = aniOptions ? aniOptions : null;

        // start assigning some basic behaviors
        this.mouseover(function () { this.style('hover'); });
    ....

什么级别？它在返回什么？谁在退货？

它甚至在检查什么？那是一堂课？

4

3 回答 3

4

从Raphael 文档中，Raphael.el是一种将自己的方法添加到Raphael.element类的方法。一般来说，这个类的目的是使操作 SVG 元素更容易。

this.class在代码示例中，与前面句子中使用的编程意义上的单词类无关。（据我所知）它也不是标准 Raphael 框架的一部分。它也不是指classHTML 和 SVG 元素可以具有的属性，并且通常在 javascript 中使用element.classNameor访问element.setAttribute('class', '...')。

this指的是元素包装器对象（ 的一个实例Raphael.element），看来编写此方法的人只是简单地使用该名称class在元素包装器中存储了一些附加信息。（正如评论中指出的那样，这可能是一个坏主意，因为class它是 javascript 中的保留关键字；但无论如何，它仍然有效。）

具体来说，在示例中，this.class最初是undefined因为在 Raphael 或代码中的其他任何地方都没有为它分配值。在if子句中，!undefined计算结果为true，并且在下一行中，没有值被传递给函数 for style，因此style ? style : 'default'计算结果为“默认”。因此this.class被分配了值“默认”。之后，如果您右键单击一个形状并选择Use custom style，该class形状的 'custom'。

请注意，javascript 很容易让您引用尚未在任何地方初始化的对象的属性并为其赋值。它不会抛出错误，但undefined如果没有分配任何值则简单地返回。

您可以通过在浏览器控制台中插入一行记录正在发生的事情来查看所有这些：

console.log('style', state, style, aniOptions, this, 'class:', this.class);

然后使用浏览器的开发人员工具查看输出（JSFiddle）。

于 2013-01-13T15:21:47.770 回答
0

它检查是否class定义了属性，如果没有，它将分配给style ? style : 'default'.

于 2013-01-13T10:40:30.640 回答
0

您所看到的只是一个条件语句，将其视为一个缩写的 if-else-clause，它检查是否style评估为真或假，如果为真，则this.Class值为style，如果不是，则值为'default'。

我不知道 raphael.js 是如何工作的，但在我看来它只是一个 html 元素类。

于 2013-01-13T10:42:20.537 回答