var expressions = require("angular-expressions");
var parse = function(str){ 
  return expressions.compile(str)();
}

console.log(parse('1 + 1')); // 2
console.log(parse('1 ? 1 : 0'))

这是一个简单的执行器，可以用来执行简单的【版权所有】唐霜 www.tangshuang.net【作者：唐霜】js表达式并得到结果。

NOT eval【转载请注明来源】

但它和eval的表现形式完全不同，eva本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。l里面是一个完整的js上下文环境，最直接【原创内容，转载请注明出处】【本文首发于唐霜的博客】的体现就是this。如果在执行eval之原创内容，盗版必究。【作者：唐霜】前this就是有所指向的，那么eval里【本文受版权保护】转载请注明出处：www.tangshuang.net面的this和前面这个this是一样的指【本文受版权保护】本文版权归作者所有，未经授权不得转载。向。但是我们这里的parse完全不同，它【原创内容，转载请注明出处】【转载请注明来源】要求有一个作用域，在未传作用域的情况下，【作者：唐霜】【版权所有，侵权必究】里面的任何变量都是undefined，而【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net在传了作用域之后，里面的变量将作为作用域转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】对象的属性进行查询，这和angular的【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。模板里面的变量名与$scope之间的关系著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net是一样的。因此，我们要在parse里面使【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。用变量，就必须传一个scope，我们将代【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。码改造为：

var expressions = require("angular-expressions");
var parse = function(str, scope){ 
  return expressions.compile(str)(scope);
}

于是，我们就可以在传了scope的情况下著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】，在str里面写一些变量：

var value = parse('age + 12', { age: 3 }) // 15

甚至，我们还可以在str里面对scope原创内容，盗版必究。原创内容，盗版必究。不存在的属性赋值：

var obj = {}
parse('sub.name = "mabo"', obj)
console.log(obj.sub.name) // mabo

这可真是神奇的操作。【原创不易，请尊重版权】

插值的好帮手未经授权，禁止复制转载。

有了这样的操作，我们就很容易将它运用到模本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】板引擎的插值运算中了。例如我们可以仿造v【本文受版权保护】【未经授权禁止转载】uejs的插值方式进行逻辑处理：

<button @click="onClick">xx</button>

{
  methods: {
    onClick() { alert('ok') }
  }
}

我们怎样才能将模版中的onClick正确【原创内容，转载请注明出处】【版权所有，侵权必究】解析为methods.onClick呢？原创内容，盗版必究。【版权所有，侵权必究】因为vue已经做了一道工序，也就是thi原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】s.onClick = methods.【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】onClick，而且onClick里面的著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。this还指向了vue实例。所以在模板解【作者：唐霜】原创内容，盗版必究。析完成之后，我们得到一个virtual 著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。dom并且规矩规则对这个button的c【作者：唐霜】【原创内容，转载请注明出处】lick事件进行绑定：

buttonElement.addEventListener('click', (e) => {
  let scope = {
    $this: this,
    $event: e,
  }
  let onClick = parse('$this.' + attrs.bind.click, scope) // attrs.bind.click就是指@click的值
  if (typeof onClick === 'function') {
    onClick.call(this, e)
  }
}, false)

这段代码一上，你甚至可以在模板中写@cl【未经授权禁止转载】未经授权，禁止复制转载。ick=”onClick($【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netevent)”。至于类似于{{text}}这样的插值，完全不在话下。【未经授权禁止转载】

ToeX【版权所有】唐霜 www.tangshuang.net

基于上面的思想，我自己写了一个packa本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。ge，取名ToeX，实现了对angula【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】r-expressions的封装，使得a【作者：唐霜】本文版权归作者所有，未经授权不得转载。pi更加方便实用。我已经发布到githu转载请注明出处：www.tangshuang.net原创内容，盗版必究。b，你可以在这里【转载请注明来源】看到源码。看下它的简单实用：本文版权归作者所有，未经授权不得转载。

var ToeX = require('toex')
var toex = new ToeX($scope)

// 过滤器
toex.filter('double', value => value * 2)

// 求值
var normalExpressionResult = toex.parse('1 + 1 | double') // 这里演示了使用过滤器
var scopeExpressionResult = toex.parse('key + 1')

// 赋值
toex.assign('name', 'tomy')

它一共3个api，使用超级简单，可以考虑【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】用到任何需要的地方。

小结本文作者：唐霜，转载请注明出处。

好了，本文主要介绍了一个基于angula【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。r.$parse服务的一个库，并且基于它【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。，做了一些扩展的想法。当我们在有需求的时【原创不易，请尊重版权】未经授权，禁止复制转载。候，可能会用上这个库。