
1.4.2 je
移动端开发变得异常火爆之后,最直接的变化就是API独立。前端、PC端、移动端共用一套API,而API绝大部分以JSON格式为主,因此一个好用的JSON编辑器是非常重要的。
JSONEditor是一款非常好用的、使用JavaScript编写的JSON编辑器,它具备查看、编辑、格式化、校验等功能,非常强大。
一个好的开发者,要尽量减少对网络的依赖,因为使用本地工具一定比访问网络速度更快,而且能避免长尾效应,在开发时集中注意力。对于Node.js来说,这一点是非常容易保障的,因为npm模块都是安装在本地的,使用Node.js非常容易编写命令行模块,Node.js自身对Web Server的支持也极好。
下面,我们来看看如何通过je模块实现本地JSONEditor。
package.json
je模块定义在package.json文件中,代码如下。


以上代码是二进制模块代码,注意bin属性中配置了je命令,它依赖于Express这个著名的Web框架,以及另一个用于在浏览器中打开URL的工具模块open。
index.js
package.json文件里的je命令是通过index.js文件执行的,index.js文件是整个模块的核心文件,代码如下。

以上代码首先指定通过Node.js来执行当前脚本。之后启动服务器,端口是3024。同时指定静态资源目录为vendor/3.3.0_0/,也就是说,此目录下的所有HTML、JavaScript和CSS文件都可以被直接访问。最后启动服务器并在浏览器里打开访问地址。
目录说明
为了能够更直观地了解je模块的信息,我们通过tree命令来查看目录结构,具体如下。

je项目代码很少,核心部分是vendor/3.3.0_0目录下的文件,即JSONEditor的静态预览代码。这个目录是静态资源托管目录,与koa-generator生成的public目录相同,整个模块的核心就是托管了JSONEditor静态文件预览功能。je模块只是通过express命令启动了一个服务,并将其包装成了一个Node.js二进制模块。
安装测试
通过npm link命令可实现je模块的本地安装,如下。

安装完成就可以进行测试了,在终端执行je命令即可。它会通过open模块自动在默认的浏览器里打开本地URL,效果如图1-5所示。

图1-5
编写这种本地Web服务模块非常简单方便,能够有效地提高开发效率。笔者非常喜欢使用离线Web工具,个人认为这是一个非常具有发展空间的领域,虽然如今网络已经十分发达,但程序员不应该完全依赖网络。