Question

javascript中的全局变量与页面doc中的值或本地存储中的值有什么区别？

如果我需要将某些变量从服务器端语言（如php）发送到前端技术（如Angular / jquery文件，考虑大量变量？），那么哪一个会更好？

对页面效果会有什么影响？

Answer 1

全局变量

全局变量存储在内存中，并附加到窗口对象。如果您要使用大量变量，那么最好创建一个名称空间对象来充当容器。使用全局变量的一个问题是，如果存在名称冲突，则可以轻松覆盖它们。

这是一个简单的myNamespace对象的非破坏性创建：

var myNamespace = window.myNamespace || {};
myNamespace.variable = 'Some value';

根据您的情况，您可能希望通过使用服务器端应用程序生成JSON并将其插入到脚本片段中的HTML中来填充命名空间。

看到你用PHP标记了你的问题，我将使用PHP的json_encode添加一个小例子：

<?php
  $book = array(
    "title" => "Eloquent JavaScript",
    "author" => "Marijn Haverbeke",
    "edition" => 2
  );
?>
<script>
var myNamespace = '<?php echo json_encode($book, JSON_PRETTY_PRINT) ?>';
/* var myNamespace = {
    "title": "Eloquent JavaScript",
    "author": "Marijn Haverbeke",
    "edition": 2
  };
*/
</script>

JSON_PRETTY_PRINT 参数是可选的，它通过添加许多您可能不需要的空格以可读格式打印JSON。使用此方法，一旦浏览器解析了JavaScript，就会填充代码名称空间对象。

另一种方法是使用函数来填充命名空间对象。在以下代码片段中，myNamespace被分配了接收参数名称空间的IIFE返回的值。参数的值是window.myNamespace或空对象，具体取决于myNamespace是否先前已声明。在此函数中，AJAX调用可用于填充命名空间对象的属性。

var myNamespace = (function(namespace) {
  namespace.a = (function() { return ... })();
  namespace.b = (function() { return ... })();
  return namespace;
})(window.myNamespace || {});

使用AJAX填充命名空间将增加加载内容的网络请求数。

DOM值

DOM值是HTML代码中的所有内容，包括属性。

<img src="path/to/image.jpg" id="myId" class="myClass" title="My title" data-owner="Joe Bloggs" data-year="2017" />

DOM元素具有属性属性，该属性包含所有属性名称和值。检索数据比直接从全局变量中获取数据要慢，因为每个document.getElement...调用都意味着遍历DOM树。

var attrs = document.getElementById('unique-id').attributes;
// returns NamedNodeMap {0: id, 1: class, 2: data-owner, 3: data-year, 4: title ...}

Array.prototype.slice.call可以将结果转换为可以迭代的数组：

Array.prototype.slice.call(document.getElementById('myId').attributes)
    .forEach(function(item) {
      console.log(item.name + ': '+ item.value);
    });

// class: myClass
// data-owner: Joe Bloggs
// data-year: 2017
// id: myId
// src: path/to/image.jpg
// title: My title

<强> localStorage的

localStorage是应用同源规则的持久性密钥/值存储，以避免使用相同的协议和域访问共享的localStorage时出现的问题。 Web浏览器中“私密浏览”的不同实现意味着您不能依赖可用的功能并按预期工作。

Zendesk的cross-storage软件包允许您跨域共享localStorage。

<强>性能

全局变量＆gt; DOM值＆gt; LocalStorage＆gt; AJAX

全局变量存在于内存中。
DOM值意味着走树很慢。
LocalStorage表示读/写磁盘。
AJAX请求意味着您有额外的网络延迟。

Answer 2

全局变量 - ＆gt;可以在js或页面
Localstorage - ＆gt;可以在整个应用程序中访问值（所有页面）。

Answer 3

为了提高效率：

JS globals
DOM
localStorage和sessionStorage

DOM和Javascript全局变量都存储在RAM /系统内存中。 Globals基本上只是原始存储，结构非常少，使得它们非常快。 DOM是高度结构化的，每当它发生变化时，它就会发出一系列事件 - 这些事件（例如触发样式更新和mutation events /变异观察者）会增加开销。

每当网页关闭时（或浏览器关闭或设备关闭时），它们都会被彻底销毁。

然而，

localStorage存储在硬盘上。它具有在每次使用时写入磁盘的所有开销，但它是持久 - 如果浏览器关闭，或者设备关闭，您放在那里的数据仍然可用。它最适用于例如缓存文件。

Javascript中的大多数数据都是临时的，所以大部分时间都使用全局数据。

Answer 4

这更像是一个需求问题。如果要使用所有页面中的值，则建议使用localStorage。如果没有，那么你需要使用变量。您可以从DOM初始化它们，但不要重复读取DOM。

JS中的全局变量vs本地存储与DOM中的值，哪一个更有效？

4 个答案: