js模板引擎使用

⑴ Express 学习笔记纯干货（Routing、Middleware、托管静态文件、view engine 等等）

Express 是一个基于 Node.js 的轻量级、快速、开放的 Web 开发框架，旨在简化 Web 和移动应用的构建。它以路由和中间件为核心构建，提供了一系列强大的功能，帮助开发者快速构建健壮、友好的 API 和 Web 应用。

Express 不仅简化了 Node.js 的特性，而是通过扩展 Web 应用所需的必备功能，提供了一系列丰富的 HTTP 方法和灵活的中间件组合，让 API 和 Web 应用的构建变得简单且高效。

### 安装和 hello world 示例

在安装 Express 时，若使用 `--save` 参数，表示将模块添加到项目的 `package.json` 文件的 `dependencies` 部分，便于自动安装依赖。若只需临时安装，可省略 `--save`。在创建项目文件夹后，如果文件夹名称与依赖名相同（例如 `express`），会导致安装失败，应删除重复部分后重新安装。

下面的代码启动了一个监听 3000 端口的 Web 服务器，对所有 `/` URL 返回 "hello world"，其他路径返回 404 错误。`req` 和 `res` 对象遵循 Node.js 的标准，因此可以调用它们提供的方法，如管道操作。

### 路由（Routing）

路由定义了应用的端点以及对客户端请求的响应，通过路径和 HTTP 方法（如 GET、POST）组合而成。路由由特定的路径和方法组成，可以使用字符串、正则表达式或字符串模式。

路由句柄可以是一个函数、数组或两者混合，支持多个回调函数，其中 `next('route')` 可以跳过后续路由句柄。使用 `app.route()` 方法创建链式路由句柄，便于创建模块化的路由逻辑。

### 中间件（Middleware）

中间件是函数，用于访问请求对象、响应对象和中间件流程中的 `next` 函数。Express 中间件分为应用级、路由级和错误处理三种类型。错误处理中间件需使用 `err, req, res, next` 参数。

使用 `app.use()` 和 `router.use()` 加载中间件，应用级中间件绑定到 `app` 对象，路由级中间件绑定到 `express.Router()` 实例。

### 托管静态文件

利用 `express.static` 中间件托管静态文件，如图片、CSS 和 javaScript。通过传递静态资源目录作为参数，可访问所有文件，无需在 URL 中显示目录名。

通过多次调用 `express.static` 并指定不同的挂载路径，可以提供多个目录的静态资源访问。

### 模板引擎使用

安装模板引擎并编写模板文件。创建路由来渲染模板，模板文件将被转换为 HTML。若未设置视图引擎，需指定视图文件后缀。

### Express 4 迁移指南

Express 4 是对 Express 3 的重大重构，应用更新至 Express 4 后，之前的 Express 3 应用将无法运行。主要变化包括内核和中间件系统的改进、路由系统的优化以及一系列其他调整。

迁移过程包括卸载旧的 Express 3 应用生成器，安装新的版本。确保遵循官方文档中的步骤，以顺利过渡到 Express 4。

⑵ 5分钟上手Egg.js+nunjucks模板引擎快速开发SEO友好的官网项目

5分钟上手Egg.js+nunjucks模板引擎快速开发SEO友好的官网项目的关键在于以下几步：

1. 项目初始化：

   • 使用Egg.js框架初始化项目，这会生成基本的项目文件结构。
   • 在Egg.js的项目中，app目录是关键，包含如router.js用于定义路由，Controller处理业务逻辑，以及Service用于数据获取和处理。

2. 集成Nunjucks模板引擎：

   • 使用如eggviewnunjucks插件集成Nunjucks模板引擎，用于动态渲染页面内容。
   • 定义模板文件夹，并创建基础模板文件，包含head、content和script块，用于页面头部、主体和脚本内容的组织。

3. 模板渲染与数据嵌套：

   • 在模板文件中，通过嵌套数据实现页面的动态内容渲染。
   • 例如，通过if判断为不同导航选项添加不同类名，只需在每个页面中定义navActive变量并赋值。

4. 提升SEO友好度：

   • 使用服务器端渲染技术，由Egg.js和Nunjucks配合实现，有利于搜索引擎抓取页面内容，提升SEO友好度。
   • 确保页面内容在初次加载时即完全呈现，无需依赖JavaScript异步加载。

总结： 通过Egg.js框架和Nunjucks模板引擎的结合，开发者可以一站式搞定前后端开发，提高开发效率。 服务器端渲染技术有利于提升网站的SEO友好度，使网站更容易被搜索引擎收录和排名。

⑶ Handlebars在Coupang的应用与实践

Handlebars.js是JavaScript实现的简单易用模板引擎，基于Mustache模板语法，改进了如helper、nested path和literal等功能。Handlebars.java是Java版本的实现，兼容Handlebars.js公开API并扩展了一些功能，如block、partial、precompile、embedded和i18n等。

Handlebars.java在Coupang中的应用广泛，用于PC主站、移动浏览器和应用内嵌webview页面，以及后台管理系统等。在后端应用中，通过block和partial helper实现布局功能，定义可重写和默认值的区域。

在开发中，自定义helper如when、json、default和assign等，以支持复杂任务。使用这些自定义helper简化了模板，提高了代码模块化和可维护性。

前端Handlebars模板在Coupang实践中经历了不同阶段。阶段1使用RequireJS异步加载模板并动态编译，阶段2通过后端预编译模板减少前端编译过程，阶段3采用webpack及handlebars-loader将模板预编译并与js文件打包，阶段4实现前后端模板复用以减少维护成本。

开发前后端公用模板时，建议基于组件化方式，使用Handlebars.java和Handlebars.js共有的特性，尽量避免使用特有helper，提供缺失helper实现，并使用相同的数据模型。这种方式能实现前后端模板复用，减少维护工作量。

总之，Handlebars在Coupang中的应用与实践展示了其在前后端分离、模板复用和自定义helper等方面的灵活性和效率。选择合适的方案需根据具体场景进行权衡。