js를 사용하여 js를 컴파일
하는 것은 고급스러운 것처럼 보이지만 실제로는 js의 기능을 사용하는 것보다 훨씬 간단합니다. 객체 속성을 문자열로 표현할 수 있습니다.
그냥 흑마법이죠. 编译 js
看起来是个高大上的东西,实际原理其实很简单,无非就是利用 js 对象属性可以用字符串表示
这个特性来实现的黑魔法罢了。
之所以看起来那么 深奥
, 大概是由于网上现有的教程,都是动不动就先来个 babylon / @babel/parser
先让大家看个一大串的 AST
, 然后再贴出一大串的代码,
直接递归 AST 处理所有类型的节点. 最后新手就成功被吓跑了。
那么今天我写这篇的目的,就是给大家一个浅显易懂,连刚学 js 的人都能看懂的 js2js 教程。
先来看一下效果
上面有提到,js 有个特性是 对象属性可以用字符串表示
,如 console.log 等价于 console['log'], 辣么根据这个特性,我们可以写出一个兼容性极差,极其简陋的雏形
function callFunction(fun, arg) { this[fun](arg); } callFunction('alert', 'hello world'); // 如果你是在浏览器环境的话,应该会弹出一个弹窗
既然是简易版的,肯定是问题一大堆,js 里面得语法不仅仅是函数调用,我们看看赋值是如何用黑魔法实现的
function declareVarible(key, value) { this[key] = value; } declareVarible.call(window, 'foo', 'bar'); // window.foo = 'bar'
Tips: const 可以利用 Object.defineProperty 实现;
如果上面的代码能看懂,说明你已经懂得了 js 解释器
的基本原理了,看不懂那只好怪我咯。
可以看出,上面为了方便, 我们把函数调用写成了 callFunction('alert', 'hello world');
但是着看起来一点都不像是 js 解释器
,
我们心里想要的解释器至少应该是长这样的 parse('alert("hello world")'')
, 那么我们来稍微改造一下, 在这里我们要引入 babel 了,
不过先不用担心, 我们解析出来的语法树(AST)也是很简单的。
import babelParser from '@babel/parser'; const code = 'alert("hello world!")'; const ast = babelParser.parse(code);
以上代码, 解析出如下内容
{ "type": "Program", "start": 0, "end": 21, "body": [ { "type": "ExpressionStatement", "start": 0, "end": 21, "expression": { "type": "CallExpression", "start": 0, "end": 21, "callee": { "type": "Identifier", "start": 0, "end": 5, "name": "alert" }, "arguments": [ { "type": "Literal", "start": 6, "end": 20, "value": "hello world!", "raw": "\"hello world!\"" } ] } } ], "sourceType": "module" }
上面的内容看起来很多,但是我们实际有用到到其实只是很小的一部分, 来稍微简化一下, 把暂时用不到的字段先去掉
{ "type": "Program", "body": [ { "type": "ExpressionStatement", "expression": { "type": "CallExpression", "callee": { "type": "Identifier", "name": "alert" }, "arguments": [ { "type": "Literal", "value": "hello world!", } ] } } ], }
我们先大概浏览一遍 AST 里面的所有属性名为 type
的数据
一共有 4 种类型, 那么接下来我们把这 4 种节点分别解析, 从最简单的开始
{ "type": "Literal", "value": "hello world!", }
针对 Literal 的内容, 我们需要的只有一个 value 属性, 直接返回即可.
if(node.type === 'Literal') { return node.value; }
是不是很简单?
{ "type": "Identifier", "name": "alert" },
Identifier 同样也很简单, 它代表的就是我们已经存在的一个变量, 变量名是node.name, 既然是已经存在的变量, 那么它的值是什么呢?
if(node.type === 'Identifier') { return { name: node.name, value:this[node.name] }; }
上面的 alert
我们从 node.name
里面拿到的是一个字符, 通过 this['xxxxx']
可以访问到当前作用域(这里是 window)里面的这个标识符(Identifier)
{ "type": "ExpressionStatement", "expression": {...} }
这个其实也是超简单, 没有什么实质性的内容, 真正的内容都在 expression
이렇게 심오하게
보이는 이유는 아마도 인터넷의 기존 튜토리얼이 항상 babylon / @babel/parser
로 시작하기 때문일 것입니다. AST
목록, 그리고 긴 코드 목록,
객체 속성을 문자열로 표현할 수
있는 기능이 있습니다. 예를 들어 console.log는 console[' log'] 이 기능을 기반으로 하면 매우 형편없고 투박한 프로토타입을 작성할 수 있습니다if(node.type === 'ExpressionStatement') { return parseAstNode(node.expression); }
{ "type": "CallExpression", "callee": {...}, "arguments": [...] }
Tips: const는 Object.defineProperty를 사용하여 구현할 수 있습니다.위 코드를 이해할 수 있다면
js 설명을 이미 이해했다는 뜻입니다. 기기의 원리
를 이해하지 못한다면 제 잘못입니다. 약간 강화하세요위에서는 편의상 함수 호출을 callFunction('alert', 'hello world');
로 작성했지만 실제로는 그렇지 않은 것을 볼 수 있습니다. alljs 인터프리터,parse('alert("hello world")'')
와 같아야 합니다. 그러면 약간 수정해 보겠습니다. , 여기서는 바벨을 소개할 예정이지만, 아직 걱정하지 마세요. 우리가 파싱한 구문 트리(AST)도 매우 간단합니다. if(node.type === 'CallExpression') { // 函数 const callee = 调用 Identifier 处理器 // 参数 const args = node.arguments.map(arg => { return 调用 Literal 处理器 }); callee(...args); }
위 코드는 다음 내용을 파싱합니다
const script = document.createElement("script"); script.innerText = 'alert("hello world!")'; document.body.appendChild(script);
type
속성 이름을 사용하여 AST의 모든 데이터를 간략하게 살펴보겠습니다. eval('alert("hello world!")')
new Function('alert("hello world")')();매우 간단하지 않나요? ?
setTimeout('console.log("hello world")');Identifier도 매우 간단합니다. 이미 존재하는 변수를 나타냅니다. 변수 이름은 기존 변수이므로 그 값은 무엇입니까?
rrreee
node.name
에서 받은 위의 alert
는 문자이며 this['xxxxx']
를 통해 액세스할 수 있습니다. 식별자 (식별자)🎜🎜ExpressionStatement🎜rrreee🎜(여기서는 창)는 실제로 매우 간단하며 실제 내용은 expression
속성에 있으므로 직접 반환할 수 있습니다. content ofexpression🎜rrreee🎜CallExpression🎜🎜CallExpression은 문자 그대로 함수 호출 표현식을 의미하는데, 이는 좀 더 번거롭습니다.🎜rrreee🎜CallExpression 여기에 필요한 필드가 2개 있습니다:🎜🎜🎜callee 예 함수 참조, 내부 내용은 식별자입니다. 🎜🎜인수 내부 내용은 호출 시 전달되는 매개변수 배열입니다. 현재 처리해야 할 것은 리터럴이며, 위에 처리 방법이 이미 있습니다. 어떻게 하는지 이미 알고 계시리라 믿으세요🎜rrreee🎜Code🎜🎜위의 프로세스를 실행할 수 있는 간단한 구현이 있지만 위의 프로세스만 실행할 수 있으며 다른 기능은 아직 구현되지 않았습니다. 🎜🎜https://github.com/noahlam/pr...🎜🎜기타 구현 방법🎜🎜위에 소개한 가장 번거로운 방법 외에도 실제로 js Way에서 문자열 코드를 직접 실행하는 방법은 여러 가지가 있습니다🎜🎜🎜 스크립트 삽입 DOM🎜🎜rrreee🎜🎜eval🎜🎜rrreee🎜🎜new Function🎜🎜rrreee🎜🎜setTimeout family🎜🎜rrreee🎜하지만 미니 프로그램에서는 가차없이 차단됩니다...🎜마지막으로, 🎜프론트엔드 학습을 권장합니다 고급 내부 커뮤니케이션 그룹 685910553🎜 (프론트엔드 데이터 공유) 지구상 어디에 있든, 🎜몇 년 동안 일했든 상관없이 가입하실 수 있습니다! (그룹에서는 정기적으로 그룹 오너가 수집한 학습서 및 자료와 인터뷰 질문 및 답변 문서를 무료로 제공합니다!) 🎜🎜이 기사에 이의가 있는 경우 기사 댓글에 의견을 적어주세요. 🎜🎜이 기사가 흥미로웠다면 공유하고 전달해 주세요. 또는 팔로우하여 기사에 대한 인식과 격려를 표시할 수도 있습니다. 🎜모두가 프로그래밍의 길에서 점점 더 멀리 나아갈 수 있기를 바랍니다.
추천 튜토리얼: "JS Tutorial"
위 내용은 JavaScript를 사용하여 js 인터프리터 작성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!