New to javascript here.
So I've been trying to learn to use Raphael.js and came across this http://jsfiddle.net/terryyounghk/AeU2r/ snippet of code.
Now if you look at line 167, there is this "if" statement I just don't understand.
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'); });
....
What class? What is it returning? Who is returning it?
What is it even checking? That it's a class?
From the Raphael documentation , Raphael.el
is a way of adding one's own methods to the Raphael.element
class. In general, the purpose of this class is to make it easier to manipulate SVG elements.
this.class
in the code example has nothing to do with the the word class in the programming sense, as used in the preceding sentences. Nor (as far as I can see) is it part of the standard Raphael framework. Nor does it refer to the class
attribute that HTML and SVG elements can have, and which is usually accessed in javascript using element.className
or element.setAttribute('class', '...')
.
this
refers to the element wrapper object (an instance of Raphael.element
), and it seems that the person who wrote this method has simply used the name class
to store some additional information in the element wrapper. (As pointed out in comments, this might be a bad idea because class
is a reserved keyword in javascript; but anyway, it works.)
Specifically, in the example, this.class
is initially undefined
because it has not been assigned a value anywhere else in Raphael or in the code. In the if
clause, !undefined
evaluates to true
, and in the following line, no value has been passed to the function for style
, so that style ? style : 'default'
style ? style : 'default'
evaluates to 'default'. So this.class
is assigned the value 'default'. Afterwards, if you right-click on a shape and choose Use custom style , the class
for that shape becomes 'custom'.
Note that javascript very easily lets you refer to, and assign values to, properties of an object that have not been initialised anywhere. It does not throw an error but simply returns undefined
if no value has been assigned.
You can see all this by inserting a line that logs what's going on to the browser console:
console.log('style', state, style, aniOptions, this, 'class:', this.class);
and then using your browser's developer tools to see the output ( JSFiddle ).
It checks if a property class
is defined and if not, it will assign it to style ? style : 'default'
style ? style : 'default'
.
What you're seeing is simply a conditional statement, look at it as an abbreviated if-else-clause which checks if style
evaluates to true or false, if it's true this.Class
will have the value of style
, if it's not it will get the value of 'default'
.
I don't know how raphael.js works, but it looks to me like it is simply a html element class.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.