NodeJS framework Express template view Mechanism Analysis _ javascript skills

The MVC pattern can be described by no one. It not only enhances the efficiency of team collaboration, but also facilitates product maintenance and upgrade. In this article, we will introduce the template and view (V) Functions of the Express framework. Template engine

Express supports many template engines, commonly used:

• Haml implementationHaml
• Haml. js is the successor and is also the default template engine of Express.Jade
• Embedded JavaScript TemplateEJS
• CoffeeScript-based template engineCoffeeKup
• NodeJS versionJQuery template engine

View randering)

By default, the file name of a view must follow" . "Format, here Is the name of the module to be loaded. For example, view layout. ejs is telling the view system to request ('ejs'). The loaded module must output exports. compile (str, options) method, and return a function to comply with the template interface conventions of Express. Rendering can be rendered by the ejs engine.

Next we will use the jadeengine to compile index.html, because layout: false is not set, and the content after index. jade is passed into layout. jade as a local body variable.

The Code is as follows:

App. get ('/', function (req, res ){
Res. render ('index. jade ', {title: 'csser, follow the Web Front-end technology! '});
});

The new "view engine" setting can specify the default template engine. If you want to use jade, you can set it as follows:

The Code is as follows:

App. set ('view engine ', 'jade ');

So we can use the following method:

The Code is as follows:

Res. render ('index ');

Instead:

The Code is as follows:

Res. render ('index. jade ');

After "view engine" is set, the extension of the template becomes optional, and we can also mix and match Multiple Template engines:

The Code is as follows:

Res. render ('another-page. ejs ');

Express also provides view option settings, which will be applied after each view rendering. For example, if you do not often use layouts, you can set it like this:

The Code is as follows:

App. set ('view options ',{
Layout: false
});

If necessary, these settings can be overwritten in subsequent res. render () calls:

The Code is as follows:

Res. render ('csser-view. ejs', {layout: true });

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 a path named ". /views/mylayout. jade "layout, we can use it like this:

The Code is as follows:

Res. render ('page', {layout: 'mylayout '});

Otherwise, you must specify the extension:

The Code is as follows:

Res. render ('page', {layout: 'mylayout. jade '});

These paths can also be absolute paths:

The Code is as follows:

Res. render ('page', {layout: _ dirname + '/http://www.jb51.net/mylayout.jade '});

A good example is the starting and closing tag of the custom ejs template:

The Code is as follows:

App. set ('view options ',{
Open :'{{',
Close :'}}'
});

View Partials)
The Express view system supports local and set views, which are called micro views and are mainly used to render a document clip. For example, instead of displaying comments cyclically in the view, use a partial collection ):

The Code is as follows:

Partial ('comment', {collection: comments });

If other options or local variables are not required, we can omit the object and simply input the comment array, which is the same as the above example:

The Code is as follows:

Partial ('comment', comments );

When using a local set, some "magic" local variables are supported:

• The value of firstInCollection is true when it is the first object.
• Index value of objects in the indexInCollection collection
• LastInCollection is true when it is the last object
• Length of the collectionLength set

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 wocould generate the post local, but the view calling this function had the local user, it wocould be available to the blog/post view as well.

The local variables passed in (or generated) take precedence over those passed in. However, the local variables passed in to the parent view are still valid in the Child view. Therefore, if we use partial ('blog/Post', post) to render blog logs, the local variable of post will be generated, but the view that calls this function has local users, it is still valid in the blog/post view. (A renote: This translation may feel a problem. Please kindly advise ).

Performance tips: when you use a partial set to render an array with a length of 100, you need to render the view for 100 times. For a simple set, you can inline the loop instead of using a partial set, this reduces system overhead.

View Lookup)

View search is relative to the parent view. For example, we have a name named "views/user/list. if you call partial ('edit') in the page view of jade, the view system will try to find and load "views/user/edit. jade ", and partial ('.. /messages ') will load "views/messages. jade ".

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

When using the index view above, we can use partial ('users') to reference "views/users/index. and the view system will try ".. /users/index ", which can reduce the need to call partial ('index.