基于指令提取Javascript并创建UI层控件

详见我的博客：http://www.zawaliang.com/2013/02/75.html

 

我们先来看一个流程图：

 

这是日常工作中常规的版本发布流程，审核层级的多少可能视乎组织架构、审批流等因素不定，但一般都会存在一级审批，审批完以后又会遇到很多的发布环境验证，在涉及多位开发同事、多个版本特性的时候，这一个发布环节就显得很耗时。对于常规（不紧急、计划内）的版本特性，这个流程问题倒不大，但涉及到紧急版本、bug修复等受不定因素影响的特性时，这个流程对开发人员的耗时就很严重了。

这是我工作中遇到的一些情况，不一定都适用，但作为开发人员，要学着提高开发效率，把更多的时间放到技术方面上去，而不是把时间浪费在这些繁琐无趣的流程上。

加上最近跟进的项目受政策及合作方影响较大，对于纯JS方面的配置信息希望做到更加方便的上下线，于是这段时间做了个内部系统，主要是解决上面流程的一些问题，尽量减少其中的耗时。

这个系统最重要的一个功能就是根据自定义的指令提取JS文件里的内容，并生成相应的UI控件。

我们来看一个简单的例子demo.js：

// @toggle group="分组名" label="开关指令" text="是否开启"
var demo = true;

demo.js是一个我们需要经常修改的文件，里面涉及到一个关键特性的开关配置内容，我们要做的就是根据自定义的指令，提取demo对应的值并通过UI层控件反馈出来，显示如下：

 

此时，一般的产品经理角色也可以通过此系统直接修改特性进行发布，省去了版本流程中众多的环节，开发人员也可以释放更多的人力资源。

 

以下是我基于PHP写的一个类JsCommandParser，主要包括以下几点功能：

• 自定义指令集
• JS类型自动转换
• 指令访问控制

Github地址：
https://github.com/zawaliang/JsCommandParser

使用很简单，通过紧靠JS内容上一行添加指令即可，如下

// @tag  attribute1="value2"  attribute2="value2"  ...  attributeN="valueN"
var demo = 'xxx';

经过hash()方法后，会自动添加hash的寻址标识，hash标识根据指令所属位置、产生时间以及随机数生成，保证全局唯一。

// @tag  attribute1="value2"  attribute2="value2"  ...  attributeN="valueN" hash="v0ae5d076619e398a3af08a8cf1fea98d" 
var demo = 'xxx';

JsCommandParser主要提供了几个方法：

// 实例化JsCommandParser类  
$cp = new JsCommandParser($str);  
//  设置当前用户,用户受限访问控制  
$cp->user = 'xxx';  
// 调用parse方法解析指令  
$cp->parse();  
// 给内容添加hash寻址指令  
$cp->hash();  
// 通过hash表单集合设置指令对应配置项  
$cp->set($data);  
// 删除内容中的指令集  
$cp->del([$str]);

至于UI层控件的封装，这里就不细说了。这里主要是抛砖引玉，谈一下工作中的流程优化问题，提高平时的开发效率。

 

 

详见我的博客：http://www.zawaliang.com/2013/02/75.html