.2-浅析express源码之applicaiton模块-app.render

Posted 2020-10-31 QH-Jimmy

　　这个模块还漏了一个稍微复杂点的API，就是app.render，首先看官网的定义：

　　app.render(view, [locals], callback)

　　view为对应的文件名，locals为一个配置对象，callback为解析完成的回调函数。

　　涉及到的全局属性有

view：默认为一个内置模块，负责解析文件路径与获取对应文件后缀的parser

views：默认为process() + ‘/views‘，一个字符串或数组，搜索对应文件路径时的目录

view engine：默认解析引擎，需要自定义

　　另外，locals配置对象既可以提供render相关的设置，也可以提供渲染模板所需要的参数。

 

app.render

　　首先看一眼render主函数：

app.render = function render(name, options, callback) {
    // 获取本地配置
    var cache = this.cache;
    var done = callback;
    var engines = this.engines;
    var opts = options;
    var renderOptions = {};
    var view;

    // 参数修正
    if (typeof options === ‘function‘) {
        done = options;
        opts = {};
    }

    // 参数合并
    merge(renderOptions, this.locals);
    if (opts._locals) {
        merge(renderOptions, opts._locals);
    }
    merge(renderOptions, opts);

    // 设置缓存
    if (renderOptions.cache == null) {
        renderOptions.cache = this.enabled(‘view cache‘);
    }

    // 尝试获取缓存
    if (renderOptions.cache) {
        view = cache[name];
    }

    // 尝试获取文件绝对路径
    if (!view) {
        var View = this.get(‘view‘);

        view = new View(name, {
            defaultEngine: this.get(‘view engine‘),
            root: this.get(‘views‘),
            engines: engines
        });

        if (!view.path) {
            var dirs = Array.isArray(view.root) && view.root.length > 1 ?
                ‘directories "‘ + view.root.slice(0, -1).join(‘", "‘) + ‘" or "‘ + view.root[view.root.length - 1] + ‘"‘ :
                ‘directory "‘ + view.root + ‘"‘
            var err = new Error(‘Failed to lookup view "‘ + name + ‘" in views ‘ + dirs);
            err.view = view;
            return done(err);
        }

        // 设置缓存
        if (renderOptions.cache) {
            cache[name] = view;
        }
    }

    // 渲染
    tryRender(view, renderOptions, done);
};

　　结构直接清晰，稍微说一下。

1、第二个配置对象参数是可选的

2、若未定义cache属性，是否缓存保持与全局缓存属性一致

3、view属性基本上不需要自己定义，因为看起来挺麻烦的

4、最后的tryRender方法来源于view属性的原型方法，可能为了拓展才分割出来

function tryRender(view, options, callback) {
    try {
        view.render(options, callback);
    } catch (err) {
        callback(err);
    }
}

　　

　　这里以express-generator的demo来说明一下，在生成的目录中，app.js涉及的相关代码如下：

app.set(‘views‘, path.join(__dirname, ‘views‘));
app.set(‘view engine‘, ‘jade‘);

　　设置了默认解析引擎为jade，默认文件目录为views文件夹。

　　然后假设调用代码如下：

app.render(‘index‘, { title: ‘Express‘ }, callback);

　　先不管callback是什么，进入内置view模块。

function View(name, options) {
    var opts = options || {};
    // 获取参数
    this.defaultEngine = opts.defaultEngine;
    this.ext = extname(name);
    this.name = name;
    this.root = opts.root;
    /**
     * 有两种方式指定文件后缀
     * 1.name参数提供完整的文件名+后缀
     * 2.提前设置默认解析引擎view engine参数
     */
    if (!this.ext && !this.defaultEngine) {
        throw new Error(‘No default engine was specified and no extension was provided.‘);
    }

    var fileName = name;
    /**
     * 文件无后缀时会拼接默认解析引擎与文件名
     */
    if (!this.ext) {
        // jade + . => .jade
        this.ext = this.defaultEngine[0] !== ‘.‘ ?
            ‘.‘ + this.defaultEngine :
            this.defaultEngine;
        // index + .jade => index.jade
        fileName += this.ext;
    }

    // 无对应引擎模块时
    if (!opts.engines[this.ext]) {
        // 获取后缀
        var mod = this.ext.substr(1)
        debug(‘require "%s"‘, mod)

        /**
         * 引进对应模块
         * 比如jade => fn = requore(‘jade‘).__express
         */
        var fn = require(mod).__express

        if (typeof fn !== ‘function‘) {
            throw new Error(‘Module "‘ + mod + ‘" does not provide a view engine.‘)
        }

        opts.engines[this.ext] = fn
    }

    // 将引擎解析模块存入本地属性
    this.engine = opts.engines[this.ext];

    // 搜索路径
    this.path = this.lookup(fileName);
}

　　基本上信息都写在注释里了，稍微提一下，最佳的实践就是在文件名直接给出对应的后缀，并且提前在全局属性设置并引入解析引擎，这样在生成对应的view时会省去很多的时间。

　　完成文件名拼接与解析模块引入后，会进行文件的路径搜素，由于设置了指定目录，所以这一步也就很简单了，源码如下：

View.prototype.lookup = function lookup(name) {
    var path;
    // 还特地跑去查了一下 这个方法接受字符串 老了……
    var roots = [].concat(this.root);

    debug(‘lookup "%s"‘, name);
    // 遍历所有的本地目录
    for (var i = 0; i < roots.length && !path; i++) {
        var root = roots[i];

        // 拼接文件名与目录
        var loc = resolve(root, name);
        var dir = dirname(loc);
        var file = basename(loc);
        path = this.resolve(dir, file);
    }

    return path;
};

　　这个就太简单了。

　　

　　以jade为例，可以稍微看一眼解析入口函数：

exports.render = function(str, options, fn) {
    // 参数修正
    if (‘function‘ == typeof options) {
        fn = options, options = undefined;
    }
    if (typeof fn === ‘function‘) {
        var res
        try {
            // 解析文件
            res = exports.render(str, options);
        } catch (ex) {
            return fn(ex);
        }
        // 调用callback 第二参数为解析后的字符串
        return fn(null, res);
    }

    options = options || {};

    // cache requires .filename
    if (options.cache && !options.filename) {
        throw new Error(‘the "filename" option is required for caching‘);
    }
    // parse...
    return handleTemplateCache(options, str)(options);
};

　　总的来说，就是根据文件的绝对路径、参数对象返回一个解析后的html字符串，作为callback的第二个参数返回。

　　至此，render函数的过程解析完毕。