Repository files navigation

标签： jdists 教程

通常软件发布时会将源文件做一次「预处理」再编译成可执行文件，才发布到市场。

• 配置线上运行环境，如调试服务地址需变更为实现线上地址；
• 减少执行程序的大小，移除没有使用的代码或资源并压缩；
• 增加逆向工程的成本，给代码做混淆（包括改变标识符和代码结构），降低可读性；
• 移除或增加调试功能，关闭或开启一些特权后门。

一些 IDE 已在「编译」时集成了「预处理」功能。

jdists 是一款强大的代码块预处理工具。

通常就是注释或注释包裹的代码片段，用于表达各种各样的含义。

举个栗子

• TODO 注释，表示代码中待完善的地方

/* TODO 功能待开发 */

• wiredep 注释，表示引入 bower 组件依赖的 css 资源

<!-- bower:css --><linkrel="stylesheet"href="bower_components/css/bootstrap.css"/><!-- endbower -->

• jshint.js 顶部注释，表示版权声明

/*! * JSHint, by JSHint Community. * * This file (and this file only) is licensed under the same slightly modified * MIT license that JSLint is. It stops evil-doers everywhere: * *   Copyright (c) 2002 Douglas Crockford  (www.JSLint.com) * ......... */

• jshint.js 另一部分注释，表示代码检查配置项

/*jshint quotmark:double *//*global console:true *//*exported console */

总之，本文所指「代码块」就是有特殊意义的注释。

指在代码编译之前，将代码文件按代码块粒度做一次编码或解析。

举个栗子，原本无效的代码片段，经过编码后变成了有效代码。

预处理前：

/*<jdists>console.log('Hello World!');</jdists>*/

预处理后：

console.log('Hello World!');

市面上有不少，这里只列两个比较典型的。

• 已被普遍使用的JSDoc，功能是将代码中的注释抽离成 API 文档。

/** * Represents a book. *@constructor *@param {string} title - The title of the book. *@param {string} author - The author of the book. */functionBook(title,author){}

• JSDev 是由 JSON 之父 Douglas Crockford 编写。jdists 与 JSDev 的功能类似，但 jdists 功能要复杂很多。

C command line example:

 jsdev -comment"Devel Edition."<input>output test_expose enter:trace.enter exit:trace.exit unless:alert

#"auto" data-snippet-clipboard-copy-content="output = JSDEV(input, ["test_expose","enter:trace.enter","exit:trace.exit","unless:alert"] , ["Devel Edition."]);">

output=JSDEV(input,["test_expose","enter:trace.enter","exit:trace.exit","unless:alert"],["Devel Edition."]);

// This is a sample file.functionConstructor(number){/*enter 'Constructor'*//*unless(typeof number !== 'number') 'number', "Type error"*/functionprivate_method(){/*enter 'private_method'*//*exit 'private_method'*/}/*test_exposethis.private_method = private_method;*/this.priv=function(){/*enter 'priv'*/private_method();/*exit 'priv'*/}/*exit "Constructor"*/}

// Devel Edition.// This is a sample file.functionConstructor(number){{trace.enter('Constructor');}if(typeofnumber!=='number'){alert('number',"Type error");}functionprivate_method(){{trace.enter('private_method');}{trace.exit('private_method');}}{this.private_method=private_method;}this.priv=function(){{trace.enter('priv');}private_method();{trace.exit('priv');}}{trace.exit("Constructor");}}

functionConstructor(number){functionprivate_method(){}this.priv=function(){private_method();}}

预处理以「代码块」为粒度有什么优势？

现有「代码块预处理工具」存在什么问题？

<!-- 乐居广告脚本 begin-->/* jshint ignore:start *//* TODO 待开发功能 */

/*jshint unused:true, eqnull:true*//*test_exposethis.private_method = private_method;*/

代码预处理的思考

怎么定义「代码块」？

怎么处理「代码块」？

/*<jdists export="template.js" trigger="@version < '1.0.0'">var template = /*<jdists encoding="base64,quoted" import="main.html?template" />*//*</jdists>

什么情况下触发？

jdists 基本概念

代码块 block

/*<jdists import="main.js" />*/

/*<jdists encoding="uglify">*/functionformat(template,json){if(typeoftemplate==='function'){// 函数多行注释处理template=String(template).replace(/[^]*\/\*!?\s*|\s*\*\/[^]*/g,// 替换掉函数前后部分'');}returntemplate.replace(/#\{(.*?)\}/g,function(all,key){returnjson&&(keyinjson) ?json[key] :"";});}/*</jdists>*/

/*<jdists>console.log('version: %s', version);<jdists>*/

标签 tag

属性 attribute

媒介 medium

触发器 trigger

<!--remove trigger="release"--><label>release</label><!--/remove-->

<!--remove trigger="@version < '1.0.0'"--><label>1.0.0+</label><!--/remove-->

如何扩展 jdists

varejs=require('ejs');/** * ejs 模板渲染 * *@param {string} content 文本内容 *@param {Object} attrs 属性 *@param {string} attrs.data 数据项 *@param {Object} scope 作用域 *@param {Function} scope.execImport 导入数据 *@param {Function} scope.compile 二次编译 jdists 文本 */module.exports=functionprocessor(content,attrs,scope){if(!content){returncontent;}varrender=ejs.compile(content);vardata;if(attrs.data){/*jslint evil: true */data=newFunction('return ('+scope.execImport(attrs.data)+');')();}else{data=null;}returnscope.compile(render(data));};

用例

代码编译成 dataurl

<!--remove--><script>/*<jdists encoding="base64">*/console.log('hello world!');/*</jdists>*/</script><!--/remove--><!--jdists><script src="data:application/javascript;base64,/*<jdists import="?[id=code]" />*/"></script></jdists-->

<!--remove--><script>/*<jdists encoding="base64" export="#code">*/console.log('hello world!');/*</jdists>*/</script><!--/remove--><!--jdists><script src="data:application/javascript;base64,/*<jdists import="#code" />*/"></script></jdists-->

实战

如何使用

安装

命令行

Usage:jdists <input list> [options]Options:-r, --remove                 Remove block tag name list (default "remove,test")-o, --output                 Output file (default STDOUT)-v, --version                Output jdists version-t, --trigger                Trigger name list (default "release")-c, --config                 Path to config file (default ".jdistsrc")

JS

varcontent=jdists.build(filename,{remove:'remove,debug',trigger:'release'});

问题反馈和建议

开发

复制项目代码

初始化依赖

执行测试用例

预处理

代码覆盖率

关键文件目录结果

[lib]                 --- 发布后的代码目录jdists.js         --- jdists 业务代码scope.js          --- jdists 作用域[processor]           --- 预制编码器[processor-extend]    --- 未预制的编码器，可能会常用的[src]                 --- 开发期代码[test]                --- 测试目录[fixtures]        --- 测试用例test.js           --- 测试调度文件index.js              --- jdists 声明cli.js                --- jdists 控制台