Analysis of the template view mechanism of NodeJS framework Express

This article mainly introduces the analysis of the template view mechanism of the NodeJS framework Express. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

Everyone knows the MVC model. In addition to enhancing the efficiency of team collaboration, it can also facilitate product maintenance and upgrades. In this article, we will introduce the template and view (V) related functions of the Express framework.

Template engine

Express supports many template engines, the commonly used ones are:

• haml implementationHaml

• haml.js successor, and also the default template engine of ExpressJade

• Embedded JavaScript templateEJS

• CoffeeScript-based template engineCoffeeKup

• NodeJS versionjQuery template engine

View rendering (view rendering)

The file name of the view needs to follow by default In the form of "8a11bc632ea32a57b3e3693c7987c420.4ac516df2bd3b3f39951bf63aa54a6de", where 4ac516df2bd3b3f39951bf63aa54a6de is the name of the module to be loaded. For example, the view layout.ejs tells the view system to require('ejs'). The loaded module must output the exports.compile(str, options) method and return a function to comply with Express's template interface convention. We can also use app.register() to map the template engine to other file extensions to achieve more flexible template engine behavior, so that "csser.html" can be rendered by the ejs engine.

Next we will use the Jade engine to render index.html, because we have not set layout:false, the content after index.jade renders will be passed into layout.jade as a body local variable .

<SPAN style="FONT-SIZE: 13px">app.get(&#39;/&#39;, function(req, res){ 
res.render(&#39;index.jade&#39;, { title: &#39;CSSer, 关注Web前端技术！&#39; }); 
}); 
</SPAN>

The new "view engine" setting can specify the default template engine. If we want to use jade, we can set it like this:

<SPAN style="FONT-SIZE: 13px">app.set(&#39;view engine&#39;, &#39;jade&#39;); 
</SPAN>

So we can use the following method:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;index&#39;); 
</SPAN>

Instead of the following method:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;index.jade&#39;); 
</SPAN>

When the "view engine" is set, the template extension becomes optional, and we can also mix and match multiple template engines:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;another-page.ejs&#39;); 
</SPAN>

Express also provides view option settings. These settings will be applied after each view is rendered. For example, if you do not often use layouts, you can set them like this:

<SPAN style="FONT-SIZE: 13px">app.set(&#39;view options&#39;, { 
layout: false 
}); 
</SPAN>

If necessary, these settings can be used later. Overridden in the res.render() call:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;csser-view.ejs&#39;, { layout: true }); 
</SPAN>

You can use your own layout to replace the system default by specifying a path. For example, if we set "view engine" to jade and customize it A layout named "./views/mylayout.jade" is created. We can use it like this:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;page&#39;, { layout: &#39;mylayout&#39; }); 
</SPAN>

Otherwise, the extension must be specified:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;page&#39;, { layout: &#39;mylayout.jade&#39; }); 
</SPAN>

These paths can also be absolute paths:

<SPAN style="FONT-SIZE: 13px">res.render(&#39;page&#39;, { layout: __dirname + &#39;///www.jb51.net/mylayout.jade&#39; }); 
</SPAN>

A better example of this is the opening and closing tags of custom ejs templates:

<SPAN style="FONT-SIZE: 13px">app.set(&#39;view options&#39;, { 
open: &#39;{{&#39;, 
close: &#39;}}&#39; 
}); 
</SPAN>

Partial views (View Partials)
The Express view system natively supports partial and collection views , which is called a miniature view and is mainly used to render a document fragment. For example, instead of displaying comments in a loop in the view, it is better to use a partial collection:

<SPAN style="FONT-SIZE: 13px">partial(&#39;comment&#39;, { collection: comments }); 
</SPAN>

If no other options or local variables are needed, we can omit the object and simply pass in the comments array, which is the same as above The example is the same:

<SPAN style="FONT-SIZE: 13px">partial(&#39;comment&#39;, comments); 
</SPAN>

When using local collections, some "magic" local variables are supported:

• firstInCollection This value is true when it is the first object

• indexInCollection The index value of the object in the collection

• lastInCollection is true when it is the last object

• collectionLength The length of the collection

Local variables passed (or generated) take precedence, however locals passed to the parent view are available in the child view as well. So for example if we were to render a blog post with partial('blog/ post', post) it would generate the post local, but the view calling this function had the local user, it would be available to the blog/post view as well.

Incoming (or generated) local variables take precedence, but local variables passed into the parent view are still valid in the subview. Therefore, if we use partial('blog/post', post) to render the blog log, the local variable of post will be generated, but the view that calls this function has a local user, and it is still valid in the blog/post view. (First note: There is something wrong with this translation, please give me some advice).

Performance tip: When using a partial collection to render a 100-length array, it means that the view needs to be rendered 100 times. For simple collections, you can inline the loop instead of using a partial collection, which can reduce system overhead.

View Lookup

View lookup is performed relative to the parent view. For example, we have a view called "views/user /list.jade" page view, if partial('edit') is called in this view, the view system will try to find and load "views/user/edit.jade", and partial('.. /messages') "views/messages.jade" will be loaded.

The view system also supports index templates, so you can use a directory with the same name. For example, in a route we execute res.render('users'), which will point to "views/users.jade" or "views/users/index.jade".

When using the above index view, we can reference "views/users/index.jade" from the directory with the same name through partial('users'), and the view system will try " ../users/index", which reduces our need to call partial('index').

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to the path processing module path in Node.js

Before and after the implementation of SpringBoot and Vue.js End-detached file upload function

The above is the detailed content of Analysis of the template view mechanism of NodeJS framework Express. For more information, please follow other related articles on the PHP Chinese website!