Javascript，获取全局变量属性

Javascript, getting global variable property

本文关键字：属性 全局变量 获取 Javascript      更新时间：2023-09-26

我要做的是根据屏幕尺寸将全局变量点类型设置为"移动"或"桌面"。

var userScreen = {} 

if (screen is small){
  userScreen.type === 'mobile'
}
else {
  userScreen.type === 'desktop'
}

一切都在同一个文件中工作，但我在让userScreen.type在另一个JavaScript文件中可用时遇到了问题。

屏幕尺寸.js：

$(document).ready(function(){
  var userScreen = {};
  var resizeTimer;
  $(window).on('resize load', function(e) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      var windowWidth = $(window).width();
      if ($('body').height() < $(document).height()) {
        var windowWidth = windowWidth + 15;
      }
      if (windowWidth < 768){
        userScreen.type = 'mobile';
      }
      else{
        userScreen.type = 'desktop';
      } 
    }, 250);
  });

另一个 js 文件

$(document).ready(function(userScreen){
  console.log(userScreen.type);
});

控制台日志"用户屏幕类型"结果：

function( obj ) {
    if ( obj == null ) {
        return obj + "";
    }
    // Support: Android<4.0, iOS<6 (functionish RegExp)
    return typeof obj === "object" || typeof obj === "function" ?
        class2type[ t…

加载顺序：

  1. 屏幕尺寸.js
  2. 另一个 js 文件.js

谢谢

编辑

想对大家的回应说声谢谢。最终答案

所以我创建了一个 IIFE，只需设置 window.userScreen 对象

获取用户屏幕.js

window.userScreen = {};
function getScreenSize(){
  var windowWidth = $(window).width();
  if ($('body').height() < $(document).height()) {
    var windowWidth = windowWidth + 15;
  }
  if (windowWidth < 768){
    userScreen.type = 'mobile';
  }
  else{
    userScreen.type = 'desktop';
  }
  console.log(userScreen.type);
}
(function(){
  getScreenSize();
}());

这使得变量像我想要的那样全局可用，并消除了提出的超时问题。一切都按预期工作。

再次感谢

声明显式全局的最佳方法是直接在 window 对象上创建它。因此，对于您的情况，请创建如下：

window.userScreen = {};

当您想访问它时，您可以再次通过以下方式进行访问 window.userScreen .许多人可能会反对这种用法，因为全局变量确实有气味，但这是一种明显向另一个开发人员传达您的全局是有意全局的方式。

我主张使用更好的模式，如 CommonJS 模块，但这确实需要更多的设置和知识。但是，如果您好奇，如果您想保持代码干净和分隔，这是一个很好的方向。

在加载任何 js 文件之前，您可以在脚本标记中声明 html 中的变量。这样：

<script type='text/javascript' > 
  var userScreen = {}; 
</script>

把它放在加载javascript文件的脚本标签之前，它们都应该能够使用该变量。另外，请记住不要再次重新声明该变量;从屏幕大小内取出var userScreen = {};.js

首先在 document.ready 外部声明它（作为全局变量）。其次，在设置之前，你会得到userScreen.type（参见超时250）。我建议采用不同的方法，从您的描述来看，我认为超时没有任何意义。因此：

屏幕尺寸.js 

function getSize(){
  if ($('body').height() < $(document).height()) {
    var windowWidth = windowWidth + 15;
  }
  if (windowWidth < 768){
    return 'mobile';
  }
  else{
    return 'desktop';
  } 
}

另一个 js 文件.js：

$(document).ready(function(){
    console.log(getSize());
});
相关文章：