JavaScript 存储对象的功能-坏的做法?

JavaScript 存储对象的功能-坏的做法?

在 JavaScript 中,对象是一种十分常见且强大的数据类型。我们可以使用对象来表示复杂的结构化数据,并通过属性和方法来操作这些数据。

在实际开发中,我们需要将对象存储在内存或者持久化存储介质(如数据库)中。然而,有些存储对象的方法会带来负面的影响,特别是在性能和可维护性方面。

下面我们来探讨一些坏的存储对象的做法,以及应该怎样去改进它们。

坏的做法1:直接将对象存储在全局变量中

这种做法十分简单粗暴,只需要声明一个全局变量并将对象赋值给它即可。比如:

-- --------
--- ----- - -
  ----- -------
  ---- --
--

-- -----------
-------- ----- -
  ------------------------
-

然而,这种做法存在很大的问题。首先,全局变量污染了命名空间,可能导致变量名冲突。其次,如果多个代码文件都使用了同一个全局变量,那么修改其中一个文件中的对象会影响到其他文件的使用。

更好的做法是将对象作为参数传递给函数,或者使用模块化的方式来组织代码。

坏的做法2:直接将对象存储在浏览器的 localStorage 中

localStorage 是一种客户端存储方式,可以用来存储小型数据,比如用户配置项和表单数据等。然而,如果直接将对象存储在 localStorage 中,会有以下问题:

  1. 存储的对象可能很大,导致 localStorage 容易满,影响其他的存储需求。
  2. 每次读取和写入对象时,需要进行序列化和反序列化操作,这会产生额外的计算开销。
  3. 如果多个页面同时访问同一个 localStorage 键名下的对象,会造成数据不一致的问题。

更好的做法是将对象转换成 JSON 字符串,并存储在 localStorage 中。这样可以避免对象太大的问题,并且序列化和反序列化的开销也大大降低。

-- ----- ------------ -
----------------------------- ---------------- ----- ------- ---- -- ----

-- - ------------ -----
--- ----- - ------------------------------------------

坏的做法3:在对象上直接添加方法

在 JavaScript 中,对象可以拥有自己的属性和方法。我们可以通过以下方式向对象添加方法:

--- ----- - -
  ----- -------
  ---- ---
  --------- ---------- -
    ------------------- -- ---- -- - - -----------
  -
--

然而,这种做法会让对象变得越来越臃肿,并且难以维护。如果需要修改某个方法的实现,可能会影响到整个对象的行为。

更好的做法是使用原型链来添加方法。这样可以有效地减小对象的大小,并且可以随时修改对象的行为。

-------- ------------ ---- -
  --------- - -----
  -------- - ----
-

------------------------- - ---------- -
  ------------------- -- ---- -- - - -----------
--

--- ---- - --- -------------- ----
----------------

总结

存储对象是前端开发中十分常见的操作,但同时也存在一些坏的做法。在存储对象时,我们应该

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/13445


