javascript - 如何组织 JavaScript UI 小部件的代码？

Question

我正在开发的网络应用程序有几个相当复杂且有状态的客户端 UI。我试图通过将它们组织成可组合的 javascript 小部件来保持理智。一些要求是:

1)widget初始化所需的部分数据需要来自服务端
2)部分数据来自客户端(根据选择的项目列表)
3) 关闭和重新打开时需要记住widget某些部分的状态
4) 其他section的状态需要忘记，重新设置为原来的设置
5) 页面必须非常快速地完全呈现，因此需要最小化 AJAX 调用

那么，我的问题是，您如何组织这个小部件的代码？我目前所做的涉及发送带有在服务器端填写的一些数据(即#1)的小部件的 HTML(以避免通过额外的 AJAX 调用发送数据)。然后我有一堆 jquery 代码以临时方式填充客户端内容。然后是更多代码，用于在第二次调用时将所有内容重置回所需状态。肯定有更明确的方式来实现这一点？

Answer 1

我想你会很高兴使用 Javascript MVC .它使管理组件状态变得更加容易，并且使在客户端管理数据变得非常容易，而不是重复进行 ajax 调用。完成教程，我想你会很开心。

编辑

我的原始答案没有解决页面呈现速度问题。

如果您真的很担心页面渲染速度，最好的解决方案是渲染文档。下一个最佳解决方案是在开发的最后阶段之前不要担心这个问题。优化数据加载行为非常容易，在巩固应用程序设计的其余部分后，您会想出更好的解决方案。

我采用了各种技术来提高渲染性能，例如可缓存的 ajax，或者在服务器上生成页面时将数据注入(inject)脚本 block 。这两种方法都给了我显着的性能提升，并且都可以在开发的后期阶段轻松应用。