JSDev:一个优化 JavaScript开发过程的小工具
发布于 12 年前 作者 yuest 5989 次浏览 最后一次编辑是 8 年前

JSDev 是老道(Douglas Crockford)最近搞的一个不太起眼的小玩意,他的大致思路是,对 JavaScript 做预处理,选择性地把注释转为相应的代码。JSDev 处理的注释块有以下两种形式:

/*<tag> <stuff>*/
/*<tag>(<condition>) <stuff>*/

然后你可以指定 JSDev 开启哪些 tag,JSDev 就会把这块注释改成相应的代码,而这些注释在 JavaScript 正常运行的时候是不会起作用的,在用 JSMin 等工具压缩后也都会全被去掉,这样就方便了 JavaScript 的开发。

一开始,老道只给出了 C 语言版本的程序,几天后他给出了 JavaScript 版本,我觉得这开始变得有意思了,折腾了两天,想试看能否用到今后的开发项目中去。下面我们先以 C 程序为例说明 JSDev 的用法,然后说说怎样通过 JavaScript 版本把它用在 node 开发或者前端开发过程中。本文假定你在类 Unix 系统(Linux/FreeBSD/Mac OS)下工作并且对命令行、node 编程都有一定了解。

##C 语言版本 和 JSDev 的用法 先从 github 上 clone 我的 fork,把 C 源码编译成可执行文件。

git clone https://github.com/yuest/jsdev.git #clone github 上的源代码到本地
cd jsdev
gcc jsdev.c #编译 C 版本
sudo mv a.out /usr/local/bin/jsdev #把编译好的可执行文件移动到一个 $PATH 底下的目录

现在我们就可以用 jsdev 来运行程序了。可是在命令行输入 jsdev 并回车,却什么都没有,原来老道只做了这工具最核心的部分,而未在软件界面下什么功夫,所以连个命令用法提示也没有。作为预处理器,它只会从 stdin 吃进 JavaScript 代码,然后把处理过的代码从 stdout 拉出来,至于文件操作嘛,用 unix 命令行的管道特性就可以啦。

普及一下,要把文件,比如说 in.js 当 stdin 输入到 jsdev 程序,使用小于符号 < 就行,如 jsdev <in.js,而输出就是用大于符号 > 啦:jsdev <in.js >out.js 就可以。如果要尝试 jsdev,只需要用 jsdev <in.js 就可以把结果输出到屏幕上方便查看,或者你甚至可以配合使用 echo 命令来测试简单的单行代码。如 echo "/*tag 'stuff'*/" |jsdev tag

只运行 jsdev <in.js >out.js 这个命令不会对 in.js 有任何改动,我们需要以 tag 为参数调用 jsdev 命令来指定需要开启的 tag,多个空格间用空格分开。以例子来说明,如果 in.js 代码如下:

/*hello console.log('Hello, World!')*/
/*hi console.log('Hi, there.')*/

那么 jsdev <in.js hello 会输出如下代码:

{console.log('Hello, World!')}
/*hi console.log('Hi, there.')*/

jsdev <in.js hello hi 则是:

{console.log('Hello, World!')}
{console.log('Hi, there.')}

这里的花括号是为了避免与程序中其他部分发生关联而加的,主要问题是 JavaScript 有行尾自动插入分号的设计,如果不加花括号把上下文隔开,可能会与前后行产生关联,比如变成上一行的函数调用之类。花括号实际上是把多个语句复合成一个语句,最常见的地方是用在 if 等仅接受一个语句的关键字后。JavaScript 里面的花括号不会产生一个命名空间。

你可以为 tag 指定一个函数名,于是此 tag 指定的注释块就会被这个函数名 wrap(有点像 JSONP),如以下 in.js

/*log some_variable*/

用命令 jsdev <in.js log:console.log 输出的是:

{console.log(some_variable);}

这可以用于调试代码时打印当时状态下的某些变量值,会比较方便。

另外还可以为注释块指定条件,如下的 in.js

var name = 'Yuest'
/*hello console.log('Hello, World!')*/
/*hello(name === 'Celine') console.log('Hello, Celine!')*/

用命令 jsdev <in.js hello 输出:

var name = 'Yuest'
{console.log('Hello, World!')}
if (name === 'Celine') {console.log('Hello, Celine!')}

如果运行这段代码,很显然只会输出 Hello, World!

指定函数和条件也可以同时使用,如:

var name = 'Yuest'
/*log 'Hello, World!'*/
/*log(name === 'Ling') 'Hello, Ling!'*/

用命令 jsdev <in.js log:console.log 输出:

