Javascript，获取全局变量属性

Question

我要做的是根据屏幕大小将全局变量点类型设置为“mobile”或“desktop”。

var userScreen = {}

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

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

屏幕size.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);
});

控制台日志“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. 屏幕size.js
2. 另一个-JS-file.js

谢谢

编辑

想要感谢每个人的回复。 最后的答案

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

获得用户，screen.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();
}());

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

再次感谢

Answer 1

声明显式全局的最佳方法是直接在window对象上创建它。 所以对于你的情况，创建它像：

window.userScreen = {};

当您想要访问它时，您可以再次通过window.userScreen进行window.userScreen 。 许多人可能会反对这种用法，因为全局变量确实有嗅觉，但这显然是与另一位开发人员沟通的一种方式，即您的全局是有意的全局。

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

Answer 2

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

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

把它放在加载你的javascript文件的脚本标签之前，它们都应该能够使用那个变量。 另外，请记住不要再次重新声明该变量; 删除var userScreen = {}; 来自screen-size.js

Answer 3

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

屏幕size.js

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

another-js-file.js ：

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