javascript – 箭头函数eval预处理器
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 箭头函数eval预处理器，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8053字，纯文字阅读大概需要12分钟。
内容图文
浏览器通过eval或new Function支持动态JavaScript评估.这对于将作为字符串提供的小数据绑定表达式编译为JavaScript函数非常方便.
例如.
var add2 = new Function('x', 'return x + 2');
var y = add2(5); //7
我想预处理这些表达式以支持ES6箭头函数语法,而不使用babel或任何其他具有超过几百行JavaScript的库.
var selectId = new Function('x', 'return x.map(a=>a.id)');
不幸的是,即使使用最新的IE版本,这也不起作用.
该函数应该接受一个字符串并返回另一个字符串.例如.
resolveArrows('return x.map(a=>a.id)')
应该回来
‘return x.map(function(a){return a.id})’
关于如何实现这样的事情的任何想法？
解决方法:
正如其他人已经解释过的那样,这样的实用程序将非常脆弱,并且无法用非常复杂的代码来信任.
但是对于简单的情况,可以实现这一点.
以下是Fat Arrow功能扩展的链接.
https://github.com/ConsciousObserver/stackoverflow/blob/master/Es6FatArrowExpansion/fatArrowUtil.js
导入fatArrowUtil.js并在代码上调用expandFatArrow(code).
以下是样本用法
expandFatArrow("()=>'test me';");
以下是结果
(function (){return 'test me';}).bind(this)
以下是您建议的测试用例的输出
//actual
var selectId = new Function('x', 'return x.map(a=>a.id)');
//after expansion
var selectId = new Function('x', 'return x.map((function (a){return a.id}).bind(this))');
注意：此实用程序使用Function的bind()来保留“this”上下文.
它不会尝试编译您的代码,原始代码中的任何错误都将出现在扩展代码中.
以下是带有测试和结果的工作样本.
//start of fat arrow utility
'use strict';
function expandFatArrow(code) {
var arrowHeadRegex = RegExp(/(\((?:\w+,)*\w+\)|\(\)|\w+)[\r\t ]*=>\s*/);
var arrowHeadMatch = arrowHeadRegex.exec(code);
if(arrowHeadMatch) {//if no match return as it is
var params = arrowHeadMatch[1];
if(params.charAt(0) !== "(") {
params = "(" + params + ")";
}
var index = arrowHeadMatch.index;
var startCode = code.substring(0, index);
var bodyAndNext = code.substring(index + arrowHeadMatch[0].length);
var curlyCount = 0;
var curlyPresent = false;
var singleLineBodyEnd = 0;
var bodyEnd = 0;
var openingQuote = null;
for(var i = 0; i < bodyAndNext.length; i++) {
var ch = bodyAndNext[i];
if(ch === '"' || ch === "'") {
openingQuote = ch;
i = skipQuotedString(bodyAndNext, openingQuote, i);
ch = bodyAndNext[i];
}
if(ch === '{'){
curlyPresent = true;
curlyCount++;
} else if(ch === '}') {
curlyCount--;
} else if(!curlyPresent) {
//any character other than { or }
singleLineBodyEnd = getSingeLineBodyEnd(bodyAndNext, i);
break;
}
if(curlyPresent && curlyCount === 0) {
bodyEnd = i;
break;
}
}
var body = null;
if(curlyPresent) {
if(curlyCount !== 0) {
throw Error("Could not match curly braces for function at : " + index);
}
body = bodyAndNext.substring(0, bodyEnd+1);
var restCode = bodyAndNext.substring(bodyEnd + 1);
var expandedFun = "(function " + params + body + ").bind(this)";
code = startCode + expandedFun + restCode;
} else {
if(singleLineBodyEnd <=0) {
throw Error("could not get function body at : " + index);
}
body = bodyAndNext.substring(0, singleLineBodyEnd+1);
restCode = bodyAndNext.substring(singleLineBodyEnd + 1);
expandedFun = "(function " + params + "{return " + body + "}).bind(this)";
code = startCode + expandedFun + restCode;
}
return expandFatArrow(code);//recursive call
}
return code;
}
function getSingeLineBodyEnd(bodyCode, startI) {
var braceCount = 0;
var openingQuote = null;
for(var i = startI; i < bodyCode.length; i++) {
var ch = bodyCode[i];
var lastCh = null;
if(ch === '"' || ch === "'") {
openingQuote = ch;
i = skipQuotedString(bodyCode, openingQuote, i);
ch = bodyCode[i];
}
if(i !== 0 && !bodyCode[i-1].match(/[\t\r ]/)) {
lastCh = bodyCode[i-1];
}
if(ch === '{' || ch === '(') {
braceCount++;
} else if(ch === '}' || ch === ')') {
braceCount--;
}
if(braceCount < 0 || (lastCh !== '.' && ch === '\n')) {
return i-1;
}
}
return bodyCode.length;
}
function skipQuotedString(bodyAndNext, openingQuote, i) {
var matchFound = false;//matching quote
var openingQuoteI = i;
i++;
for(; i < bodyAndNext.length; i++) {
var ch = bodyAndNext[i];
var lastCh = (i !== 0) ? bodyAndNext[i-1] : null;
if(ch !== openingQuote || (ch === openingQuote && lastCh === '\\' ) ) {
continue;//skip quoted string
} else if(ch === openingQuote) {//matched closing quote
matchFound = false;
break;
}
}
if(matchFound) {
throw new Error("Could not find closing quote for quote at : " + openingQuoteI);
}
return i;
}
//end of fat arrow utility
//validation of test cases
(function () {
var tests = document.querySelectorAll('.test');
var currentExpansionNode = null;
var currentLogNode = null;
for(var i = 0; i < tests.length; i++) {
var currentNode = tests[i];
addTitle("Test " + (i+1), currentNode);
createExpansionAndLogNode(currentNode);
var testCode = currentNode.innerText;
var expandedCode = expandFatArrow(testCode);
logDom(expandedCode, 'expanded');
eval(expandedCode);
};
function createExpansionAndLogNode(node) {
var expansionNode = document.createElement('pre');
expansionNode.classList.add('expanded');
currentExpansionNode = expansionNode;
var logNode = document.createElement('div');
logNode.classList.add('log');
currentLogNode = logNode;
appendAfter(node,expansionNode);
addTitle("Expansion Result", expansionNode);
appendAfter(expansionNode, logNode);
addTitle("Output", logNode);
}
function appendAfter(afterNode, newNode) {
afterNode.parentNode.insertBefore(newNode, afterNode.nextSibling);
}
//logs to expansion node or log node
function logDom(str, cssClass) {
console.log(str);
var node = null;
if(cssClass === 'expanded') {
node = currentExpansionNode;
} else {
node = currentLogNode;
}
var newNode = document.createElement("pre");
newNode.innerText = str;
node.appendChild(newNode);
}
function addTitle(title, onNode) {
var titleNode = document.createElement('h3');
titleNode.innerText = title;
onNode.parentNode.insertBefore(titleNode, onNode);
}
})();pre {
padding: 5px;
}
* {
margin: 2px;
}
.test-unit{
border: 2px solid black;
padding: 5px;
}
.test{
border: 1px solid gray;
background-color: #eef;
margin-top: 5px;
}
.expanded{
border: 1px solid gray;
background-color: #ffe;
}
.log{
border: 1px solid gray;
background-color: #ddd;
}
.error {
border: 1px solid gray;
background-color: #fff;
color: red;
}<html>
<head>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<div class='test-unit'>
<pre class='test'>
//skip braces in string, with curly braces
var fun = ()=> {
return "test me {{{{{{} {{{}";
};
logDom( fun());
var fun1 = ()=> logDom('test me again{ { {}{{ }}}}}}}}}}}}}}');
fun1();
</pre>
</div>
<div class='test-unit'>
<pre class='test'>
var selectId = new Function('x', 'return x.map(a=>a.id)');;
var mappedArr = selectId([{id:'test'},{id:'test1'}]);
console.log("test0: " + JSON.stringify(mappedArr));
logDom("test0: " + JSON.stringify(mappedArr), 'log');
</pre>
</div>
<div class='test-unit'>
<pre class='test'>
//with surrounding code
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var es6OddNumbers = numbers.filter(number => number % 2);
logDom("test1 : " + es6OddNumbers, 'log');
</pre>
</div>
<div class='test-unit'>
<pre class='test'>
//standalone fat arrow
var square = x => x * x;
logDom("test2: " + square(10), 'log');
</pre>
</div>
<div class='test-unit'>
<pre class='test'>
//with mutiple parameters, single line
var add = (a, b) => a + b;
logDom("test3: " + add(3, 4), 'log');
</pre>
</div>
<div class='test-unit'>
<pre class='test'>
//test with surrounding like test1
var developers = [{name: 'Rob'}, {name: 'Jake'}];
var es6Output = developers.map(developer => developer.name);
logDom("test4: " + es6Output, 'log');
</pre>
</div>
<div class='test-unit'>
<pre class='test'>
//empty braces, returns undefined
logDom("test5: " + ( ()=>{} )(), 'log');
</pre>
</div>
<div class='test-unit'>
<pre class='test'>
//return empty object
logDom("test6: " + ( ()=>{return {}} )(), 'log');
</pre>
</div>
<div class='test-unit'>
<pre class='test'>
//working with the 'this' scope and multiline
function CounterES6() {
this.seconds = 0;
var intervalCounter = 0;
var intervalId = null;
intervalId = window.setInterval(() => {
this.seconds++;
logDom("test7: interval seconds: " + this.seconds, 'log');
if(++intervalCounter > 9) {
clearInterval(intervalId);
logDom("Clearing interval", 'log');
}
}, 1000);
}
var counterB = new CounterES6();
window.setTimeout(() => {
var seconds = counterB.seconds;
logDom("test7: timeout seconds: " +counterB.seconds, 'log');
}, 1200);
</pre>
</div>
</body>
</html>内容总结
以上是互联网集市为您收集整理的javascript – 箭头函数eval预处理器全部内容，希望文章能够帮你解决javascript – 箭头函数eval预处理器所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】