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…

加载订单：

丝网size.js
另一个-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();
}());

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

再次感谢

Answer 1

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

window.userScreen = {};

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

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

Answer 2

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

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

将它放在加载javascript文件的脚本标记之前，它们都应该能够使用该变量。另外，请记住不要再次重新声明该变量;从screen-size.js

中删除var userScreen = {};

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';
  } 
}

<强>另一个-JS-file.js ：

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

Javascript，获取全局变量属性

3 个答案: