1
00:00:02,150 --> 00:00:10,640
Back in our project, there we could add a new class and I'll add it here above my other specialized classes

2
00:00:10,640 --> 00:00:15,530
so to say which you can give any name you want and I'll name it component because in the end, this will

3
00:00:15,530 --> 00:00:18,020
be a class I use to output different,

4
00:00:18,020 --> 00:00:25,790
you could say, components, parts of my web page. Now such a component class will have a method which I'll

5
00:00:25,790 --> 00:00:33,890
name createRootElement which receives three arguments - the tag of the element I want to create,

6
00:00:33,890 --> 00:00:42,620
so I'll use that later to basically replace this line here, so I want to have the tag, I want to have

7
00:00:42,650 --> 00:00:50,600
any CSS classes that should be added and any other attributes that might need to be added to that

8
00:00:51,020 --> 00:00:55,950
element which is created here. Inside of createRootElement,

9
00:00:56,150 --> 00:00:59,120
we can then create that root element here,

10
00:00:59,150 --> 00:01:06,140
you can of course give that constant any name you want with documents create element and pass in that

11
00:01:06,170 --> 00:01:07,200
tag,

12
00:01:07,670 --> 00:01:12,860
then check if we have that CSS class constants set,

13
00:01:12,860 --> 00:01:19,370
so if that is a truthy value, if CSS classes is a truthy value. If it is, then I'll go to the root

14
00:01:19,400 --> 00:01:23,250
element and set the class name equal to CSS classes,

15
00:01:23,600 --> 00:01:28,590
so I expect CSS classes to be a string of CSS classes that should be added,

16
00:01:28,740 --> 00:01:32,570
else I'll do nothing so no need for an else block. After this if check,

17
00:01:32,570 --> 00:01:39,470
I'll add another if check and see if attributes holds a truthy value so that's basically something

18
00:01:39,470 --> 00:01:42,570
we can work with and also it's not just truthy

19
00:01:42,610 --> 00:01:51,410
but also if it's an array with a length greater 0 because this should be an array and if both is true,

20
00:01:51,920 --> 00:01:54,280
I'll go through my attributes here

21
00:01:55,070 --> 00:02:00,470
with a for/of loop, you could of course also use a ForEach loop if you prefer that

22
00:02:00,470 --> 00:02:09,860
and then on the root element, I will set an attribute with the set attribute method, where I expect to

23
00:02:10,040 --> 00:02:17,240
have a couple of objects in this attributes array, where every object has a name property and also a

24
00:02:17,240 --> 00:02:25,490
value property. To guarantee the structure, we can add a new class, an element attribute for example which

25
00:02:25,490 --> 00:02:31,310
has a constructor where I get the attribute name and the attribute value

26
00:02:31,310 --> 00:02:35,300
and then here I say this.name equal attribute name,

27
00:02:35,300 --> 00:02:42,170
this.value equal attribute value, so we stored the data we got on the constructor in properties

28
00:02:42,260 --> 00:02:48,530
of the class and then here, I essentially expect attributes to be an array full of objects created based

29
00:02:48,560 --> 00:02:56,190
on that class so that we can set attributes on the root element. Well and then thereafter,

30
00:02:56,360 --> 00:03:00,910
I also want to append that element to the DOM. For that

31
00:03:00,910 --> 00:03:02,770
I need a place where we can add it

32
00:03:02,950 --> 00:03:10,740
and for this I'll actually add a constructor to component, where I expect to get a render hook value

33
00:03:10,800 --> 00:03:19,320
as a parameter and then store this in some property of component, so in a property for that component class

34
00:03:19,590 --> 00:03:23,280
and this hook property holds the data passed into the constructor

35
00:03:23,280 --> 00:03:27,500
and of course I'm just coming up with one possible way of implementing this,

36
00:03:27,510 --> 00:03:30,210
you can definitely build this in a different way as well,

37
00:03:30,210 --> 00:03:31,910
this is just one example,

38
00:03:31,920 --> 00:03:33,920
let me really emphasize that.

39
00:03:34,170 --> 00:03:40,020
So here once we created that root element, that HTML element with that given tag, I want to add it

40
00:03:40,020 --> 00:03:46,860
to this hook, so to this element I got on the constructor and to be precise here I expect that hook should

41
00:03:46,860 --> 00:03:57,030
not be the element itself but let's say the ID of that element, so maybe rename it to hook ID so

42
00:03:57,030 --> 00:04:04,290
that down here, we can say document get element by ID for this hook ID, so for that ID we got here

43
00:04:04,860 --> 00:04:10,380
in our constructor and then call append and append that root element here,

44
00:04:10,380 --> 00:04:16,070
that's the idea here. Thereafter we can return this root element here.

