.3-浅析express源码之applicaiton模块(2)-app.re…

2018-06-24 01:55:36来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  这个模块还漏了一个稍微复杂点的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函数的过程解析完毕。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:angularJS入门笔记

下一篇:vue(二)-父子组件语法