Javascript,获取全局变量属性
我想要做的是根据屏幕大小将全局变量点类型设置为“mobile”或“desktop”。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);
});
控制台登录 “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
对象
GET-用户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();
}());
这提供了全局变量来就像我想和消除超时问题引起了。一切都按预期工作。
再次感谢
声明全局显示的最佳方式是直接在window
对象上创建它。因此,对于你的情况,创建它喜欢:
window.userScreen = {};
而且当你要访问它,你可以再次通过window.userScreen
做到这一点。许多人可能会反对这种用法,因为全局变量有异味,但这是一种明显与另一个开发人员沟通的方式,即您的全局是有意识的全局。
我主张使用更好的模式,如CommonJS模块,但确实需要更多的设置和知识。但如果你很好奇,如果你想保持你的代码清洁和划分,这是一个很好的方向。
试图更好地进行分区,并且是非常有意的变量。感谢您的解释和简洁的回答。 –
你可以在你的HTML声明变量,你加载任何的js文件之前,一个脚本标签中。像这样:
<script type='text/javascript' >
var userScreen = {};
</script>
把那个加载你的JavaScript文件的脚本标签放在它们之前,它们都应该能够使用那个变量。另外,请记住不要再重新声明该变量;从内部删除var userScreen = {};
screen-size.js
感谢您的回复,试图避免在标记中设置任何内容 –
首先声明它在document.ready之外(作为全局变量)。 其次,在设置它之前,您将获得userScreen.type(请参阅timeout 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());
});
是的,我现在看到,必须设置某种类型的承诺,以便在该值可用时运行。 –
的userScreen不是一个全局变量。它存在于$(document).ready作用域中。 –