`
hax
  • 浏览: 961436 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JS解析测试代码片段

    博客分类:
  • JS
阅读更多
前一日与jindw聊天,谈到了正在研究的JS代码转换。譬如JSA所作的,其实就是一种代码转换。

PIES为了实现namespace(package)的管理,对JavaScript源代码也进行了处理。为了保证效率,所以想方设法只做了最最简单的预处理,也就是对代码段加头加尾,这样只是简单的字符串串接,对于效率是没有影响的。

但是最近在考虑是否有可能支持一些JS2(ES4)的特性,譬如支持let。这就必然需要将let转换为ES3所支持的某种结构(简单的说,在let语句开始的时候,把let的scope之外的同名变量先压栈,然后到了let的scope之外再恢复出来)。

总之这里就涉及到一种代码的transform或preprocessing。所以我在寻找某种轻型的代码解析方式。为此我先要写一些测试用例。

如果要进行JS代码的parse、transform、预处理、代码生成甚或compile等等,就需要考虑到JS的语法。以下是个很不完整的代码片段,parser、lint、preprocessor、transformer等等都需要能正确处理它,才具有实用价值。

function f(test) {
	
	return (test/*
	/* //
	' "
	{ ;
	\*/ && // /* // " ' { ; \
	test &&
	" /* // \
	\" ' \
	{ ;" &&
	' /* // \
	" \' \
	{ ;' &&
	test);
	
}

这个代码包含了多行注释、单行注释、字符串、多行字符串(非ES3标准,但各种引擎都支持)、转义字符等等。

这个代码没有包含的,包括正则和e4x。正则literal(如/^r(eg)ex["'\/].*?$/ig)是个很麻烦的事情,比如考虑除法!所以暂时没有放入测试用例中。e4x也是一个麻烦事情,因为涉及了内插XML,暂时不予考虑。

BTW,代码syntax highlight其实也会用到类似的处置,显然JavaEye的syntax highlight还是存在小小的地方不能辨识的,呵呵。

下面是一个正则表达式,可以匹配最常见的造成解析困难的嵌套结构,包括注释和字符串,但是没有包括前面所说的正则和e4x的xml结构。
/[/][*]([\S\s]*?)(?:[*][/]|$)|[/][/](.*)|"((?:\\"|[^"])*)"|'((?:\\'|[^'])*)'/g;


注:如果你看到上面的代码里存在奇怪的东西,那是JavaEye的bbcode解析错误。

通过这个正则,我们可以过滤一般的JS代码(当然正则和e4x除外)。比如可以把注释都删除,把字符串里的特殊字符替换掉等等。我测试了上面那段人造的代码。然后我拿dojo 0.4.3的314KB的源代码做了测试,完成整个过滤在我的T60笔记本上大概需要0.5秒。

不过因为还没有处理正则,所以这个方法还不能用于实用。
10
2
分享到:
评论
7 楼 Army 2008-04-13  
唔……发现不少问题呢,以前都没想到过……受教了~慢慢想想去~
6 楼 hax 2008-04-12  
To Army:
jssc2对于引号内的/*会识别为注释,所以我正文中的代码jssc2似乎尚无法正确高亮。jindw应该不会告诉你要分别处理,因为交叉问题是无法分别处理的,必须一揽子解决,或者采用Token解析方式。但是对于高亮这种用途来说,用Tokenizer代价过高,没有必要,恰好适合用我这里所描述的解决方案。代价是,对于少数极端情况会有高亮错误。
5 楼 Army 2008-04-11  
这个jindw曾和我说起过,交叉语法时会有问题,正则、字符串和注释中任意两个相互交叉的话有可能出现高亮错误。

jindw告诉我的是先将它们分开再进行着色,所以我写jssc2的时候就是受到他的启发的~
4 楼 hax 2008-04-11  
narcissus是一个完整的parser。所以它要用Tokenizer。这样开销还是相当大的。我其实想找一个用正则来做一种折衷处置的方式。

不过经过仔细研究,我发现正则literal是一个理论上难以解决的困境。因为是正则literal还是除法,要根据当时所处的语境(syntactic
grammar contexts)来决定,而不是只依据syntax的。考虑这样一个代码:

a = 1
b = 2
g = 1
c = a
/*

*/
/b/g


注意这里c实际为a/b/g(除法)。如果我检测到/b/g时,要回溯到之前的语境(包括跳过之前的注释)才能决定到底这是一个除法还是正则。这相当困难,因为JS中的正则不支持向前回溯。

不过在实践当中,几乎没有人会写出这样的语句:
- 跨行的除法
- 孤立的正则

所以可以考虑一种稍微严格的做法。目前正在思考中。
3 楼 trydofor 2008-04-11  
http://lxr.mozilla.org/mozilla/source/js/narcissus/
Brendan Eich's narcissus, a JavaScript parser written in JavaScript for the Mozilla project.
2 楼 hax 2008-04-10  
注,列表符号(以及正文中的<li>)应该是“[ * ]”(不包含空格)
1 楼 hax 2008-04-10  
BTW,在贴这个代码的时候发现一个小bug,即

/[/][*]([\S\s]*?)(?:[*][/]|$)|[/][/](.*)|"((?:\\\\|\\"|[^"])*)"|'((?:\\\\|\\'|[^'])*)'/


存在某种模式的代码,会匹配错误。不知有人能看出来么,呵呵。

相关推荐

    标签内JavaScript代码的高亮显示插件

    通常,这类库会包含CSS样式文件来定义颜色和样式,JavaScript文件负责解析和处理代码,以及可能的示例或测试文件。开发者可以通过引入这些文件到自己的项目中,或者通过npm或yarn等包管理器安装,然后调用相应的API...

    上下伸缩的JS广告代码

    这些代码片段是由JavaScript编写,通过在网页中插入一段脚本,动态加载并展示广告。当用户访问网页时,JavaScript代码会与广告服务器进行通信,获取广告内容,并将其呈现在指定位置。 二、上下伸缩广告的特点 1. **...

    jspacker压缩与解码

    4. **死代码消除**:分析代码逻辑,删除不会被执行的代码片段,进一步减少文件大小。 5. **优化表达式**:简化表达式结构,例如将多个常量操作合并为一个操作。 **三、jspacker的解码过程** 当jspacked的JavaScript...

    1000份前端js代码模板可做工具类

    这份"1000份前端js代码模板可做工具类"资源集合,旨在为开发者提供大量的代码片段和实用工具,帮助他们更高效地完成项目开发。下面,我们将深入探讨这些标签所涵盖的知识点,并结合资源中的文件名"js代码1000个"来...

    代码预览插件runCode.js

    `runCode.js` 是一款专为网页设计的代码预览插件,它允许用户在浏览器中直接运行和预览代码片段,无需离开当前页面。通过集成此插件,开发者可以为教程、文档或博客文章添加交互式的代码演示,增强学习体验和参与度...

    Source-Code-Parser:使您可以在自己喜欢的浏览器浏览器中轻松测试HTMLCSS和Javascript源代码的片段-css source code

    源代码解析器是一个创新的开发工具,它允许开发者在他们熟悉的浏览器环境中轻松地测试和调试HTML、CSS和JavaScript代码片段。这个工具极大地提升了开发者的工作效率,使得在不同浏览器上进行源代码的实时验证和测试...

    dom启蒙读书笔记和测试代码

    《DOM启蒙》是一本深入解析DOM...总的来说,《DOM启蒙》读书笔记和测试代码是学习和实践JavaScript DOM操作的重要参考资料,通过阅读和实践,开发者可以更好地掌握如何利用DOM来构建动态、交互丰富的Web应用。

    jsfiddle.net + codemirror.net

    JSFiddle 和 CodeMirror 是两款在Web开发领域中广泛使用的在线代码编辑器和预览工具,对于前端开发者来说,它们是进行快速原型设计、测试代码片段和分享示例代码的重要平台。 ### JSFiddle.net **1. 概述** JS...

    samples-js:样本JS测试片段

    这些文件可能会包含API调用、错误处理、数据解析等代码片段,是学习和理解JavaScript在地理编码应用中的实践的好资源。 总的来说,这个主题涵盖了JavaScript编程、地图API的使用,特别是Google Maps API的Geocoding...

    常见的JS广告代码

    - **广告代码**: 是指用编程语言编写的,用于在网站上展示、追踪和管理广告的代码片段。 - **JS广告**: 指利用JavaScript技术来实现的网络广告,包括动态加载、点击跟踪、用户行为分析等功能。 2. **广告代码类型...

    60个实用的jQuery代码片段.pdf

    以下是从60个实用jQuery代码片段中提取的知识点: 1. **选择器与过滤**:`filter()`方法允许根据指定条件筛选元素集合,如`":not(:has(.selected))"`用于移除包含特定类的元素。 2. **元素引用**:存储已选择的...

    js代码-js evil函数测试

    在压缩包中,`main.js`可能是包含测试代码的文件,而`README.txt`可能提供了关于如何运行和解读测试结果的指南。通过分析这些文件,我们可以更深入地理解JavaScript中的潜在风险,并学习如何编写更安全的代码。在...

    perf.js:JS 代码的简单基准测试

    这里的 "性能文件" 可能是指包含了一系列测试用例和分析工具的文件集合,用于评估不同 JavaScript 代码片段在特定环境下的执行速度。这种基准测试通常包括一系列操作,例如循环、函数调用、数组处理等,以模拟真实...

    能运行js-lua-c++代码的sublime-解压直接使用

    这对于快速测试代码片段或验证语法非常有用,特别是在处理多种语言时。 在提供的压缩包文件中,"能运行js-lua-c++代码的sublime"可能包含了预先配置好的构建系统文件和必要的插件,解压后可以直接使用,省去了手动...

    Node.js-VisualStudioCodevscode是一个跨平台的代码编辑器

    - **模板和片段**:VSCode支持自定义代码片段,对于Node.js开发,可以创建常用代码块,提高编码速度。 ### 结论 Node.js和Visual Studio Code的结合使用,为开发者提供了高效、灵活的开发环境。无论是在服务器端...

    Node_testbed:Node.js 的简单测试片段集合

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,它让开发者能够在服务器端使用 JavaScript 编程,打破了 JavaScript 仅能在浏览器端使用的限制。`Node_testbed` 提供了一系列简单的测试片段,用于帮助...

    ASP经典实用代码

    **代码片段9**:使用 JavaScript 检查当前页面是否嵌套在其他框架中,如果是,则将其从框架中“解脱”出来。 ```javascript &lt;SCRIPT LANGUAGE=javascript&gt; &lt;!-- if (top.location != self.location) top.location =...

    【JavaScript源代码】11个Javascript小技巧帮你提升代码质量(小结).docx

    通过将重复的代码片段提炼成独立的函数,不仅能够减少代码冗余,还能提高代码的可读性和可维护性。例如,在原始示例中,`main` 函数包含了获取数据、展示列表和添加事件监听器的功能。经过提炼,这些功能被拆分为三...

    jQuery针对IE浏览器低版本测试代码

    本测试代码集就是针对这一需求而准备的。 jQuery的核心特性包括: 1. **选择器**:jQuery提供了丰富的CSS选择器,如`$("#id")`、`$(".class")`、`$("tag")`等,使得选取DOM元素变得简单易行。 2. **DOM操作**:...

    jsbin 离线版本

    3. **本地存储**:离线版JSBin利用浏览器的本地存储(Local Storage)或IndexedDB技术来保存用户的代码片段和设置,这样即使在离线状态下,用户也可以访问和修改以前的代码。 4. **模拟服务器**:由于原版JSBin依赖...

Global site tag (gtag.js) - Google Analytics