内容大纲：1.功能介绍2.技术架构3.性能优化4.细节分享5.开源说明1.项目功能介绍没写过技术文章好久了，这次给大家分享一个最近的项目，一个用react+mobx+jquery搭建的大型工具项目。查看项目网址。如果你用过一期秀、maka或者百度H5，搜狐快站的朋友应该对这个工具非常熟悉。用户可以通过拖拽等操作轻松编辑HTML5代码，大大节省开发成本。也可以二次编辑模板，快速生成新的H5页面。今天的主角是H5DS（全称：HTML5Designsoftware），它是一款WEBH5制作工具。让不会写代码的人也能轻松快速的制作H5页面。做一个产品之前，策划很重要，会直接决定项目的成败！有些项目需要1年、2年甚至更长的时间来规划，只有规划好了才能积累大笔资金！这时候我们就需要跳出程序员的思维，不要简单的站在程序开发的角度来看整个项目！产品思维：当程序员要求产品经理看懂一些代码时，作为程序员，也要有产品思维，随便搞动手实践……）？目标用户群（C、B、设计师、程序员……）？产品定位（针对高端用户，针对低端用户）？用户群的需求特征（懂程序？懂设计？……）？用户的操作习惯（比如大部分设计师使用PS，他们是否遵循PS的设计风格？...）？等等，有很多问题。在做产品之前，尽量把这些问题总结一下，然后给产品一个更好的定位。程序员思维：优秀的工具具有高扩展性、方便易用、性能优异。我们的目标不只是做一个工具，而是像vscode一样做一个高度可扩展的工具。如何解决高扩展性问题？如何提取编辑器的内核？这些应该是程序员思考的事情。如何推广？如何包装？如何操作？如何让这个项目火起来，被大家接受和认可？如何让更多的程序员参与进来？这些都是从运营商角度考虑的问题。综合以上几点，我们不仅是一个优秀的程序员，更是一个优秀的产品经理，更是一个脚踏实地的运营者。我们在项目前期的时候，无论是产品、程序员、运营推广等等，你都要考虑到，虽然一个人不能做所有的工作，但是他懂一点，他就赢了不要被别人愚弄了。如果你的目标是成为一名管理者而不仅仅是一名程序员，你应该掌握一点这些能力。2、技术架构方案技术选型如下：前端：react、mobx、less、jquery后端：nodejs、mysql、ngnix工具：babel、webpack、gulp、eslintH5DS的技术选型基本就是JS的技术栈，这只能说这项技术非常先进。接下来，让我解释一下为什么选择这种类型。为什么反应？整个H5页面的制作思路是这样的：生成的H5页面虽然是单页，但是单页下还有多个子页面，大致可以分为3类。APP包含了整个页面的内容。Page包含单个子页面的内容，Layer是每个子页面内部的元素。这样，我们的思路就很清晰了。每个H5页面对应一个JSON文件，将JSON转为JSX模板，再通过renderToStaticMarkup将JSX转为HTML。我认为这张图片是最有效的说明。React强大的服务端渲染功能可以直接将JSX转换为HTML。从来没有人说过服务端渲染方式只能在服务端使用。这里我直接在前端使用，效果很好。具体方法renderToStaticMarkup//这个JSON文件的大概格式{...,"name":"H5页面名称","desc":"H5页面描述信息","pic":"主图URL","pages":[//H5由多个子页面组成{...,layers:[]//子页面由多个层组成}]}//JSX->HTML方法import{renderToStaticMarkup}from'react-dom/服务器';renderToStaticMarkup(JSX);为什么是mobx？我是一个野蛮的开发者，喜欢用最简单的代码来实现业务，而mobx则更加灵活多变，没有那么多限制和束缚，而redux就像一个墨守成规的名子。约束虽然可以让代码更加规范，但是如果随着大量的代码Specifications堆积起来，我还是觉得已经偏离了技术的实际意义，同时也增加了维护成本。我绝对不是一个合格的程序员。如果我能少写代码多做事，我宁愿不惜一切代价牺牲规范。为什么是jquery？之前很多朋友跟我说：用react就别用jquery。React可以做jquery可以做的事情。为什么要使用其他库？一点都不规范。其实我的回答往往是这样的：我比较任性，我喜欢jquery！为什么普遍认为jquery和react不应该共存？大致有以下几点：从框架的角度来看，react可以通过state修改dom，数据会从虚拟DOM到真实DOM。如果使用jquery，会直接修改DOM。结果就是state和真实的DOM无法对应，react就失去了存在的意义。从思想上来说，jquery直接操作dom和react的思想是相反的。但实际业务是千变万化的。哪个框架可以说可以轻松实现所有业务？jquery是工具库，react是ui库。如果使用得当，个人认为是非常不错的合作选择！有时使用jquery来操作DOM在性能上完全可以击败react。比如拖拽排序功能！技术选型的问题说完了，我们来说说整个项目的架构吧！仔细看第三个模块，你会发现它其实是脱离了中间的业务层独立开发的，更有利于项目扩展和二次开发。这里我们定义第三个模块为内核。基于这个内核，我们可以做web层，server层，extendedlayer层。内核的存在更像是ueditor，在项目中可以直接引用，让内核不再依赖。任何服务器都可以独立使用。3.性能优化处理对于工具项目来说，性能是一个非常大的挑战。我总结了以下几个常见的性能优化点：数据缓存。(indexeddb,localStorage,localSession)交互优化。（防抖去抖、油门、事件委托）内存释放。（componentWillUnmount、DOM释放、参考地址释放）四、技术细节分享1、图片裁剪及缓存方案因为在编辑器中，图片裁剪是一个常用的功能，如果采用传统的裁剪方式（前端将裁剪信息传递给服务器，服务器完成）裁剪，返回新的url）给服务器带来了很大的压力。为了节省这些性能成本，我们创建了一种裁剪方法。图片裁剪后，并没有直接丢给服务器。这种方法大大节省了服务器开销。具体业务流程如下：2.拖拽排序的性能优化方案如果拖拽排序是用纯react实现的。业务应该是这样的：如果使用jquery+react来实现：第二种结合jquery的方式大大减少了react中render函数的执行，实现了高性能的拖拽解决方案，无需多次执行diff操作。3.全机型适配方案我们固定显示区域的大小为320*514，为了兼容所有机型，必须进行缩放，要么100%高，要么100%宽，显示区域通过JS计算缩放比例，然后居中，可以最大限度的兼容各种机型。背景是全局的，示意图分别代表手机常用尺寸、超高处理、超宽处理示例。红色部分为显示区域，灰色部分为原始尺寸比例320*486，黑色阴影部分为缩放填充区域的灰色部分。5、关于开源说明该项目已经开源在github（https://github.com/h5ds/h5ds），供大家学习使用。拥抱开源是我们的选择，但我们希望大家能够遵守使用规范。对于个人来说，我们是免费的，但是对于商业用途我们是收费的。这个决定相信大家都能理解。欢迎加入QQ群交流：549856478
