Preview
Video Player
00:00
00:00
Refactor 1: Create List Items
11:19Let's take a look at our click handler. There's a repeating pattern that we can write a function to perform, and reduce repetition in our code.
A good place to start when refactoring
a program, is to look for the same code,
0:00
or very similar code that
appears again and again.
0:04
The programmer's slogan,
don't repeat yourself,
0:07
is the foundation of dry programming.
0:09
Duplication, not only makes
your programs longer, but
0:11
also makes them more difficult to update.
0:14
Since a change you make in
one part of the program,
0:16
will probably need to be made
wherever the same code appears.
0:18
So let's see if we can simplify
our program by identifying and
0:21
removing duplicate code, for example,
0:25
take a look at the createLI function,
can you spot repeated code here?
0:28
Notice how after the first list
item is created in the first line,
0:34
createElement is called five times.
0:38
And after we create each element
we set a property to a value.
0:42
I'll just break these lines out,
so you can see this more clearly.
0:48
So, for example, in the function this
span elements textContent is set,
0:53
then here this checkbox type is set and
so on.
1:00
So we could create a function to
accept arguments for the parts of
1:06
these lines that are different, and
repeat the actions that are the same.
1:10
In other words, our new function
could accept an element name,
1:14
a property name and
a property value as arguments.
1:17
Then it could create that element, set the
supplied property to the supplied value,
1:20
and then return the element.
1:24
I'll show you what I mean.
1:25
Let's name this new function,
createElement.
1:27
And the function will live inside our
createLI function for its private use.
1:30
Next, let's copy and paste one of these
two line sequences into the function.
1:41
So I'll copy the const span and
span.text content lines.
1:47
And now, we can go through this code and
1:56
replace the parts that will
change from element to element.
1:58
We'll start with the element
name that we're passing
2:03
into the createElement method.
2:06
So let's create a parameter named
elementName that we can pass instead.
2:07
Now, when we call createElement, we pass
in the name of an element as a string.
2:13
And this line will create that element.
2:18
And we'll store that element
in a constant named element.
2:22
And we'll also change the other instance
of span to our new name of element.
2:29
And we also need to pass
the property name into the function.
2:38
Since it will differ
from element to element.
2:42
We'll make that the second parameter
to the function, and name it property.
2:45
And to access the property on element,
we'll need to use brackets syntax.
2:50
So let's replace .textContent
with a set of square brackets and
2:55
property within that.
3:00
What this does is it lets us
dynamically access the property.
3:02
So in other words we can use the string
contained in the property variable to
3:06
access the property of element.
3:10
Now, the last value we'll need
to supply to this function
3:14
is the value that we're assigning
to the elements property.
3:17
So let's create a third parameter to
hold that, and we'll name it value.
3:20
We can then assign
the property to a value.
3:25
Then we'll return this element now
that it's created and configured.
3:31
So that's all our function needs.
3:38
Now, let's replace each two line bit of
code with a call to our new function,
3:39
and then we'll add in the specific
details as arguments and
3:44
let the function take care of the rest.
3:48
Since we named our function createElement,
we can just delete document
3:50
from this line, and we can also leave in
the string span as the first argument.
3:56
After we create the spam tag,
will want to set its text content
4:01
to the text provided as
the argument to createLI.
4:06
Just like we're doing
in this next line here.
4:10
So the second argument we'll
pass is the string textContent,
4:14
and the third is text, so
the property and the value.
4:20
And now,
we can delete this line of code below.
4:28
So let's give this a save,
and go to the browser and
4:32
quickly test to make sure
everything's working okay.
4:34
I'll refresh the page and
type a name like Ken.
4:37
And when I hit Enter, the name appears, so
4:42
we know that text is getting appended
to the list item as it should.
4:44
So, great, it's working.
4:48
Now, we can go back and replace
the other lines with our new function.
4:49
Next, for the label, I'll change it to
4:53
just createElement and pass in label,
4:58
textContent, and confirmed as arguments.
5:03
And now we can delete
the textContent line below it.
5:10
And we'll do the same for checkbox passing
in input, type and checkbox as arguments.
5:16
Then deleting the line for checkbox.type.
5:29
And now, for editButton,
we'll change it to createElement
5:34
passing in button then textContent and
edit.
5:40
Then we can remove editButton.textContent.
5:49
And finally for the removeButton we'll say
5:53
createElement, button, textContent and
5:58
remove Then delete the line below it.
6:02
So let's take a look at this now.
6:09
We've removed some of the lines
from this code so far, but
6:11
there is still some repetition
with these calls to appendChild.
6:14
So I'll add some space between the lines
of code so you can see them grouped.
6:20
Notice how these pairs of lines
follow a similar pattern.
6:27
An element is created,
then it's appended to the list item.
6:32
So let's write another function
to perform this pattern.
6:38
And we can call the new
function appendToLI,
6:41
which we'll declare right underneath
the createElement function.
6:45
So now I'll just copy one of these
patterns in as the body of the function
6:53
just to start.
6:58
So here in the function, instead of span,
we'll call this constant element,
7:02
and we can replace span in
the second line too with element.
7:09
So now we'll
7:14
need to pass in the values we
want to call createElement with.
7:18
Let's add them in as parameters, and
because they are the same parameters we
7:23
call createElement with,
I'll simply copy and paste them in.
7:27
Then we wanna pass those same
parameters into createElement.
7:34
So let's paste them in here as well.
7:39
And now we can go through and replace
the call to createElement with appendToLI
7:48
So first we'll replace const
span = createElement with
7:56
just appendToLI, and
since appendToLI is now taking care
8:01
of these calls to appendChild,
we can also delete them.
8:06
Let's skip the label and checkbox for now.
8:14
And we'll do the same for
both the edit and remove buttons.
8:17
So we'll replace const
editButton with appendToLI.
8:20
Delete appendChild below it.
8:26
And for the removeButton,
we'll replace the const removeButton,
8:28
we'll simply say appendToLI, and get rid
of appendChild(removeButton) below it.
8:32
So now, what about our label here?
8:38
Well, if I just replace it
the way I did the others,
8:41
with appendToLI,
I can't append the checkbox to it.
8:45
Well that's because the label is being
created outside the scope beyond
8:50
the checkbox's reach.
8:53
So if appendToLI returned
the label once it was finished,
8:55
you could call appendChild on it and
pass in the checkbox.
9:00
So let's add that return statement
to appendToLI to return the element.
9:04
And now we can store the returned label
element in a constant I'll name label.
9:13
Then we can delete this appendChild
method for label below.
9:22
Now, we could leave this creation of
the label and checkbox how it is.
9:28
And it would be better than it was.
9:31
But I prefer to make it
a little more concise.
9:33
See how we're setting up two constants and
then using them on the third line.
9:36
So what we can do is,
we can cut the first two lines and
9:44
paste them in place of
the constants that represent them.
9:49
And I can even move this
appendChild to a new line and
10:04
indent it to show it's
a continuation of the line above.
10:07
Finally, I'll collapse these blank lines
down again, and I find this more readable
10:12
because each function name
suggests what the code is doing.
10:16
We append a label to the list item element
10:20
then we append a child to the label
which is an input we're creating.
10:23
Let's save our changes and
switch over to the browser and refresh.
10:27
And check to make sure this works.
10:32
So in the text field I'll type
a name like Tommy and hit Enter.
10:33
And I see the checkbox so
I know it all works.
10:39
So let's test it out.
10:42
You click confirm, let's click edit,
save, and remove and perfect.
10:44
Everything is still
working as it should be.
10:49
Now, another benefit of putting that logic
10:52
into the appendToLI function is that
we could add other elements and
10:55
change the order, or edit their contents,
much more easily and intuitively.
11:00
We just need to change how, or
in what order, we call appendToLI.
11:04
Well that's one refractor done so next,
let's take a look at the click handler
11:09
we built and I think I see some room for
improvement here.
11:13