猜你喜欢

  • 使用预编译的模板与 Handlebars.js(jQuery 移动环境)

    在 Web 开发中,前端渲染经常用到的方法是在客户端使用 JavaScript 来渲染动态内容。这种方式虽然简单易用,但是需要大量操作 DOM 和字符串拼接,导致代码难以维护和调试。

    7 年前
  • Webstorm:“不能解决目录”

    如果你是一个前端开发者,你很可能会使用 JetBrains 开发的 Webstorm IDE 作为你的主要开发工具。Webstorm 提供了许多方便的功能,但有些时候,它可能无法处理一些文件或目录。

    7 年前
  • Vue.js禁用输入条件

    在Vue.js中,我们可以使用v-bind指令将表单元素与Vue实例的数据绑定起来。通过这种方式,我们可以轻松地获取和操作表单数据。然而,在某些情况下,我们可能希望限制用户输入的内容或禁止输入的条件。

    7 年前
  • 如何用 jQuery 显示 "忙碌" 指示器?

    在前端开发中,经常有一些需要等待异步请求或长时间计算的情况。为了提高用户体验,我们可以使用指示器来让用户知道程序正在工作。 本文将介绍如何使用 jQuery 实现一个简单的 "忙碌" 指示器,并提供代...

    7 年前
  • 如何使用客户端 JavaScript 执行 DNS 查找

    引言 在前端开发中,我们有时需要通过主机名获取 IP 地址。这可以通过执行 DNS 查询来实现。DNS(Domain Name System)是一种分布式数据库系统,它将域名映射到 IP 地址。

    7 年前
  • JavaScript 正则表达式电子邮件验证

    在前端开发中,我们通常需要对用户输入的数据进行校验,其中电子邮件是常见的一种数据类型。本文将介绍如何使用 JavaScript 正则表达式来校验电子邮件格式,并提供实际的示例代码。

    7 年前
  • 如何通过javascript获取域名?[重复]

    很抱歉,我之前犯了个错误。这个问题是重复的,您可以在这里找到答案:https://openaidialoggpt.zendesk.com/hc/zh-cn/articles/4405589835097...

    7 年前
  • 如何从JavaScript中更改页面

    如果您正在构建一个Web应用程序,那么您需要能够编程方式更改网页上的元素和内容。这就是JavaScript变得如此重要的原因之一。在本文中,我们将深入探讨如何从JavaScript中更改页面。

    7 年前
  • 如何在 Ajax 驱动的页面中添加脸谱网“喜欢”按钮

    随着社交媒体的不断发展,脸谱网已经成为了许多网站必备的社交化工具之一。在我们的网站上添加脸谱网的“喜欢”按钮,可以方便用户快速分享和推广我们的内容。本文将介绍如何在使用 Ajax 技术的页面中添加脸谱...

    7 年前
  • 禁用jQuery选择下拉菜单

    在前端开发中,下拉菜单是常见的用户界面组件之一。而使用 jQuery 可以方便地操作 DOM,让我们可以快速地实现下拉菜单的交互效果。但有时候,我们需要禁用这个下拉菜单,防止用户进行不合理的选择或者避...

    7 年前
  • JavaScript 中的斜杠和字符串截取

    在 JavaScript 中,我们可以使用斜杠(/)来表示正则表达式。然而,当我们在字符串中使用斜杠时,它也有着特殊的含义。 在本文中,我们将探讨在 JavaScript 中的斜杠之后如何获得字符串的...

    7 年前
  • 如何通过多个字段对对象数组进行排序?

    在前端开发中,我们经常需要根据多个字段对对象数组进行排序。例如,在电商网站上,我们可能需要按价格和销量对商品列表进行排序。本文将介绍如何使用 JavaScript 中的 Array.sort() 方法...

    7 年前
  • 在谷歌地图标记上添加ID

    在前端开发中,经常需要在谷歌地图上添加自定义的标记(marker)。当然,这些标记不仅可以包含位置信息,还可以包含其他的元素,例如ID。本文将详细介绍如何在谷歌地图标记上添加ID,并提供代码示例和相关...

    7 年前
  • 这是离开“控制台一个坏主意。log()”叫你生产的JavaScript代码吗?

    在前端开发中,我们往往会使用 console.log() 方法来输出调试信息。虽然这个方法对于调试来说非常方便,但是如果在生产环境中使用它,就会带来一些问题。 控制台打印泄露信息 将 console....

    7 年前
  • 如何注销一个使用OAuth2登录谷歌的应用程序?

    在开发Web应用程序时,用户身份验证是必要的。OAuth2是一种常用的身份验证协议,它允许用户授权第三方应用程序访问他们在另一个服务上存储的资源(例如Google Drive)。

    7 年前
  • 我可以告诉浏览器脚本调试器忽略jquery.js吗?

    在前端开发中,经常使用 jQuery 这个流行的 JavaScript 库。但有时候我们在调试代码时会遇到一些麻烦,特别是当使用 jQuery 的时候。因为 jQuery 是一个非常大的库,如果我们在...

    7 年前
  • 错误:试图在已清除的范围上运行编译和运行脚本

    在前端开发中,我们常常会遇到类似于“错误:试图在已清除的范围上运行编译和运行脚本”的问题。这个错误提示通常出现在使用 Webpack 或者其他打包工具进行代码编译时。

    7 年前
  • 从URL /地址栏调用JavaScript函数

    在前端开发中,我们通常使用JavaScript来实现交互和动态效果。而通过URL或地址栏调用JavaScript函数,可以让网页更加灵活和交互性。 如何从URL调用JavaScript函数 我们可以通...

    7 年前
  • 调整 iframe 高度以适应内容

    在前端开发中,我们经常需要嵌入其他网页或应用程序到我们的页面中。为了实现这个功能,我们通常使用 iframe 标签来包含外部内容。但是,由于外部内容的高度通常是不确定的,因此我们需要动态调整 ifra...

    7 年前
  • 事件:preventDefault() vs. 返回 false

    什么是事件? 在 Web 开发中,事件是指用户和浏览器之间的交互。例如,当用户点击一个按钮时,会触发一个 click 事件;当用户按下键盘上的某个键时,会触发一个 keydown 事件。

    7 年前

相关推荐

    暂无文章