Analysis of template view mechanism of NodeJS framework Express_javascript skills

Template Engine

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

• haml implementationHaml
• The successor of haml.js and the default template engine of ExpressJade
• Embed JavaScript templateEJS
• CoffeeScript-based template engineCoffeeKup NodeJS version of
• jQuery template engine

View rendering

The file name of the view must follow the form of "." by default, where 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 rendered by index.jade will be passed into layout.jade as a body local variable.

Copy code The code is as follows:

app.get('/', function(req, res){
res.render('index.jade', { title: 'CSSer, pay attention to Web front-end technology!' });
}) ;

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

Copy code The code is as follows:

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

So we can use the following method:

Copy code The code is as follows:

res.render('index');

instead of:

Copy the code The code is as follows:

res.render('index.jade');

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

Copy the code The code is as follows:

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

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

Copy code The code is as follows:

app.set('view options', {
layout: false
});

These settings can be overridden in subsequent res.render() calls if desired:

Copy the code 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 the "view engine" to jade and customize a layout named "./views/mylayout.jade" layout, we can use it like this:

Copy code The code is as follows:

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

Otherwise the extension must be specified:

Copy code The code is as follows:

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

These paths can also be absolute:

Copy code The code is as follows:

res.render('page', { layout: __dirname '/http://www.jb51.net/mylayout.jade' });

A better example of this is the beginning of a custom ejs template and closing tags:

Copy code The code is as follows:

app.set('view options', {
open: '{{',
close: '}}'
});

View Partials
The Express view system natively supports partial and collection views, which are called mini views and are mainly used to render a document fragment. For example, instead of looping through comments in the view, use a partial collection:

Copy the code The code is as follows:

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

If not required For other options or local variables, we can omit the object and simply pass in the comments array, which is the same as the above example:

Copy code The code is as follows:

partial('comment', comments);

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.

Local variables passed in (or generated) 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 rendering the view 100 times. For simple collections, you can inline the loop instead of using a partial collection, which can reduce system overhead.

View Lookup

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

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').