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

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

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

 
 
 
  1. /* */ 
  2. /*(*/ 

然后你可以指定 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. cd jsdev  
  3. gcc jsdev.c #编译 C 版本  
  4. sudo mv a.out /usr/local/bin/jsdev #把编译好的可执行文件移动到一个 $PATH 底下的目录 

现在我们就可以用 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. /*hi console.log('Hi, there.')*/ 

那么 jsdev

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

而 jsdev

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

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

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

 
 
 
  1. /*log some_variable*/ 

用命令 jsdev

 
 
 
  1. {console.log(some_variable);} 

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

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

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

用命令 jsdev

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

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

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

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

用命令 jsdev

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

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

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

上面的代码用命令 jsdev

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

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

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

 
 
 
  1. jsdev 

会获得:

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

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

JavaScript 版本和 node 中用法

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

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

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

 
 
 
  1. 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 的规则这样写:

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

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

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

例如有 a.js:

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

b.js:

 
 
 
  1. //@jsdev(test,production) hello  
  2. //@jsdev hi  
  3. /*hello console.log('hello')*/ 
  4. /*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。

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

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

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

广告

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