这两天，我把之前写给公司内部使用的前后端交互协议部分整理了一下，并在github上开源了。 地址： https://github.com/hiforce/render-protocol

运行 hiforce.render.protocol.AdjustRenderTester#main 可以看到下面的结果：

===> 第一次同步渲染的数据：{"linkage":{"compress":true,"renderParams":"H4sIAAAAAAAAAB2LsQ7CMAxE/8XqSK2kDEgdu7FB/yCkRo2axpWdDBHi30nZ7t67+0Dno1OFEdbwZvGEQmkhwUM4s+eISqqBEx5O3I5TqfN/8DgrXEApRpL2n9lvtYGQab8vDZyhH8xgze1qe2Nsk69Sn8WlHHKF0X5/9i8x/H8AAAA=","submitParams":"H4sIAAAAAAAAAKtWUknOSSwuVrJSyshMyy9KTtUrSs1LSS3SKyjKL8lPzs/RK04tLs7Mz9MrSCxKzNULLk3KzSwJALGVagFmGhzKPgAAAA=="},"hierarchy":{"root":"order_Rocky","components":["order_Rocky","item_item-20210731-001"],"structure":{"order_Rocky":["item_item-20210731-001"]},"signatureMap":{"item_item-20210731-001":"90fc73823ef348cfc7dcf12e75b7e44b","order_Rocky":"c0bd3459b67bef92fd2b0056a27651e6"}},"endpoint":{"type":"PC"},"data":{"item_item-20210731-001":{"$class":"hiforce.render.protocol.model.ItemCO","id":"item-20210731-001","tag":"item","parentTag":"order","parentId":"Rocky","submit":true,"unitPrice":10000,"buyQuantity":1},"order_Rocky":{"$class":"hiforce.render.protocol.model.OrderCO","id":"Rocky","tag":"order","submit":true,"seller":"Rocky"}},"reload":true}
-----------------------------------------
===> 模拟对其中一个组件进行操作，并触发异步请求
===> 异步请求渲染的数据：{"linkage":{"compress":true,"renderParams":"H4sIAAAAAAAAAB2LsQ7CMAxE/8VipFYShkod2digfxBSIyLSuLKTIar4d1K2u/fudjiF5FVhgnd8sQRCobyQ4CZcOHBCJdXIGTcvfsVrbfN/cD8qnEEpJZL+nzl8Wgex0HpbOjjC4IyzZrzYwRjb5bO2R/W5xNJgct8fNXwc138AAAA=","submitParams":"H4sIAAAAAAAAAKtWUknOSSwuVrJSyshMyy9KTtUrSs1LSS3SKyjKL8lPzs/RK04tLs7Mz9MrSCxKzNULLk3KzSwJALGVagFmGhzKPgAAAA=="},"hierarchy":{"root":"order_Rocky","components":["order_Rocky","item_item-20210731-001"],"structure":{"order_Rocky":["item_item-20210731-001"]},"signatureMap":{"item_item-20210731-001":"0ed54396e9c1a9bb40893a4c936febec","order_Rocky":"c0bd3459b67bef92fd2b0056a27651e6"}},"endpoint":{"type":"PC"},"data":{"item_item-20210731-001":{"$class":"hiforce.render.protocol.model.ItemCO","id":"item-20210731-001","tag":"item","parentTag":"order","parentId":"Rocky","submit":true,"unitPrice":10000,"buyQuantity":2}},"reload":false}
===> 可以观察上面数据，只返回了变化的组件数据。前段只需要对变化的组件数据做重新渲染。
-----------------------------------------

具体咋用，改天写个文章慢慢说吧。

关于前段组件化的一些类似的技术和参考文章：