2016-02-27 5 views
1

То, что я пытаюсь сделать, - установить глобальный тип переменной переменной типа «мобильный» или «рабочий стол» в соответствии с размером экрана.Javascript, получая свойство глобальной переменной

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

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. экрана size.js
  2. другого-JS-file.js

Благодаря

EDIT

Хочет сказать спасибо за всякие ответы. Окончательный ответ

Так что я создал IIFE только с настройкой по window.userScreen объект

Get-User-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(); 
}()); 

Это сделало переменную доступной во всем мире, как я хотел, и устранил Тайм-аут вопрос был поднят. Все работает так, как ожидалось.

Еще раз спасибо

+2

userScreen не является глобальной переменной. Он существует в области $ (document) .ready. –

ответ

3

Лучший способ объявить явный глобальный - создать его непосредственно на объекте window. Так что для вашего дела, создать его любит:

window.userScreen = {};

И когда вы хотите получить доступ к нему, вы снова можете сделать это с помощью window.userScreen. Многие могут возражать против этого использования, потому что глобальные переменные пахнут, но это способ явно сообщить другому разработчику, что ваш глобальный является преднамеренным глобальным.

Я выступаю за использование лучшего шаблона, такого как модули CommonJS, но для этого требуется больше настроек и знаний. Но если вам интересно, это отличное направление, если вы хотите, чтобы ваш код был чистым и разделенным.

+1

Попытка поправляться при разделении и да, это очень преднамеренная переменная. Спасибо за объяснение и краткий ответ. –

0

Вы можете объявить переменную в вашем HTML, прежде чем загружать любые файлы JS, внутри тега сценария. Как так:

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

Put, что перед тегами сценария, которые загружают ваши файлы JavaScript, и все они должны быть в состоянии использовать эту переменную. Кроме того, не забудьте повторно обновить эту переменную; удалите var userScreen = {}; изнутри screen-size.js

+0

Спасибо за ответ, пытаясь избежать установки чего-либо в разметке. –

0

Прежде всего объявить его за пределами документа. Уже (как глобальная переменная). Во-вторых, вы получаете userScreen.type, прежде чем устанавливать его (см. Таймаут 250). Я бы предложил другой подход, из вашего описания я не вижу смысла в тайм-ауте. Therefor:

экрана 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()); 
}); 
+0

Да, теперь я вижу, что нужно установить какое-то обещание работать, когда это значение станет доступным. –