基于Lizard框架Ctrip Wireless H5数据存储方式的优化

Lizard是针对目前前端开源框架中存在的不足，由携程研发出的适用于无线移动端开发的框架。Lizard Web App是运行在浏览器上的单页应用，所有加载资源都放在一个html文件上，所有的用户交互都交给JavaScript，所有的通信都交给Ajax。该文基于Lizard框架实现Hybrid App（混合模式移动应用）的开发，并针对框架中本地存储方式进行改进，由此提出了扩展store的存储方式。以多态方式封装store，由LocalStorage、IndexDB、SQLite by App替换cookie，进而支持多种本地存储方式，该文只是针对其中一种方式即LocalStorage进行封装，以提高携程业务开发效率。 【Lizard框架详解】 Lizard框架是携程针对前端开源框架的局限性，为无线移动端开发设计的一款专用框架。它的核心理念在于打造一个运行在浏览器上的单页应用（SPA），所有资源都集中在一个HTML文件中，用户交互完全由JavaScript处理，通信则通过Ajax技术完成。Lizard框架特别适用于构建Hybrid App，这类应用结合了Native App的用户体验和Web App的跨平台优势。 【Hybrid App数据存储优化】 在Hybrid App的开发中，数据存储是一个关键问题。原始的Lizard框架中，数据存储主要依赖于Cookie，但Cookie存在存储量有限、性能瓶颈等问题。为了提升存储效率和灵活性，该文提出扩展store的存储方式，引入了多种本地存储机制，包括LocalStorage、IndexDB和SQLite。通过多态封装，开发者可以选择合适的存储方式，而文章重点讨论了如何封装LocalStorage以优化携程的业务开发流程。 【LocalStorage的应用】 LocalStorage是HTML5提供的本地存储机制之一，它允许Web应用在用户浏览器上存储大量数据，相比于Cookie，LocalStorage具有更大的存储空间和更高的访问速度。在Lizard框架中，通过封装LocalStorage，可以更高效地管理应用程序的状态和用户数据，减少网络请求，提高应用性能。 【数据存储方式的改进】 原有的Lizard框架使用Cookie进行数据存储，但Cookie有存储容量限制（通常为4KB），并且每次请求都会发送到服务器，这可能导致不必要的性能开销。为了解决这些问题，文章提出使用LocalStorage、IndexDB和SQLite。这些新的存储方式提供了更大的存储空间和更好的性能。特别是IndexDB，它支持索引和查询，适合存储结构化数据。SQLite则是一个轻量级的数据库，可以在客户端存储大量结构化的数据。 【Lizard框架的架构】 Lizard框架主要包括四个模块：第三方框架、核心框架、公共组件库和业务组件库。第三方框架包括Zepto、underscore、backbone和Fastclick，它们为Lizard提供了基础的JavaScript库和事件处理。核心框架实现Web App的基本功能，如UI、网络通信和数据存储。公共组件库和业务组件库则提供可复用的组件和模块，加速开发过程。 【结论】 通过优化Lizard框架的数据存储方式，不仅提高了数据存储的效率，也提升了Hybrid App的用户体验。这种改进不仅限于携程的业务，对于任何使用Lizard框架的开发者来说，都是一个有价值的参考，可以帮助他们更好地应对移动应用的数据存储挑战，提高应用的响应速度和用户满意度。