【更新】Template-Picker – 模板代码抽取工具

感慨几句

最近开搞Android开发了,没怎么弄js。跳出这个圈,开始考虑是不是可以做点代码之外的事。编程语言一直在发展,新特性总会层出不穷。那么,语言之外呢?

拿Web前端开发来说,js之外,还是有很多东西要做的。比如说发布脚本,比如说提速等等。

好,进入正题。

话说之前写过一个把写在html里的模板代码,抽取到js里面的脚本,开始的时候用了一段时间,感觉还可以再优化下。后来做了个新项目,里面与多个html页面,也都包含有模板代码,也都要抽取。这时之前的脚本就有点力不从心了。

所以把抽取脚本升级了下,给了个名字叫 template-picker,添加了一下特性:

  1. 支持多个html的模板抽取到一个js文件里面;
  2. 模板代码抽取之后,直接生成js function,这样就可以用压缩脚本对模板代码本身进行压缩(比如说Uglify-js或Google Cloud Compiler)了,可以压缩掉很多空格和变量名。

使用方法

1. 安装

npm install template-picker

2. 配置,配置说明开下面的注释即可

{
	//需要抽取模板的文件,如果是一个可以直接写成字符串
	//如果是多个,要写成数组,如:["index.html", "index2.html"]
	"source": "index.html",
	//抽取后的文件的输出目录,默认输出到 ./
	"target": "./out/",
	//容纳模板代码的js文件
	"templateOutput": "output.js",
	//模板代码在 templateOutput 中的占位符
	"templatePlaceholder": "/*%HtmlTemplateFunctions%*/",
	//指定是否把模板代码里的连续空格或TAB压缩成一个空格
	//可能有些地方的空格会意外的被压缩掉,默认 false
	"compressWhitespace": false
}

3. 使用

//如果把代码下载下来直接调用的话,可以这样用
node picker.js config.js
//如果在js里面调用,则像下面调用
require('template-picker').exec('config.json');
//or
require('template-picker').exec(configObject);

一些后话

模板代码输出成js方法,除了得到更大的压缩率之外,还可以使代码在执行的时候更快,因为已经没必要在运行时把模板字符串转换成方法了。虽说这么一点点的速度并不是很明显,但是所谓性能优化、提速优化,都是建立在每一个小点上的。把所有优化点综合在一起,性能就上去了。

这里解析模板使用的模板引擎是 jstemplate,但是可能不同人会喜欢不同的模板引擎。因此如果你不喜欢这个模板引擎的话,可以直接把代码里的jstemplate调用替换成自己的即可。

本项目托管在Github(https://github.com/iazrael/template-picker)上,有需要的同学可自行前往下载。更详细的实例可以看看test目录下的代码。

 

发表评论

请输入您的名字,邮箱帐号和评论,您的邮箱帐号会被保密,不会公开。

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>