在写hst-virtual-dom的时候本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。,由于没有能力自己写一个语法解析器,仍然【转载请注明来源】本文版权归作者所有,未经授权不得转载。使用了内部是eval的Function来转载请注明出处:www.tangshuang.net【作者:唐霜】解析插值。在查看了angular的$pa【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。rse源码之后,发现angular自己实【作者:唐霜】【作者:唐霜】现了一套ast来解析js字符串脚本,于是【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】觉得这可能是我一直在寻找的东西。经过Go【转载请注明来源】【本文首发于唐霜的博客】ogle之后,发现有一个叫angular-expressions【访问 www.tangshuang.net 获取更多精彩内容】的库将这个模块从angular中剥离出来【未经授权禁止转载】转载请注明出处:www.tangshuang.net,成为一个独立的模块,可以在node环境【版权所有】唐霜 www.tangshuang.net【转载请注明来源】中运行,于是决定研究一下这个库。
原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。打开parse.js这个文件,我天,竟然【本文受版权保护】【本文首发于唐霜的博客】有4000多行代码,肯定是不可能看了。最【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。后决定,只研究它外层的封装,而不深入它的【版权所有,侵权必究】未经授权,禁止复制转载。内层去研究,只要用它就可以了。
本文版权归作者所有,未经授权不得转载。【版权所有,侵权必究】【原创内容,转载请注明出处】angular解析执行器用法【作者:唐霜】
未经授权,禁止复制转载。转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。未经授权,禁止复制转载。先来看下angular里面怎么使用$pa本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。rse:
本文作者:唐霜,转载请注明出处。转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。let parser = $parse('project.name')
let value = parser($scope)
上面实际上得到的结果是本文作者:唐霜,转载请注明出处。$scope.project.name,但是为什么要用$parse去执行,而不本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】直接调用呢?这是因为这个project.未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。name可能是一个directive的a转载请注明出处:www.tangshuang.net【关注微信公众号:wwwtangshuangnet】ttr传进来的。举个例子:
<div my-directive="members[2].name"></div>
然后你要在my-directive的代码【转载请注明来源】【原创不易,请尊重版权】里面去使用字符串的形式获取。你得到一个字【关注微信公众号:wwwtangshuangnet】【本文首发于唐霜的博客】符串members[2].name,怎么通过这个字符串,从$scope上获【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net取你想要的东西呢?这个时候就得靠$par【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。se。
安全的eval【原创内容,转载请注明出处】
【本文受版权保护】【转载请注明来源】转载请注明出处:www.tangshuang.net原创内容,盗版必究。JavaScript里面虽然有一个eva原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】l可以用来把字符串作为脚本进行运行,但是原创内容,盗版必究。【原创内容,转载请注明出处】它被认为是不安全的。为了能够解析并运行字【转载请注明来源】【原创内容,转载请注明出处】符串,不同的框架都做了尝试,而无疑,an【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。gular是里面都佼佼者。基于angul【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处:www.tangshuang.netar的$parse而生的angular-【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】expressions把这个功能从ang本文作者:唐霜,转载请注明出处。【原创不易,请尊重版权】ular里面提取出来,你可以这样去使用它未经授权,禁止复制转载。【本文首发于唐霜的博客】:
【版权所有,侵权必究】【作者:唐霜】【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。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'))
这是一个简单的执行器,可以用来执行简单的著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。js表达式并得到结果。
原创内容,盗版必究。【本文首发于唐霜的博客】【版权所有,侵权必究】原创内容,盗版必究。【原创内容,转载请注明出处】NOT eval【本文首发于唐霜的博客】
【转载请注明来源】著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】转载请注明出处:www.tangshuang.net但它和eval的表现形式完全不同,eva【本文受版权保护】【本文首发于唐霜的博客】l里面是一个完整的js上下文环境,最直接原创内容,盗版必究。【原创不易,请尊重版权】的体现就是this。如果在执行eval之【本文首发于唐霜的博客】【版权所有,侵权必究】前this就是有所指向的,那么eval里本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。面的this和前面这个this是一样的指【本文受版权保护】【版权所有,侵权必究】向。但是我们这里的parse完全不同,它著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】要求有一个作用域,在未传作用域的情况下,【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。里面的任何变量都是undefined,而【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。在传了作用域之后,里面的变量将作为作用域【本文首发于唐霜的博客】未经授权,禁止复制转载。对象的属性进行查询,这和angular的【转载请注明来源】原创内容,盗版必究。模板里面的变量名与$scope之间的关系【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。是一样的。因此,我们要在parse里面使【作者:唐霜】【作者:唐霜】用变量,就必须传一个scope,我们将代【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】码改造为:
著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。var expressions = require("angular-expressions");
var parse = function(str, scope){
return expressions.compile(str)(scope);
}
于是,我们就可以在传了scope的情况下转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net,在str里面写一些变量:
未经授权,禁止复制转载。未经授权,禁止复制转载。【本文受版权保护】【未经授权禁止转载】var value = parse('age + 12', { age: 3 }) // 15
甚至,我们还可以在str里面对scope本文作者:唐霜,转载请注明出处。著作权归作者所有,禁止商业用途转载。不存在的属性赋值:
【本文首发于唐霜的博客】原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。【作者:唐霜】var obj = {}
parse('sub.name = "mabo"', obj)
console.log(obj.sub.name) // mabo
这可真是神奇的操作。著作权归作者所有,禁止商业用途转载。
未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。插值的好帮手【关注微信公众号:wwwtangshuangnet】
【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net【原创不易,请尊重版权】【未经授权禁止转载】有了这样的操作,我们就很容易将它运用到模未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。板引擎的插值运算中了。例如我们可以仿造v原创内容,盗版必究。未经授权,禁止复制转载。uejs的插值方式进行逻辑处理:
本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】<button @click="onClick">xx</button>
{
methods: {
onClick() { alert('ok') }
}
}
我们怎样才能将模版中的onClick正确【原创不易,请尊重版权】原创内容,盗版必究。解析为methods.onClick呢?【未经授权禁止转载】【版权所有,侵权必究】因为vue已经做了一道工序,也就是thi【作者:唐霜】【版权所有,侵权必究】s.onClick = methods.【本文受版权保护】【原创不易,请尊重版权】onClick,而且onClick里面的【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.netthis还指向了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【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ick=”onClick($本文版权归作者所有,未经授权不得转载。【作者:唐霜】event)”。至于类似于{{text}}这样的插值,完全不在话下。【关注微信公众号:wwwtangshuangnet】
ToeX【访问 www.tangshuang.net 获取更多精彩内容】
【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】基于上面的思想,我自己写了一个packa【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.netge,取名ToeX,实现了对angula【转载请注明来源】【转载请注明来源】r-expressions的封装,使得a著作权归作者所有,禁止商业用途转载。本文作者:唐霜,转载请注明出处。pi更加方便实用。我已经发布到githu【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】b,你可以在这里【版权所有,侵权必究】看到源码。看下它的简单实用:【访问 www.tangshuang.net 获取更多精彩内容】
【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。转载请注明出处:www.tangshuang.netvar 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小结著作权归作者所有,禁止商业用途转载。
原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。【作者:唐霜】转载请注明出处:www.tangshuang.net好了,本文主要介绍了一个基于angula著作权归作者所有,禁止商业用途转载。【本文受版权保护】r.$parse服务的一个库,并且基于它本文作者:唐霜,转载请注明出处。【转载请注明来源】,做了一些扩展的想法。当我们在有需求的时原创内容,盗版必究。本文作者:唐霜,转载请注明出处。候,可能会用上这个库。
【原创不易,请尊重版权】著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。【未经授权禁止转载】

