優(yōu)化JavaScript開(kāi)發(fā)過(guò)程的小工具JSDev怎么用

今天就跟大家聊聊有關(guān)優(yōu)化JavaScript開(kāi)發(fā)過(guò)程的小工具JSDev怎么用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

JSDev 是老道(Douglas Crockford)最近搞的一個(gè)不太起眼的小玩意，他的大致思路是，對(duì) JavaScript 做預(yù)處理，選擇性地把注釋轉(zhuǎn)為相應(yīng)的代碼。JSDev 處理的注釋塊有以下兩種形式：

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

然后你可以指定 JSDev 開(kāi)啟哪些 tag，JSDev 就會(huì)把這塊注釋改成相應(yīng)的代碼，而這些注釋在 JavaScript 正常運(yùn)行的時(shí)候是不會(huì)起作用的，在用 JSMin 等工具壓縮后也都會(huì)全被去掉，這樣就方便了 JavaScript 的開(kāi)發(fā)。

一開(kāi)始，老道只給出了 C 語(yǔ)言版本的程序，幾天后他給出了 JavaScript 版本，我覺(jué)得這開(kāi)始變得有意思了，折騰了兩天，想試看能否用到今后的開(kāi)發(fā)項(xiàng)目中去。下面我們先以 C 程序?yàn)槔f(shuō)明 JSDev 的用法，然后說(shuō)說(shuō)怎樣通過(guò) JavaScript 版本把它用在 node 開(kāi)發(fā)或者前端開(kāi)發(fā)過(guò)程中。本文假定你在類(lèi) Unix 系統(tǒng)(Linux/FreeBSD/Mac OS)下工作并且對(duì)命令行、node 編程都有一定了解。

C 語(yǔ)言版本 和 JSDev 的用法

先從 github 上 clone 我的 fork，把 C 源碼編譯成可執(zhí)行文件。

git clone https://github.com/yuest/jsdev.git #clone github 上的源代碼到本地  cd jsdev  gcc jsdev.c #編譯 C 版本  sudo mv a.out /usr/local/bin/jsdev #把編譯好的可執(zhí)行文件移動(dòng)到一個(gè) $PATH 底下的目錄

現(xiàn)在我們就可以用 jsdev 來(lái)運(yùn)行程序了。可是在命令行輸入 jsdev 并回車(chē)，卻什么都沒(méi)有，原來(lái)老道只做了這工具最核心的部分，而未在軟件界面下什么功夫，所以連個(gè)命令用法提示也沒(méi)有。作為預(yù)處理器，它只會(huì)從 stdin 吃進(jìn) JavaScript 代碼，然后把處理過(guò)的代碼從 stdout 拉出來(lái)，至于文件操作嘛，用 unix 命令行的管道特性就可以啦。

普及一下，要把文件，比如說(shuō) in.js 當(dāng) stdin 輸入到 jsdev 程序，使用小于符號(hào) < 就行，如 jsdev <in.js，而輸出就是用大于符號(hào) > 啦：jsdev <in.js >out.js 就可以。如果要嘗試 jsdev，只需要用 jsdev <in.js 就可以把結(jié)果輸出到屏幕上方便查看，或者你甚至可以配合使用 echo 命令來(lái)測(cè)試簡(jiǎn)單的單行代碼。如 echo "/*tag 'stuff'*/" |jsdev tag

只運(yùn)行 jsdev <in.js >out.js 這個(gè)命令不會(huì)對(duì) in.js 有任何改動(dòng)，我們需要以 tag 為參數(shù)調(diào)用 jsdev 命令來(lái)指定需要開(kāi)啟的 tag，多個(gè)空格間用空格分開(kāi)。以例子來(lái)說(shuō)明，如果 in.js 代碼如下：

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

那么 jsdev <in.js hello 會(huì)輸出如下代碼：

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

而 jsdev <in.js hello hi 則是：

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

這里的花括號(hào)是為了避免與程序中其他部分發(fā)生關(guān)聯(lián)而加的，主要問(wèn)題是 JavaScript 有行尾自動(dòng)插入分號(hào)的設(shè)計(jì)，如果不加花括號(hào)把上下文隔開(kāi)，可能會(huì)與前后行產(chǎn)生關(guān)聯(lián)，比如變成上一行的函數(shù)調(diào)用之類(lèi)?；ɡㄌ?hào)實(shí)際上是把多個(gè)語(yǔ)句復(fù)合成一個(gè)語(yǔ)句，最常見(jiàn)的地方是用在 if 等僅接受一個(gè)語(yǔ)句的關(guān)鍵字后。JavaScript 里面的花括號(hào)不會(huì)產(chǎn)生一個(gè)命名空間。

