javascript - 从 JSON 创建内容与数据库 - 效率

标签 javascript jquery html json twitter-bootstrap

我的第一篇文章在这里。从标题判断您可能的 react ,这篇文章可能看起来重复。我确实找到了这些帖子:one , two , three , four等等,但我的问题略有不同。我正在使用 JavaScript 和 Bootstrap 制作我的第一个网站。我在学校有过 Java(来自合作术语)和 C、C++ 的经验,所以仍在学习 JS 的“幕后”。是的,我还是一名学生。

我有一个最多包含 100-200 个对象的数据集。它们很小:四个字符串类型的字段,最大大小可能为 30 个字符。我想知道是否可以获得有关设计的建议和反馈。

要求: - 客户编辑数据集的能力; - 从更新的数据集中呈现新的 html 内容。

设计: 我计划将数据集存储为 JSON 文件和对象数组。客户端永远不需要看到它,我几乎完成了该 JSON 文件的基于 HTML 的解析器/编辑器。这个想法是解析 JSON,创建对象,将它们放入数组中,使用数组创建 HTML 内容: 页面加载:解析 JSON 并加载数组。我现在可以访问对象了。因此,我使用 JS 中的另一个函数从该新数组创建 HTML。 HTML block 的大小约为:

            <!-- product block. copy this to make more-->
            <div class="col-lg-6 col-md-6 col-xs-12">
            <div class="product-holder">
                <img src="flowers/flower2.jpg" alt="flower1" class="img-rounded flower-preview">
                <div class="product-name">
                    <h4>Tulip<small> Latin Name for Tulip</small></h4>
                    <p class="product-descr">This tells what tulip is like. Some useful information</p>

                </div>
            </div>
        </div> <!-- product block end -->

我担心的是:

  • 在 JS 中硬编码这么多 HTML 看起来很痛苦;
  • 对于这么多对象来说,渲染性能可能很糟糕;
  • 100-200 个对象的 JS 数组在性能方面也是不明智的。
  • 我应该使用 mySQL 数据库吗?

这是我的第一个公开网站。我非常喜欢网络编程。然而,我的经验很少,但我正在努力使其达到行业标准(尽可能)。因此,如果这是一个糟糕的方法,请告诉我。

到目前为止,我已经完成了布局,并且可以解析和操作 JSON 数据、JSON 编辑器。我正在尝试用JS编写qsort(JS中可能有一个库,但更多的是用于练习)来按字母顺序对数组进行排序。因此,这也会对性能产生影响。

预先感谢您的任何反馈。请注意,我不是在寻找任何代码。只是对设计的建议。

最佳答案

这看起来需要做很多工作,但实际上很容易做到。编写代码来构建 HTML 似乎有些过分了。我会使用数据库并考虑使用一些 JS 框架来为我进行 HTML 绑定(bind)。看看 AngularJS 或 Knockout.js。

就效率而言,您的数据集目前很小,我认为这两种方法都不会有任何明显的差异。

关于javascript - 从 JSON 创建内容与数据库 - 效率,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26715490/

相关文章:

jquery - 空白的白色背景循环

javascript - Vue.js [v-cloak] 不使用 CSS 过渡

javascript - 在某些窗口宽度处偏移 1 个像素

javascript - AJAX 堆栈来自 PHP 的响应

java - 更改 "overflow"样式时如何停止重新加载 Java 小程序

java - Jsoup 和抓取 HTML 时出现相同的不匹配错误

jQuery - 修改 HTML 字符串

javascript - 使用 jquery 从 HTML 表中提取数据

jQuery:如何使用 .nextUntil()?

jquery - 手动触发div的点击事件