45
00:04:17,890 --> 00:04:19,290
So now we have this component,

46
00:04:19,300 --> 00:04:26,380
how can we now use this? To inherit from this component class which I want to do on shopping cart, product

47
00:04:26,440 --> 00:04:27,750
item and product list,

48
00:04:27,850 --> 00:04:34,300
since these are all methods that render something, to inherit from that class, I go to for example the

49
00:04:34,300 --> 00:04:40,570
shopping cart and there we now add a new keyword after the name of the class before we add the curly

50
00:04:40,570 --> 00:04:44,650
braces that mark the class body and we write extends here.

51
00:04:44,650 --> 00:04:46,520
That's the keyword, extends

52
00:04:46,660 --> 00:04:49,060
and then we write the class from which we want to extend

53
00:04:49,270 --> 00:04:55,920
and you can only extend from one class, so inheriting from multiple classes is not available in Javascript.

54
00:04:55,960 --> 00:05:02,110
Some programming languages have it, most modern languages don't really have that, Javascript certainly

55
00:05:02,110 --> 00:05:02,650
doesn't have it,

56
00:05:02,650 --> 00:05:04,660
you can only inherit from one class.

57
00:05:04,700 --> 00:05:06,820
Now what does this mean now?

58
00:05:06,850 --> 00:05:10,360
It means that shopping cart now still creates normal objects

59
00:05:10,360 --> 00:05:16,680
if we instantiate it but all these objects don't just have all the logic we defined in here but also

60
00:05:16,690 --> 00:05:19,180
all the logic we defined in the base class,

61
00:05:19,360 --> 00:05:23,280
so also the createRootElement method for example,

62
00:05:23,290 --> 00:05:28,130
this is available in every object we create based on shopping cart.

63
00:05:28,170 --> 00:05:34,350
The implication of that is that we can go to the render method now and instead of creating our cart element

64
00:05:34,350 --> 00:05:43,920
like this, we can now refer to this createRootElement and my IDE even supports this here because this

65
00:05:43,920 --> 00:05:52,200
here, when we call render in this class on an object created based on that class, this will refer to this

66
00:05:52,200 --> 00:05:57,840
object and as I said, this object will hold everything or will have access to everything that's part

67
00:05:57,900 --> 00:06:06,450
of the parent class as well, so createRootElement is accessible via this in the subclass. So I can

68
00:06:06,450 --> 00:06:14,960
call createRootElement here, now as a tag I'll pass in section, as a class name I'll pass in cart and

69
00:06:14,960 --> 00:06:22,040
therefore here we can get rid of this line and createRootElement of course returns an HTML element,

70
00:06:22,430 --> 00:06:27,590
the element that was added to the DOM, so I'll still store this in cart el because I need it here and render

71
00:06:27,650 --> 00:06:32,990
to define what exactly I want to do here. I can't move that code here into the base class because this

72
00:06:32,990 --> 00:06:38,540
differs for every class, this here is specific to the cart, we don't need that on the shopping list. So

73
00:06:38,540 --> 00:06:42,020
it's only that part where we create and append the element to the DOM

74
00:06:42,200 --> 00:06:46,170
that can be outsourced and that is now part of a separate class.

75
00:06:46,220 --> 00:06:52,730
The specific rendering for this cart item, that's still part of this cart class,

76
00:06:53,030 --> 00:06:54,860
that's how this works.

77
00:06:54,860 --> 00:07:02,570
So now with that, if we save that and we reload this page, we get an error,

78
00:07:02,570 --> 00:07:04,390
now do you know why?

79
00:07:04,670 --> 00:07:07,460
Well we get an error because we can't depend on null, so

80
00:07:07,460 --> 00:07:13,520
we basically have a problem when it comes to appending the created element and that makes a lot of sense because

81
00:07:13,970 --> 00:07:16,820
let's revisit createRootElement. There,

82
00:07:16,850 --> 00:07:21,610
I need that hook ID to append my root element. Now hook

83
00:07:21,620 --> 00:07:27,830
ID is set in the constructor of the component we inherit from and the question now of course is where

84
00:07:27,830 --> 00:07:29,710
do we call that constructor?

85
00:07:29,990 --> 00:07:37,990
When we call new cart here in the end, new shopping cart, we call the constructor of shopping cart.

86
00:07:38,350 --> 00:07:45,010
So when does the constructor of this component we inherit from get called? Well when it comes to constructors,

87
00:07:45,010 --> 00:07:46,490
there are a couple of rules,

88
00:07:46,540 --> 00:07:54,130
if your subclass, so the class which extends another class, does not have a constructor,

89
00:07:54,130 --> 00:07:57,630
the constructor of the parent class is automatically called.

