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 "
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('/', function(req, res){ res.render('index.jade', { title: 'CSSer, 关注Web前端技术!' }); }); </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('view engine', 'jade'); </SPAN>
So we can use the following method:
<SPAN style="FONT-SIZE: 13px">res.render('index'); </SPAN>
Instead of the following method:
<SPAN style="FONT-SIZE: 13px">res.render('index.jade'); </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('another-page.ejs'); </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('view options', { layout: false }); </SPAN>
If necessary, these settings can be used later. Overridden in the res.render() call:
<SPAN style="FONT-SIZE: 13px">res.render('csser-view.ejs', { 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('page', { layout: 'mylayout' }); </SPAN>
Otherwise, the extension must be specified:
<SPAN style="FONT-SIZE: 13px">res.render('page', { layout: 'mylayout.jade' }); </SPAN>
These paths can also be absolute paths:
<SPAN style="FONT-SIZE: 13px">res.render('page', { layout: __dirname + '///www.jb51.net/mylayout.jade' }); </SPAN>
A better example of this is the opening and closing tags of custom ejs templates:
<SPAN style="FONT-SIZE: 13px">app.set('view options', { open: '{{', close: '}}' }); </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('comment', { 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('comment', 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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

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? 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

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

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? 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 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 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

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
