Table of Contents
Template engine" >Template engine
View rendering (view rendering)" >View rendering (view rendering)
View Lookup" >View Lookup
Home Web Front-end JS Tutorial Analysis of the template view mechanism of NodeJS framework Express

Analysis of the template view mechanism of NodeJS framework Express

Jun 30, 2018 am 10:15 AM
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 ".", 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 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>
Copy after login

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>
Copy after login

So we can use the following method:

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

Instead of the following method:

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

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

Otherwise, the extension must be specified:

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

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to use express to handle file upload in node project How to use express to handle file upload in node project Mar 28, 2023 pm 07:28 PM

How to handle file upload? The following article will introduce to you how to use express to handle file uploads in the node project. I hope it will be helpful to you!

In-depth comparison of Express and Laravel: How to choose the best framework? In-depth comparison of Express and Laravel: How to choose the best framework? Mar 09, 2024 pm 01:33 PM

In-depth comparison of Express and Laravel: How to choose the best framework? When choosing a back-end framework suitable for your project, Express and Laravel are undoubtedly two popular choices among developers. Express is a lightweight framework based on Node.js, while Laravel is a popular framework based on PHP. This article will provide an in-depth comparison of the advantages and disadvantages of these two frameworks and provide specific code examples to help developers choose the framework that best suits their needs. Performance and scalabilityExpr

Comparative analysis of Express and Laravel: Choose the framework that suits you better Comparative analysis of Express and Laravel: Choose the framework that suits you better Mar 10, 2024 pm 10:15 PM

Express and Laravel are two very popular web frameworks, representing the excellent frameworks of the two major development languages ​​of JavaScript and PHP respectively. This article will conduct a comparative analysis of these two frameworks to help developers choose a framework that is more suitable for their project needs. 1. Framework Introduction Express is a web application framework based on the Node.js platform. It provides a series of powerful functions and tools that enable developers to quickly build high-performance web applications. Express

Let's talk about how node+express operates cookies Let's talk about how node+express operates cookies Jun 22, 2022 am 10:01 AM

How does node+express operate cookies? The following article will introduce to you how to use node to operate cookies. I hope it will be helpful to you!

Express vs. Laravel: Comparing the advantages and disadvantages, which one will you choose? Express vs. Laravel: Comparing the advantages and disadvantages, which one will you choose? Mar 10, 2024 am 08:39 AM

Express vs. Laravel: Comparing the advantages and disadvantages, which one will you choose? In the field of web development, Express and Laravel are two frameworks that have attracted much attention. Express is a flexible and lightweight web application framework based on Node.js, while Laravel is an elegant and feature-rich web development framework based on PHP. This article will compare the advantages and disadvantages of Express and Laravel in terms of functionality, ease of use, scalability, and community support, and combine

How to build a full-stack JavaScript application using React and Express How to build a full-stack JavaScript application using React and Express Sep 26, 2023 pm 01:09 PM

How to use React and Express to build a full-stack JavaScript application Introduction: React and Express are currently very popular JavaScript frameworks. They are used to build front-end and back-end applications respectively. This article will introduce how to use React and Express to build a full-stack JavaScript application. We will explain step by step how to build a simple TodoList application and provide specific code examples. 1. Preparation before starting

How to build a simple blog system using Node.js How to build a simple blog system using Node.js Nov 08, 2023 pm 06:45 PM

How to use Node.js to build a simple blog system Node.js is a JavaScript runtime environment based on the ChromeV8 engine, which can make JavaScript run more efficiently. With the help of Node.js, we can build powerful server-side applications using JavaScript, including blogging systems. This article will introduce you to how to use Node.js to build a simple blog system and provide you with specific code examples. Press

Express or Laravel? Choose the backend framework that works best for you Express or Laravel? Choose the backend framework that works best for you Mar 10, 2024 pm 06:06 PM

When it comes to choosing a backend framework, both Express and Laravel are very popular choices. Express is a web application development framework based on Node.js, while Laravel is a web application development framework based on PHP. Both have their own advantages, and choosing the framework that best suits you requires considering many factors. The strengths of the Express framework are its flexibility and easy learning curve. The core idea of ​​Express is "small enough and flexible enough", and it provides a large number of middleware

See all articles