前端架构师-week6- ejs 和 glob 用法详解

ejs 和 glob 用法详解

ejs 用法

// 返回 compiled function，用于解析 html 中的 ejs 模版
let template = ejs.compile(str, options)  // 此步消耗性能
template(data)
// => 输出渲染后的 HTML 字符串

ejs.render(str, data, options)
// => 输出渲染后的 HTML 字符串

ejs.renderFile(filename, data, options, function(err, str) {
    // str => 输出渲染后的 HTML 字符串
})

ejs.renderFile(filename, data, options)  // 返回 Promise

标签含义

<%  '脚本'标签，用于流程控制，无输出。
<%_ %> 删除其前面的空格符
<%= 输出数据到模版（输出是转义 HTML 标签）
<%- 输出非转义的数据到模版
<%# 注释标签，不执行，不输出内容
<%% 输出字符串 '<%'，无需结束标签
%>  一般结束标签
-%> 删除紧随其后的换行符
<% _%> 将结束标签后面的空格符删除

包含

<%- include('header', {header: 'header'}); -%>
<h1>
    title
</h1>
<p>
    My page
</p>
<%- include('footer', { footer: 'footer' }) -%>

自定义分隔符

let ejs = require('ejs'),
    users = ['geddy', 'neil', 'alex']

// 单个模版文件
els.render('<?= users.join(" | "); ?>', {users: users},
    {delimiter: '?'})
// => 'geddy | neil | alex'

// 全局
ejs.delimiter = '$'
ejs.render('<$= users.join(" | ") $>, {users: users})
// => 'geddy | neil | alex'

 自定义文件加载器

let ejs = require('ejs')
let myFileLoader = function (filePath) {
  return 'myFileLoader: ' + fs.readFileSync(filePath)
}

ejs.fileLoader = myFileLoad

// fs.readFileSync(filePath) 返回 buffer，需要 toString()。

glob 用法

glob 简介

参考慕课手记：https://www.imooc.com/article/4053

        glob 最早是出现在类Unix系统的命令行中, 是用来匹配文件路径的。比如，lib/**/*.js 匹配 lib 目录下所有的 js 文件。

        除了在命令行中，我们在程序中也会有匹配文件路径的需求。于是，很多编程语言有了对 glob 的实现 ，如 Python 中的 glob 模块； php 中的 glob 方法。

        有了 glob，匹配文件路径变的 so easy~

glob 用法

参考 npm 仓库：https://www.npmjs.com/package/glob

匹配规则

不同语言的 glob 库支持的规则会略有不同。下面是 node-glob 的匹配规则。

• * 匹配任意 0 或多个任意字符
• ? 匹配任意一个字符
• [...] 若字符在中括号中，则匹配。若以 ! 或 ^ 开头，若字符不在中括号中，则匹配
• !(pattern|pattern|pattern) 不满足括号中的所有模式则匹配
• ?(pattern|pattern|pattern) 满足 0 或 1 括号中的模式则匹配
• +(pattern|pattern|pattern) 满足 1 或 更多括号中的模式则匹配
• *(a|b|c) 满足 0 或 更多括号中的模式则匹配
• @(pattern|pat*|pat?erN) 满足 1 个括号中的模式则匹配
• ** 跨路径匹配任意字符

const glob = require('glob')

glob('**/*.js', {
    ignore: ['node_modules/**', 'webpack.config.js']
}, function(err, file) {
    console.log(err, file)
})

// 遍历命令执行目录的文件
// 比递归调用 fs.readFileSync 加排除法，效率高

 

ejs 模版引擎的三种基本用法

ejs 模版不同标签用法详解

ejs 模版几种特殊用法

glob 用法小结