Question

这里是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'); });
    ....

什么课？什么回来了？谁回来了？

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

Answer 1

从Raphael documentation开始，Raphael.el是一种向Raphael.element类添加自己的方法的方法。通常，此类的目的是使操作SVG元素更容易。

代码示例中的

this.class与编程意义上的单词class无关，如前面的句子中所使用的那样。 Nor（据我所知）它是标准Raphael框架的一部分。它也不是指HTML和SVG元素可以拥有的class属性，而且通常使用element.className或element.setAttribute('class', '...')在javascript中访问。

this指的是元素包装器对象（Raphael.element的一个实例），并且编写此方法的人似乎只使用名称class来存储一些其他信息在元素包装器中。（正如评论中所指出的，这可能是一个坏主意，因为class是javascript中的保留关键字;但无论如何，它都有效。）

具体来说，在示例中，this.class最初是undefined，因为它尚未在Raphael或代码中的任何其他位置分配值。在if子句中，!undefined评估为true，在下一行中，没有值传递给style的函数，因此style ? style : 'default'评估为“默认”。因此this.class被赋值为'default'。之后，如果右键单击某个形状并选择使用自定义样式，该形状的class将变为“自定义”。

请注意，javascript非常容易让您引用并指定尚未在任何位置初始化的对象属性的值。它不会引发错误，但如果没有赋值，则只返回undefined。

您可以通过插入一行记录浏览器控制台的内容来查看所有这些内容：

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

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

Answer 2

检查属性class是否已定义，如果未定义，则会将其分配给style ? style : 'default'。

Answer 3

您所看到的只是一个条件语句，将其视为缩写的if-else子句，检查style的计算结果是真还是假，如果是真的this.Class将具有style的值，如果不是，则会得到'default'的值。

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

似乎无法理解这个javascript代码！如果（！this.class）

3 个答案: