1 00:00:00,490 --> 00:00:05,490 Hey guys in this video we're going to work on the observer pattern which allows us to subscribe and 2 00:00:05,520 --> 00:00:08,940 unsubscribe to certain events or certain functionality. 3 00:00:09,030 --> 00:00:11,490 So it gives us a really nice subscription model. 4 00:00:11,580 --> 00:00:14,390 And I think this is one of the more interesting patterns. 5 00:00:14,460 --> 00:00:18,680 It can be used to notify the dorm of certain elements to be updated. 6 00:00:18,740 --> 00:00:24,840 It actually angular JSC relies heavily on this pattern through event management within the scope. 7 00:00:24,840 --> 00:00:31,470 What I want to do here is first give you an example using prototypes and then give you an example using 8 00:00:31,640 --> 00:00:32,980 six classes. 9 00:00:33,120 --> 00:00:38,610 So we're going to create some buttons that will allow us to subscribe and unsubscribe to certain click 10 00:00:38,610 --> 00:00:39,560 events. 11 00:00:39,570 --> 00:00:44,670 So first thing we'll do is create a little UI here we're just going to add a couple of buttons. 12 00:00:44,770 --> 00:00:48,420 We're not going to use skeleton or anything it's just going to be a couple of buttons so I don't want 13 00:00:48,420 --> 00:00:54,600 to add any framework or anything like that so it's create a button and we're going to give this button 14 00:00:54,600 --> 00:01:02,160 a class of sub dash s because what these are going to do is they're going to subscribe allow us to subscribe 15 00:01:02,160 --> 00:01:09,370 and unsubscribe to a click event to get seconds to console log the current seconds and using the date 16 00:01:09,870 --> 00:01:10,890 the date method. 17 00:01:11,100 --> 00:01:17,760 And then we'll also create buttons to subscribe and unsubscribe to getting milliseconds actually will 18 00:01:17,760 --> 00:01:19,010 do the milliseconds first. 19 00:01:19,020 --> 00:01:21,300 So this will be sub m s. 20 00:01:21,490 --> 00:01:24,120 We're going to say subscribe to 21 00:01:26,850 --> 00:01:32,380 milliseconds and then I'm just going to go ahead and copy that line. 22 00:01:32,730 --> 00:01:35,930 And this one will be have a class of sub apps. 23 00:01:36,050 --> 00:01:37,110 I'm sorry. 24 00:01:37,380 --> 00:01:43,020 Not solve as it will be unsub am ass and then we'll say unsubscribe 25 00:01:45,570 --> 00:01:50,390 from milliseconds and then we're going to have one more button. 26 00:01:50,390 --> 00:01:52,350 I was going to put a couple of line breaks 27 00:01:56,370 --> 00:01:58,260 and I'll put one more button here. 28 00:01:58,400 --> 00:01:59,390 It's not right. 29 00:02:01,860 --> 00:02:04,570 And then this is going to be to actually fire the event. 30 00:02:04,580 --> 00:02:06,970 So it's a fire. 31 00:02:07,260 --> 00:02:09,940 And we'll change the class to fire. 32 00:02:10,430 --> 00:02:10,770 OK. 33 00:02:10,770 --> 00:02:14,570 So very simple UI very ugly UI but that's alright. 34 00:02:14,940 --> 00:02:25,930 And now what we want to do here is create a constructor function called event observer. 35 00:02:26,110 --> 00:02:26,400 All right. 36 00:02:26,410 --> 00:02:34,630 So this constructive function will have one property called observers which represents the functions 37 00:02:34,720 --> 00:02:36,130 that will be passed into it. 38 00:02:36,130 --> 00:02:44,830 It'll be an array and underneath that we're going to create a prototype so let's say event observer 39 00:02:45,010 --> 00:02:52,960 Daut prototype will set that to an object and then we'll put in subscribe. 40 00:02:52,960 --> 00:02:59,260 So we're doing this instead of doing like dots you know prototype dots or scribe we're just putting 41 00:02:59,260 --> 00:03:01,630 it all into an object like this. 42 00:03:01,630 --> 00:03:08,410 And each one will be a function and it's going to actually take in a function so I'm going to put in 43 00:03:08,410 --> 00:03:09,000 here. 44 00:03:09,130 --> 00:03:15,760 And OK so we want to be able to subscribe to to this function and then we want to push it on to our 45 00:03:15,760 --> 00:03:27,080 observers so this dot observers dot push can spell and we want to pass in that function. 46 00:03:27,100 --> 00:03:34,630 And then I just want to do a console dot log just to notify the user that they're actually subscribed 47 00:03:34,630 --> 00:03:36,810 to that that handler. 48 00:03:37,060 --> 00:03:44,170 OK so let's say you are now subscribed to. 49 00:03:44,770 --> 00:03:50,080 Now we can't just put FM because that will print out the entire function we want just the name so we're 50 00:03:50,080 --> 00:03:51,940 going to use dot name. 51 00:03:51,940 --> 00:03:55,000 I don't know if we've used that yet function name. 52 00:03:55,240 --> 00:03:59,560 So that's the subscriber's put a comma here and let's do the unsubscribe 53 00:04:05,410 --> 00:04:10,350 OK so that will be a function and that will take in a function 54 00:04:14,010 --> 00:04:22,740 so the unsubscribe are going to say this start observers and we want to set this equal to this start 55 00:04:24,030 --> 00:04:34,540 observer's dot filter all rights are basically mutating this we're going to say filter pass and a callback 56 00:04:34,550 --> 00:04:47,460 function and we just want to in here do an if statement so we're going to say if he actually there's 57 00:04:47,630 --> 00:04:56,240 this callback is going to take in or say item and we'll say if item representing the function being 58 00:04:56,240 --> 00:05:05,750 passed in if the item is not equal to the function that's being passed in here then we want to return 59 00:05:06,230 --> 00:05:09,560 the item. 60 00:05:10,060 --> 00:05:10,410 All right. 61 00:05:10,420 --> 00:05:17,200 And just in case this is not clear I just want to paste in this comment here that may help you out. 62 00:05:17,260 --> 00:05:20,200 So this is filtering out from the list. 63 00:05:20,200 --> 00:05:26,650 Whatever matches the callback function if there is no match the callback gets to stay in the list and 64 00:05:26,650 --> 00:05:31,120 the filter returns a new list and reassigned the list of observers. 65 00:05:31,120 --> 00:05:37,690 OK so if it's if you're unsubscribing from a certain function that one will be removed but it'll generate 66 00:05:37,720 --> 00:05:44,800 a new list that has the rest of the functions that are subscribed to and that may be hard to understand 67 00:05:44,800 --> 00:05:48,450 but ules it'll be clearer when you actually see it work. 68 00:05:48,820 --> 00:05:54,610 So after this let's go ahead and just do a console log just like we did above. 69 00:05:54,610 --> 00:06:11,840 We're just going to say you are now Unz subscribed subscribed from the function Daut name. 70 00:06:11,880 --> 00:06:12,630 All right. 71 00:06:12,940 --> 00:06:14,050 So that's that. 72 00:06:14,050 --> 00:06:19,750 Now the last method we're going to have in here is the actual fire. 73 00:06:19,750 --> 00:06:22,570 So we're going to say fire function 74 00:06:24,820 --> 00:06:28,030 and fire isn't going to take in any parameters. 75 00:06:28,040 --> 00:06:41,800 All we want to do here is loop through the observers so observers dot for each want to do that observers 76 00:06:41,800 --> 00:06:52,810 dart for each passing function and let's call this item and then we just want to call whatever the function 77 00:06:52,810 --> 00:06:57,420 is and we can do that with the call method and that's it. 78 00:06:57,800 --> 00:06:59,910 OK so that's our event observer. 79 00:06:59,920 --> 00:07:01,350 We can now use it. 80 00:07:01,360 --> 00:07:08,080 So let's go down below it and let's instantiate it we'll call we'll create a variable called click and 81 00:07:08,080 --> 00:07:20,710 we'll set it to our new event observer our new shiny event observer and we're going to create our event 82 00:07:20,730 --> 00:07:24,550 listeners. 83 00:07:24,740 --> 00:07:32,390 So remember we have a couple of buttons here we have the sub Messen IDN sub mass and then the fire button. 84 00:07:32,660 --> 00:07:46,740 So let's say document Daut to query selector actually and we have our sub dash mass. 85 00:07:46,830 --> 00:07:57,460 We're going to have event listener to that go ahead and pass the function. 86 00:07:57,720 --> 00:08:06,450 And inside here what we want to do actually we need to pass in that type of event which is a click. 87 00:08:06,450 --> 00:08:06,780 All right. 88 00:08:06,780 --> 00:08:13,230 So when we click it's going to run this function and we want to take that click object right here and 89 00:08:13,230 --> 00:08:16,440 we want to call this subscriber method. 90 00:08:16,530 --> 00:08:20,200 So we're going to say click SUBSCRIBE. 91 00:08:20,790 --> 00:08:26,340 And that takes in a function to subscribe to this right here this Fehn. 92 00:08:26,490 --> 00:08:28,760 So we don't have that created yet. 93 00:08:28,760 --> 00:08:33,660 So let's go ahead and create that down here. 94 00:08:34,530 --> 00:08:37,420 So that will be a click handler. 95 00:08:38,220 --> 00:08:47,520 So let's say conc we're going to call it get curve for current milliseconds and let's set that equal 96 00:08:47,520 --> 00:08:51,390 to a function's going to be very simple. 97 00:08:51,810 --> 00:09:04,550 All we're going to do is console dog log and we'll say current milliseconds. 98 00:09:04,550 --> 00:09:10,330 This is going to be some javascript so we get a rapid in the syntax and we're going to see new date 99 00:09:11,170 --> 00:09:13,410 and then we're going to say Daut to 100 00:09:16,210 --> 00:09:21,270 milliseconds actually put your parentheses on the end of that as well. 101 00:09:21,670 --> 00:09:21,970 All right. 102 00:09:21,970 --> 00:09:26,530 So new date to milliseconds that's the function we want to subscribe to. 103 00:09:26,530 --> 00:09:32,760 So let's pass in here get curr milliseconds so that'll subscribe. 104 00:09:32,770 --> 00:09:36,840 Now we also want the unsubscribe listener. 105 00:09:37,000 --> 00:09:46,600 So remember we have a button with unsub m s and then that's going to call click on unsubscribe and we're 106 00:09:46,600 --> 00:09:48,800 going to pass in that same function. 107 00:09:49,140 --> 00:09:49,470 OK. 108 00:09:49,470 --> 00:09:52,180 And the last one we want here is for the fire button 109 00:09:55,290 --> 00:10:00,360 and that's going to call click fire which doesn't take any parameters. 110 00:10:01,210 --> 00:10:03,240 And that's going to actually fire off. 111 00:10:03,250 --> 00:10:04,990 That's going to call the function. 112 00:10:05,090 --> 00:10:08,660 Ok that's what this call is going to do it's going to actually call us. 113 00:10:08,740 --> 00:10:10,200 So let's go ahead and save. 114 00:10:10,210 --> 00:10:11,930 Hopefully this works. 115 00:10:12,070 --> 00:10:13,010 Let's click fire. 116 00:10:13,030 --> 00:10:14,260 Nothing happens that's. 117 00:10:14,290 --> 00:10:20,080 That's good because we haven't subscribed to the get caught milliseconds. 118 00:10:20,080 --> 00:10:21,910 Let's go ahead and subscribe to it. 119 00:10:23,400 --> 00:10:25,630 See I missed something up here 120 00:10:28,500 --> 00:10:32,910 milliseconds new date Daut 121 00:10:35,430 --> 00:10:37,260 to milliseconds. 122 00:10:37,380 --> 00:10:38,520 Can I not put that in 123 00:10:41,920 --> 00:10:42,290 0 8. 124 00:10:42,290 --> 00:10:43,560 No I messed it up up here 125 00:10:46,950 --> 00:10:49,110 thought name needs to go here 126 00:10:52,200 --> 00:10:53,190 or let's try that again. 127 00:10:53,190 --> 00:10:58,680 So we're not subscribed it's going click Subscribe and now you'll see you are now subscribed to get 128 00:10:58,680 --> 00:11:02,370 car milliseconds so that's what this effin name is giving us. 129 00:11:02,370 --> 00:11:10,780 So now if we click fire we get another error intermediate value to milliseconds is not a function that's 130 00:11:11,140 --> 00:11:14,120 43. 131 00:11:14,760 --> 00:11:18,750 I knew something was wrong here it's getting milliseconds. 132 00:11:19,440 --> 00:11:22,110 All right so again we'll subscribe or click fire. 133 00:11:22,230 --> 00:11:28,140 And now it gets the current milliseconds I keep clicking you'll see I'll keep getting them. 134 00:11:28,650 --> 00:11:35,640 All right now if I unsubscribe you'll see now I'm unsubscribed and if I click fire nothing happens. 135 00:11:36,030 --> 00:11:40,260 If I click subscribe again and I click fire it's back. 136 00:11:40,740 --> 00:11:46,350 So that's what the observer pattern allows us to do when all those is a very simple kind of useless 137 00:11:46,350 --> 00:11:51,960 example you can think up in your head the kinds of things you can do with it. 138 00:11:51,990 --> 00:11:55,720 Now we can do this with multiple functions obviously. 139 00:11:55,740 --> 00:11:59,150 So what I'm going to do is create a couple more buttons. 140 00:11:59,160 --> 00:12:07,840 I'm going to copy these three lines and let's change this to sub S and unsub s and will say subscribe 141 00:12:07,840 --> 00:12:15,260 to seconds and then unsubscribe from seconds. 142 00:12:15,300 --> 00:12:15,690 All right. 143 00:12:15,690 --> 00:12:26,910 And then world do is go back here and create a new click handler called Get car seconds and then we're 144 00:12:26,910 --> 00:12:35,360 going to say current seconds and then change this to instead of get milliseconds get seconds. 145 00:12:35,730 --> 00:12:42,230 OK and then we're going to create two more event listeners for those two new buttons. 146 00:12:43,650 --> 00:12:54,450 And this time we're going to do sub ass and that's going to subscribe to get curse seconds and then 147 00:12:54,520 --> 00:13:01,500 unsub s will unsubscribe from the get curse seconds. 148 00:13:01,500 --> 00:13:06,390 So now we save this over here if I click fire nothing happens. 149 00:13:06,480 --> 00:13:13,360 Subscribed to milliseconds I click fire we get milliseconds subscribed just seconds and click fire. 150 00:13:13,410 --> 00:13:16,990 We get both the milliseconds and the seconds. 151 00:13:17,070 --> 00:13:23,160 All right you can see I can I'm getting both because I'm subscribed to both if I unsubscribed from milliseconds 152 00:13:23,220 --> 00:13:24,070 and click fire. 153 00:13:24,090 --> 00:13:29,070 Now I'm only getting seconds if I unsubscribe from seconds now I get nothing. 154 00:13:29,100 --> 00:13:31,220 I'm not subscribed to anything. 155 00:13:31,230 --> 00:13:33,710 All right so it's pretty powerful. 156 00:13:34,050 --> 00:13:43,050 Now real quick I just want to create another file here and we'll call this E-6 thought Jay ass doesn't 157 00:13:43,050 --> 00:13:44,990 really matter what you call it. 158 00:13:45,100 --> 00:13:53,580 And then we're just going to copy everything and just a refresher how to turn S-5 base object oriented 159 00:13:53,580 --> 00:13:56,480 programming into six classes. 160 00:13:56,640 --> 00:13:58,680 We can turn this into a class 161 00:14:01,390 --> 00:14:04,690 event observer and we would need to have a constructor 162 00:14:09,090 --> 00:14:17,640 and we're going to set this property inside the constructor and then we want these functions to be methods 163 00:14:17,640 --> 00:14:19,230 of the class. 164 00:14:19,740 --> 00:14:21,990 So we'll have subscribe 165 00:14:25,740 --> 00:14:31,950 which will have this syntax it will take in the function and then we'll just take the body of the function 166 00:14:31,950 --> 00:14:33,850 here. 167 00:14:34,320 --> 00:14:36,890 Put that in there. 168 00:14:37,350 --> 00:14:39,260 All right then we'll have unsubscribe 169 00:14:48,710 --> 00:14:51,070 and then we'll take this here 170 00:14:55,400 --> 00:15:00,280 throw that in and then we'll have our fire 171 00:15:03,970 --> 00:15:05,440 which is this right here 172 00:15:08,170 --> 00:15:15,560 and then we can get rid of this all the prototype stuff OK and it should work the exact same way we 173 00:15:15,560 --> 00:15:20,900 still instantiated with the new key word and we should be able to do everything else so let's save this 174 00:15:21,230 --> 00:15:27,880 and then let's go to index each team on changes to app ESX start Jap's Let's go ahead and click fire. 175 00:15:27,880 --> 00:15:28,820 Nothing happens. 176 00:15:28,820 --> 00:15:30,060 Milliseconds. 177 00:15:30,080 --> 00:15:31,520 Fire works. 178 00:15:31,640 --> 00:15:33,420 Subscribed to seconds. 179 00:15:33,650 --> 00:15:37,180 OK we're getting both unsubscribed from milliseconds. 180 00:15:37,190 --> 00:15:41,500 We're just getting seconds unsubscribe from seconds and we're getting nothing. 181 00:15:41,630 --> 00:15:45,020 So that works the same way it's just using classes instead. 182 00:15:45,020 --> 00:15:47,950 So I mean it's up to you what what you want to use. 183 00:15:47,990 --> 00:15:56,210 But again this is syntactic sugar it's it's just a convenient syntax for for this here. 184 00:15:56,210 --> 00:15:58,550 All right guys so that's it for the Observer pattern. 185 00:15:58,550 --> 00:16:01,420 Thank you for watching and we'll see you in the next video.