优化JavaScript开发过程的小工具JSDev怎么用

今天就跟大家聊聊有关优化JavaScript开发过程的小工具JSDev怎么用，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

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 tag1 tag2 这样的注释，就会用 jsdev 开启 tag1、tag2 指定的注释块。

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

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

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

//@jsdev(test,production) tag1 tag2  //@jsdev tag3

例如有 a.js:

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

b.js:

//@jsdev(test,production) hello  //@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 之类），就要靠用户的想象力了吧。

看完上述内容，你们对优化JavaScript开发过程的小工具JSDev怎么用有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。