伟大的马老师曾经说过，生产工具是生产力的决定因素之一。实际工作中，一个好用的工具确实可以有效提升开发效率。起源一次和设计同学的闲聊中，了解到他们的设计稿交付时，大多数都是基于sketch，而Psd的设计稿非常少，使得他们一身Psd技艺无用武之地。究其原因，是因为sketch对css样式支持度较高，转换到HTML元素相对容易，但Psd并无一一映射规则，且Psd的样式繁杂，解析起来相当麻烦。鲁迅先生说过：“即使艰难，也还要做；愈艰难，就愈要做”。打了一番鸡血，几位小伙伴一拍即合，便开始去做这件“艰难”的事情——将Psd设计稿转译成HTML。调研目前市面上可用的转换插件以这两种为主，具体特点分析如下：解析插件名称psd.jsag-psd解析依据psd.rb解析器photoshop官方文档star数2.5k297更新频率去年上个月issue回复速度周甚至月天级图像模式支持度深度和图像模式有限几乎所有遍历方式插件API方法自由操作原始数据颜色模式rgbargba图片操作方式转png支持canvas所有API转换css属性属性有限大量属性可转换解析数据（以6.8MB的Psd文稿为例）135KB34.1MB解析成功率重名图层会出现卡死/报错100%结果一目了然，除star数稍逊色之外，其他方面ag-psd一骑绝尘，选定插件，开始搬砖。架构设定经过设计讨论，最终决定了解析的具体步骤，如下图所示。图层分类目前图层可分为三类：组(group)，文字(text)，图片(image)。其中组图层有children属性，它是可以包含所有类型图层的列表；文字图层也拥有children属性，但它仅能包含文字图层。enum

次渲染过程之中。与创建第一个富文本编辑器一样，第二个富文本编辑器在创建完毕之后，正文内容组件的回调函数也被调用了一次。生成第二个内容时的渲染过程这时，将光标移入第一个富文本编辑器中，触发它的