使用 window 对象练习我的对象字面量函数

Question

我刚开始使用 JavaScript 函数，我使用 window 对象创建了一个对象文字函数。我不确定做这样的功能是否是正确的方法？我会 post 代码，然后 link 到我的代码笔，这样你就可以看到函数的运行情况。现在，要查看各种 window 和屏幕高度是多少，您必须调整浏览器宽度，并刷新页面，宽度和高度应相应调整。在此先感谢您能给我的任何帮助。

CODEPEN 全页视图： http://codepen.io/mike316/full/eZKYRE/

<!doctype html>
    <html>
      <head>
         <meta charset="utf-8">
         <title>Template</title>
         <link rel="stylesheet" href="css/styles.css">
      </head>
      <body>
        <div class="wrapper">
          <h1>JavaScript Fun</h1>
          <span id="fun"></span>
          <script src="js/scripts.js"></script>
        </div>
     </body>
   </html>

使用 html、CSS 和 JavaScript 的代码笔。 http://codepen.io/mike316/pen/eZKYRE

我的CSS:

body {
   background: grey;
}

.wrapper {
    background: teal;
    border: 2px solid black;
    border-radius: 15px;
    max-width: 60em;
    margin: 0 auto;
}

h1,
h2,
 p {
    text-align: center;
 }

我的JavaScript下面：

var info = {
     windowHeight: "<h2>Browser Window</h2><p>width:" + window.innerWidth + "</p>",
     windowWidth: "<p>height: " + window.innerHeight + "</p>,
     screenWidth: "<h2>screen</h2><p>Width:" + window.screen.width + "</p>",
     screenHeight: "<p>height: " + window.screen.height + "</p>
     screenInfo: function() {
         return this.windowHeight + this.windowWidth + this.screenWidth + this.screenHeight;
     }
};

正在调用我的函数

document.getElementById("fun").innerHTML = info.screenInfo();

Answer 1

这很好，但我建议进行调整。不要在这里使用对象。它不会在语义上添加任何内容，并且 html 属性在页面加载时被锁定，除非您再次创建该对象。你最好只使用函数和变量！

以下代码段与您的代码执行相同的操作，只是函数会在您调整屏幕宽度时运行，因此您无需刷新页面即可看到新值。 codepen

function screenInfo () {
  var windowHeight = "<h2>Browser Window</h2><p>width:" + window.innerWidth + "</p>"
  var windowWidth = "<p>height: " + window.innerHeight + "</p>"
  var screenWidth = "<h2>screen</h2><p>Width:" + window.screen.width + "</p>"
  var screenHeight = "<p>height: " + window.screen.height + "</p>"
  return windowHeight + windowWidth + screenWidth + screenHeight;
}

function addHtml () {
  document.getElementById("fun").innerHTML = screenInfo()
}

window.onresize = addHtml
addHtml()

使用 window 对象练习我的对象字面量函数

Practicing my object literal functions using the window object

javascript

function

object

literals