var name = 'Yuest'
{console.log('Hello, World!');}
if (name === 'Ling') {console.log('Hello, Ling!');}

和前面几乎是一样的,但注释短了不少。以上就是关于 JSDev 使用方法的一切了。其实最核心的是 /*<tag> <stuff>*/ 这种形式,我们可以完全只用这种形式来达到上面一样的目的:

var name = 'Yuest'
/*hello console.log('Hello, World!')*/
/*hello if (name === 'Ling') {console.log('Hello, Ling!')}*/

上面的代码用命令 jsdev <in.js hello 输出:

var name = 'Yuest'
{console.log('Hello, World!')}
{if (name === 'Ling') {console.log('Hello, Ling!')}}

所以可以看出,为 tag 指定函数名和条件只是做了一些简化而已。

哦对了,还忘了 jsdev 命令接受一个 -comment 参数为输出的文件头部添加注释,如对于上面的 in.js 文件,运行一下命令:

jsdev <in.js hello -comment "Author: Yuest" -comment "This is a temporary file generated by JSDev"

会获得:

// Author: Yuest
// This is a temporary file generated by JSDev
var name = 'Yuest'
{console.log('Hello, World!')}
{if (name === 'Ling') {console.log('Hello, Ling!')}}

嗯,以上就真的是关于 JSDev 用法的一切了,而关于要如何用好它,则需要他的使用者有一点想象力。比如,你可以写一些 bash 脚本什么的。下面说说 JavaScript 版本的 JSDev 以及我想到的用在 node 项目的方法。

##JavaScript 版本和 node 中用法

老道给出的 jsdev.js 里面只定义了一个 JSDEV 函数,接受三个参数,第一个参数是要处理的源代码,第二、三个参数是两个数组,分别指定 tag 和注释。如果上面最后一条命令用 JavaScript 版本来处理,就应该是:

JSDEV( input
     , ['hello']
     , ['Author: Yuest', 'This is a temporary file generated by JSDev'])

我的 fork 为 node 加上了 exports.JSDEV = JSDEV,并 publish 到 npm 上了,你只需 npm install jsdev 或者在 package.json 里面加上 jsdev 的依赖,并在源码里

var JSDEV = require('jsdev').JSDEV

就可以使用 JavaScript 版本的 JSDEV() 函数了。

因为 node 可以通过修改 module.constructor.prototype._compile 来修改要载入的文件,非常适合拿来应用 JSDev 这种预处理器。我的想法是,一个文件要开启哪些 tag 下的注释块,应该在其自身(也是用注释)来描述。如果程序载入了 jsdev 并调用其 replaceRequire 方法(require('jsdev').replaceRequire()),之后再 require 进的文件有 //[@jsdev](/user/jsdev) tag1 tag2 这样的注释,就会用 jsdev 开启 tag1、tag2 指定的注释块。

指定开启 tags 的规则这样写:

//[@jsdev](/user/jsdev)(test,production) tag1 tag2
//[@jsdev](/user/jsdev)(development) tag3

以上注释行表示在环境变量 NODE_ENV=testNODE_ENV=production 的时候开启本文件的 tag1 tag2 注释块,在 NODE_ENV=development 时开启 tag3 注释块。如果没有 jsdev 后面的括号,默认是 development,因此可以写成

//[@jsdev](/user/jsdev)(test,production) tag1 tag2
//[@jsdev](/user/jsdev) tag3

例如有 a.js:

require('jsdev').replaceRequire()
require('./b')

b.js:

//[@jsdev](/user/jsdev)(test,production) hello
//[@jsdev](/user/jsdev) hi
/*hello console.log('hello')*/
/*hi console.log('hi')*/

则运行 node a.js 会输出 hi,而运行NODE_ENV=test 则会输出 hello

另外,对于前端开发也是一样的,有 replaceStatic() 函数,可以替换 connect/express 的 static middleware。这样就可以预处理通过 static middleware 返回到浏览器的 js 文件。文件内 tag 开启的规则和前面写的一样。需要注意的是要在使用 connect.static(root) 之前调用 replaceStatic()

更多的例子可以参考我写的测试,在迁出的代码中 ./runtests (当然要确保 npm 依赖已经安装,即在目录下运行 npm install)就可以运行测试。我在这里提供这个很通用的工具的用法,要怎样用好它(什么环境设定什么 tag 之类),就要靠用户的想象力了吧。

有不足的地方欢迎指证,可以到 github 里面去提 issue。

2 回复

这看起来用来切换release版本和debug版本很方便,呵呵

老道貌似在google plus很活跃~

回到顶部