JSDev：一个优化JavaScript开发过程的小工具

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

成都创新互联公司IDC提供业务:成都移动云计算中心,成都服务器租用,成都移动云计算中心,重庆服务器租用等四川省内主机托管与主机租用业务;数据中心含:双线机房,BGP机房,电信机房,移动机房,联通机房。

 
 
 
    
  
  
  
  1. /* */ 
    2. 
  
  
  
  2. /*() */ 
    3.

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

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

C 语言版本 和 JSDev 的用法

先从 github 上 clone 我的 fork，把 C 源码编译成可执行文件。

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

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

普及一下，要把文件，比如说 in.js 当 stdin 输入到 jsdev 程序，使用小于符号 < 就行，如 jsdev 啦：jsdev out.js 就可以。如果要尝试 jsdev，只需要用 jsdev

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

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

那么 jsdev 

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

而 jsdev 

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

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

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

 
 
 
    
  
  
  
  1. /*log some_variable*/ 
    2.

用命令 jsdev 

 
 
 
    
  
  
  
  1. {console.log(some_variable);} 
    2.

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

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

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

用命令 jsdev 

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

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

指定函数和条件也可以同时使用，如：

 
 
 
    
  
  
  
  1. var name = 'Yuest' 
    2. 
  
  
  
  2. /*log 'Hello, World!'*/ 
    3. 
  
  
  
  3. /*log(name === 'Ling') 'Hello, Ling!'*/ 
    4.

用命令 jsdev 

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

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

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

上面的代码用命令 jsdev 

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

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

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

 
 
 
    
  
  
  
  1. jsdev 

会获得：

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

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

JavaScript 版本和 node 中用法

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

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

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

 
 
 
    
  
  
  
  1. var JSDEV = require('jsdev').JSDEV 
    2.

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

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

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

 
 
 
    
  
  
  
  1. //@jsdev(test,production) tag1 tag2  
    2. 
  
  
  
  2. //@jsdev(development) tag3 
    3.

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

 
 
 
    
  
  
  
  1. //@jsdev(test,production) tag1 tag2  
    2. 
  
  
  
  2. //@jsdev tag3 
    3.

例如有 a.js:

 
 
 
    
  
  
  
  1. require('jsdev').replaceRequire()  
    2. 
  
  
  
  2. require('./b') 
    3.

b.js:

 
 
 
    
  
  
  
  1. //@jsdev(test,production) hello  
    2. 
  
  
  
  2. //@jsdev hi  
    3. 
  
  
  
  3. /*hello console.log('hello')*/ 
    4. 
  
  
  
  4. /*hi console.log('hi')*/ 
    5.

则运行 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。

原文：http://club.cnodejs.org/topic/4f3b65a1b43c3c846a05518c

分享题目：JSDev：一个优化JavaScript开发过程的小工具
分享链接：http://www.shufengxianlan.com/qtweb/news3/226353.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

虚拟主机知识

分类信息网站

做网站价格　　 　企业微信定制　　 　营销网站定位　　 　网站建设　　 　成都活动策划　　 　防护网厂　　 　济桢教育　　 　成都网站设计　　 　成都铁科精智测控　　 　成都商城网站制作　　 　界面设计　　 　护栏钻孔机　　 　seo关键词优化　　 　川西大数据中心　　 　传美奇电气　　 　重庆服务器托管　　 　网络推广平台　　 　成都众诚伟业　　 　装饰公司网站建设方案　　 　网站设计公司