Now that we have a handle on what constructor functions are and
how they're created, let's dive in to underscore source code.
Keep in mind the things we've been discussing so
far about template delimiters.
Don't get bogged down in the nitty gritty details of the function, but
focus on what is happening to the template string that's passed in.
Let's do this.
I've got the developer tools open to the source tab and
I’ve open the projects at file.
When this line is run, remember that it converts the template to a string and
passes it to underscores template function.
This function is defined in underscore on line 1415.
As a tip, you can press control g and type in the line number.
Now, let's set a break point on this first line.
Refreshing the page with command or
control r will pause execution right as it's starting to build up the template.
We can see that we got to this line from f j.s by checking the call stack.
Remember that the text variable holds the contents of the html template.
Chrome will show us what a variable holds if we now mouse over the variable.
If you're feeling adventurous, how about you pause the video, and
see if you can step through the code yourself.
If you get stumped, or even if you make it all the way through to the end,
come back, and we can go through it together.
These lines here determine what delimiters to look for in the template.
If you want to override the default delimiters,
you can pass them in as part of the settings argument.
This matcher variable is the set of delimiters.
Since we didn't override them, they're the ones we looked at already.
Matcher is a regular expression.
Regular expressions are out of the scope of this course, but
it would be helpful to know the basics.
You'll find some resources on regular expressions in the instructor notes.
These buttons over here let us step through the code.
And I'll use them as we move through everything.
This line starts the new source string.
The rest of the function will add to this string.
This is what will become the body of the constructor function.
These lines here take the text and
replaces it with the contents of the matched delimiter.
Let's step through one loop to see how it works.
Replace user's maitre which if you remember is a regular expression.
To search for a starting and ending delimiter pair.
The first one it found is stored in match.
The delimiters that were found in this match were the interpolate ones.
Looking at the current scope,
the match's content is stored in the interpolate variable.
If the contents were stored in the escape variable,
then that variable would get saved to a T variable.
Which gets wrapped in underscore's escape function and
is added to the source string.
If the contents were stored in the escape variable
then that variable will get saved to a T variable which gets wrapped in
underscore's escape function and is added to the source string.
If the contents were stored in Interpolate,
then it gets directly added to the source string.
If the contents are stored in evaluate,
then it gets directly added to the source string.
Interpolate and evaluate are similar, but
interpolate will insert the contents.
While evaluate will actually run the code.
The replace function loops through the entire text string until it finds
all the delimiters and adds their contents to the source string.
The next few lines add a little bit more to the front of the source string.
We've been using the t and p variables already.
This is where they are created.
All of the hard work of building up the source string is finally about
to pay off.
A new function is created with the source string as the last argument.
Remember that the last argument to a constructor function becomes the body of
that function.
This new function is stored in render.
Now this render function, and this template function are very important.
Template will be called at some later point with data.
When template is called it calls render and passes along the data it receives.
Believe it or not, that's the end.
Underscore adds a source property to the function, which we used earlier, and
then it returns the template function.