mustache-2.0源码注解

源码：https://cdn.bootcdn.net/ajax/libs/mustache.js/2.0.0/mustache.js

由于2.0与1.0差别不是很大，所有我就只单独比较一下 区别

1. Context 类

2.0这边不做view数据是否是null的判断了。直接赋值

function Context(view, parentContext) {
    this.view = view;  // 1.0 this.view = view == null ? {} : view;
    this.cache = { '.': this.view };
    this.parent = parentContext;
  }

2. lookup方法

lookup方法增加了一个标识lookupHit（是否查找命中）.而1.0是判断是否有获取到value的值来判断

Context.prototype.lookup = function (name) {
    var cache = this.cache;

    var value;
    if (name in cache) {
      value = cache[name];
    } else {
      // 增加一个标识 lookupHit 是否查找命中 
      var context = this, names, index, lookupHit = false;

      while (context) {
        if (name.indexOf('.') > 0) {
          value = context.view;
          names = name.split('.');
          index = 0;

     
          while (value != null && index < names.length) {
            if (index === names.length - 1 && value != null)
            // 对象自身属性中是否具有指定的属性(也就是,是否有指定的键), 那么查找到了。循环结束
              lookupHit = (typeof value === 'object') &&
                value.hasOwnProperty(names[index]);
            value = value[names[index++]];
          }
        } else if (context.view != null && typeof context.view === 'object') {
          value = context.view[name];
          // 对象自身属性中是否具有指定的属性(也就是,是否有指定的键)
          lookupHit = context.view.hasOwnProperty(name);
        }
        // 命中查找 结束循环 （1.0则是value有值就结束循环）
        if (lookupHit)
          break;

        context = context.parent;
      }

      cache[name] = value;
    }

    if (isFunction(value))
      value = value.call(this.view);

    return value;
  };

3. renderTokens

对应renderTokens方法里面其实改变不多， 更多的是把每种情况给单独用一个独立的函数处理，而不是像1.0一样都在 renderTokens 中处理，看起来更简洁易懂了。

  Writer.prototype.renderTokens = function (tokens, context, partials, originalTemplate) {
    var buffer = '';
    // 
    var token, symbol, value;
    for (var i = 0, numTokens = tokens.length; i < numTokens; ++i) {
      value = undefined;
      token = tokens[i];
      // 现在用symblo临时保存 token[0], 1.0直接判断token[0]
      symbol = token[0];
      // 1.0是用 的switch（token[0]） 现在改为 if else 
      // 并且每一项symbol都用一个函数处理，而不是1.0直接在这个函数中处理
      if (symbol === '#') value = this._renderSection(token, context, partials, originalTemplate);
      else if (symbol === '^') value = this._renderInverted(token, context, partials, originalTemplate);
      else if (symbol === '>') value = this._renderPartial(token, context, partials, originalTemplate);
      else if (symbol === '&') value = this._unescapedValue(token, context);
      else if (symbol === 'name') value = this._escapedValue(token, context);
      else if (symbol === 'text') value = this._rawValue(token);

      if (value !== undefined)
        buffer += value;
    }

    return buffer;
  };

4. renderTokens里面对应 token[0] === '#'的情况

2.0比1.0 在判断条件中 增加了数字类型的情况

  Writer.prototype._renderSection = function (token, context, partials, originalTemplate) {
    var self = this;
    var buffer = '';
    var value = context.lookup(token[1]);


    function subRender(template) {
      return self.render(template, context, partials);
    }

    if (!value) return;

    if (isArray(value)) {
      for (var j = 0, valueLength = value.length; j < valueLength; ++j) {
        buffer += this.renderTokens(token[4], context.push(value[j]), partials, originalTemplate);
      }
      // 比1.0 多了数字类型  
    } else if (typeof value === 'object' || typeof value === 'string' || typeof value === 'number') {
      buffer += this.renderTokens(token[4], context.push(value), partials, originalTemplate);
    } else if (isFunction(value)) {
      if (typeof originalTemplate !== 'string')
        throw new Error('Cannot use higher-order sections without the original template');

    
      value = value.call(context.view, originalTemplate.slice(token[3], token[5]), subRender);

      if (value != null)
        buffer += value;
    } else {
      buffer += this.renderTokens(token[4], context, partials, originalTemplate);
    }
    return buffer;
  };

html测试

源码：

/*!
 * mustache.js - Logic-less {{mustache}} templates with JavaScript
 * http://github.com/janl/mustache.js
 */

/*global define: false*/
// umd 写法： 兼容AMD和commonJS规范的同时，还兼容全局引用的方式
(function (global, factory) {
  if (typeof exports === "object" && exports) {
    factory(exports); // CommonJS
  } else if (typeof define === "function" && define.amd) {
    define(['exports'], factory); // AMD
  } else {
    factory(global.Mustache = {}); //