你可以為 tag 指定一個(gè)函數(shù)名，于是此 tag 指定的注釋塊就會(huì)被這個(gè)函數(shù)名 wrap（有點(diǎn)像 JSONP），如以下 in.js：

/*log some_variable*/

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

{console.log(some_variable);}

這可以用于調(diào)試代碼時(shí)打印當(dāng)時(shí)狀態(tài)下的某些變量值，會(huì)比較方便。

另外還可以為注釋塊指定條件，如下的 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!')}

如果運(yùn)行這段代碼，很顯然只會(huì)輸出 Hello, World!。

指定函數(shù)和條件也可以同時(shí)使用，如：

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!');}

和前面幾乎是一樣的，但注釋短了不少。以上就是關(guān)于 JSDev 使用方法的一切了。其實(shí)最核心的是 /*<tag> <stuff>*/ 這種形式，我們可以完全只用這種形式來(lái)達(dá)到上面一樣的目的：

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 指定函數(shù)名和條件只是做了一些簡(jiǎn)化而已。

哦對(duì)了，還忘了 jsdev 命令接受一個(gè) -comment 參數(shù)為輸出的文件頭部添加注釋?zhuān)鐚?duì)于上面的 in.js 文件，運(yùn)行一下命令：

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

會(huì)獲得：

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

嗯，以上就真的是關(guān)于 JSDev 用法的一切了，而關(guān)于要如何用好它，則需要他的使用者有一點(diǎn)想象力。比如，你可以寫(xiě)一些 bash 腳本什么的。下面說(shuō)說(shuō) JavaScript 版本的 JSDev 以及我想到的用在 node 項(xiàng)目的方法。

JavaScript 版本和 node 中用法

老道給出的 jsdev.js 里面只定義了一個(gè) JSDEV 函數(shù)，接受三個(gè)參數(shù)，***個(gè)參數(shù)是要處理的源代碼，第二、三個(gè)參數(shù)是兩個(gè)數(shù)組，分別指定 tag 和注釋。如果上面***一條命令用 JavaScript 版本來(lái)處理，就應(yīng)該是：

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 的依賴(lài)，并在源碼里

var JSDEV = require('jsdev').JSDEV

就可以使用 JavaScript 版本的 JSDEV() 函數(shù)了。

因?yàn)?node 可以通過(guò)修改 module.constructor.prototype._compile 來(lái)修改要載入的文件，非常適合拿來(lái)應(yīng)用 JSDev 這種預(yù)處理器。我的想法是，一個(gè)文件要開(kāi)啟哪些 tag 下的注釋塊，應(yīng)該在其自身（也是用注釋?zhuān)﹣?lái)描述。如果程序載入了 jsdev 并調(diào)用其 replaceRequire 方法（require('jsdev').replaceRequire()），之后再 require 進(jìn)的文件有 //@jsdev tag1 tag2 這樣的注釋?zhuān)蜁?huì)用 jsdev 開(kāi)啟 tag1、tag2 指定的注釋塊。

指定開(kāi)啟 tags 的規(guī)則這樣寫(xiě)：

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

以上注釋行表示在環(huán)境變量 NODE_ENV=test 或 NODE_ENV=production 的時(shí)候開(kāi)啟本文件的 tag1 tag2 注釋塊，在 NODE_ENV=development 時(shí)開(kāi)啟 tag3 注釋塊。如果沒(méi)有 jsdev 后面的括號(hào)，默認(rèn)是 development，因此可以寫(xiě)成

//@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')*/

則運(yùn)行 node a.js 會(huì)輸出 hi，而運(yùn)行NODE_ENV=test 則會(huì)輸出 hello

另外，對(duì)于前端開(kāi)發(fā)也是一樣的，有 replaceStatic() 函數(shù)，可以替換 connect/express 的 static middleware。這樣就可以預(yù)處理通過(guò) static middleware 返回到瀏覽器的 js 文件。文件內(nèi) tag 開(kāi)啟的規(guī)則和前面寫(xiě)的一樣。需要注意的是要在使用 connect.static(root) 之前調(diào)用 replaceStatic()。

更多的例子可以參考我寫(xiě)的測(cè)試，在遷出的代碼中 ./runtests （當(dāng)然要確保 npm 依賴(lài)已經(jīng)安裝，即在目錄下運(yùn)行 npm install）就可以運(yùn)行測(cè)試。我在這里提供這個(gè)很通用的工具的用法，要怎樣用好它（什么環(huán)境設(shè)定什么 tag 之類(lèi)），就要靠用戶的想象力了吧。

看完上述內(nèi)容，你們對(duì)優(yōu)化JavaScript開(kāi)發(fā)過(guò)程的小工具JSDev怎么用有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。