90
00:07:57,790 --> 00:07:59,170
The problem here just is

91
00:07:59,260 --> 00:07:59,560
yes

92
00:07:59,590 --> 00:08:06,690
this is getting called as I can prove if I just output something here, let's quickly add that and then

93
00:08:06,690 --> 00:08:08,010
reload.

94
00:08:08,010 --> 00:08:15,180
So this is getting called but of course render hook ID is not passed in because how would Javascript

95
00:08:15,180 --> 00:08:16,650
know what to pass in there.

96
00:08:17,670 --> 00:08:20,990
So it's getting called but without any values.

97
00:08:21,000 --> 00:08:28,730
Now if you add a constructor, maybe below the getters and setters, to your subclass, so to the class which

98
00:08:28,730 --> 00:08:35,380
is extending, then this constructor will be called and the parent class constructor will not be called,

99
00:08:35,420 --> 00:08:43,820
so also not what I want. What I in the end want here is I want to call this constructor and from

100
00:08:43,820 --> 00:08:48,740
there, call the parent constructor, so the constructor of the parent class which is the class we're extending

101
00:08:48,740 --> 00:08:55,720
from and we can do this with another special keyword, the super keyword, execute it like a function and this

102
00:08:55,720 --> 00:09:00,890
will call the constructor in the parent class and you want to do this in your own constructors if you're

103
00:09:00,890 --> 00:09:06,690
a parent class also has a constructor that should be executed, which typically is the case if it has

104
00:09:06,690 --> 00:09:08,430
a constructor.

105
00:09:08,430 --> 00:09:15,120
Now one important note about super - when you add super to your constructor, make sure you're not relying

106
00:09:15,150 --> 00:09:22,530
on any field in that super constructor method, that will become important later and also if you plan

107
00:09:22,530 --> 00:09:28,000
on adding properties in your constructor with this something equals something else,

108
00:09:28,140 --> 00:09:31,120
you have to do that after you called super and

109
00:09:31,120 --> 00:09:37,380
you always have to call super, so the constructor of your parent class, of your base class first before

110
00:09:37,380 --> 00:09:42,510
you start using this inside of your subclass constructor.

111
00:09:42,540 --> 00:09:48,750
So now we can call super here and forward a value for that render hook ID,

112
00:09:48,960 --> 00:09:55,260
so an ID which we find in the DOM. Now for that, here let me go down to shop where I also have a render

113
00:09:55,260 --> 00:10:02,600
method and the ID where I want to add cart to for now is just app, right

114
00:10:02,600 --> 00:10:07,860
because that's what I'm doing in shop here essentially, I get access to that render hook in my document

115
00:10:08,130 --> 00:10:11,130
and then I append the cart element and so on.

116
00:10:11,280 --> 00:10:18,480
So in the end here in shop, I no longer need cart element, so I can get rid of that line as well

117
00:10:18,480 --> 00:10:25,920
and instead here to shopping cart, I want to forward app as a string, so that value of that ID here

118
00:10:25,980 --> 00:10:33,710
which I want to use as a hook to render that item and then in shopping cart, in that class, I now expect

119
00:10:33,710 --> 00:10:42,360
that render hook ID or however you want to call it as a value here on that constructor method and

120
00:10:42,360 --> 00:10:47,910
then I simply forward that, so that value I'm getting here to the super, to the parent constructor so

121
00:10:47,910 --> 00:10:55,370
that this constructor has access. And now as a side note, render here in my shopping cart

122
00:10:55,590 --> 00:11:01,110
also no longer needs to return anything because I'm not interested in the cart element anymore, I don't

123
00:11:01,110 --> 00:11:04,440
need it anywhere in the place where I call render.

124
00:11:04,440 --> 00:11:09,580
So now with that if we save that and we reload, this looks a bit better but we get another error, cannot

125
00:11:09,580 --> 00:11:16,170
set property innerHTML of undefined, this simply is an error here however because I'm returning this

126
00:11:16,170 --> 00:11:22,320
root element in createRootElement, that's wrong, it's just root element, so that's simply an error I have

127
00:11:22,320 --> 00:11:27,330
in my code. We're creating root element here and we're storing it in a constant, I should return that

128
00:11:27,330 --> 00:11:34,010
constant, we're not storing it in any instance property here because we don't need to.

129
00:11:34,020 --> 00:11:40,560
So with that fixed, if we now reload this, now that works and it behaves in the same way as before but now we're

130
00:11:40,560 --> 00:11:43,770
taking advantage of this base class. Of course we're not there yet,

131
00:11:43,770 --> 00:11:48,570
I now also want to adjust the other classes so that they extend from component as well.