自制前端前端框架 Day10. expression操作scop

最简单的是，通过一个key名来操作scope。

var fn = parse('age');
fn({age:18})==18 //true

现在parse出来的fn是可以接受一个scope对象作为参数的，所以要改一下代码

  return Function('scope',this.state.body.join(' '));

这样一来生成的函数就是这样：

function (scope){.....}

接下来要扩充AST.primary方法，使他可以处理identifier类型的token：

ASTBuilder.prototype.primary=function(){
  if(ASTBuilder.Constants.hasOwnProperty(this.tokens[0].text)){
    return ASTBuilder.Constants[this.consume().text];
  }else if (this.expect("[")) {
    return this.arrayDeclaration();
  }else if (this.expect("{")) {
    return this.object()
  }else if (this.peek().identifier) {
    return this.identifier()
  }else{
    return this.constant();
  }
}

这样一来，产生的AST格式应该是这样：

{
type:program,
body:{
    type:ASTBuilder.Identifier,
    name:'age'
  }
}

下一步可以进入compile阶段。
在recurse方法里面增加处理Identifier类型的节点：

  case ASTBuilder.Identifier:
      return 'scope.'+ast.name;//这里的scope和生成函数的参数对应function(scope){.....}

这样走下来，没意外的话，生成的函数是可以通过测试案例的。经过测试，确实通过了。第一步开了个好头。
接下来是增加健壮性，如果执行下面的测试案例，目前的代码会报错：

it('通过name操作对象',function () {
    var fn = parse('age');
    expect(fn()).toBe(18);
  })

age属性没定义

如果要是能在生成的函数里面加上这么一段代码，就可以了:

function (scope){
  var v0;
  if(scope){
   v0= scope.age;
  }
  return v0;
}

先写一个辅助方法，用于给生成的函数增加一个if语句:

Compiler.prototype.if_=function(test,consequent){
  this.state.body.push('if(',test,')','{',consequent,'}');
}

利用这个函数改造compile方法：

case ASTBuilder.Identifier:
      this.state.body.push('var v0;');
      this.if_('scope','v0='+'scope.'+ast.name+';')//这里的scope和生成函数的参数对应function(scope){.....}
      return 'v0';

这段代码看起来很复杂，其实用脑子用心好好看一看，脑子里想一想代码是怎么跑的，其实很容易理解。
接下来的事情就是把代码美化一下了。先写一个工具函数，用于生成一个赋值语句：

Compiler.prototype.assign=function(id,value){
  return id+'='+value+';';
}

把compile里面那一段脏乱差的代码美化一下：

this.if_('scope',this.assign('v0','scope'+ast.name))//这里的scope和生成函数的参数对应function(scope){.....}

好了，今天大概就写到这吧。