jquery - 将具有动态VergeJS视口(viewport)值的div添加到HTML

在开发期间使用Verge.js显示当前的视窗宽度和高度跨浏览器。
https://jsfiddle.net/ccL30a26/

function getVergeValues() {

viewportWidth  = verge.viewportW() // Get the viewport width in pixels.
viewportHeight = verge.viewportH() // Get the viewport height in pixels.

$('.w').text(viewportWidth  + 'px wide');
$('.h').text(viewportHeight + 'px high');

}

$(window).on('resize', getVergeValues);
$(document).ready(getVergeValues);

我不想硬编码#notification，.w&.hdiv到HTML中，而是将它们附加到body中，其中包含Verge给它们的值。
我用这个代码实现了这个目标。
https://jsfiddle.net/ccL30a26/1/

function getVergeValues() {

viewportWidth  = verge.viewportW() // Get the viewport width in pixels.
viewportHeight = verge.viewportH() // Get the viewport height in pixels.

var $width  = $( "<div class='w'></div>" );
var $height = $( "<div class='h'></div>" );

$('.w').text(viewportWidth  + 'px wide');
$('.h').text(viewportHeight + 'px high');

$( "body" ).append( $width, $height);

}

$(window).on('resize', getVergeValues);
$(document).ready(getVergeValues);

但是，现在在domready上没有显示任何值，在window resize上，这些值加起来填充了viewport。
如何在domready上显示初始值，在调整窗口大小时仅显示当前值？
编辑
看着lab.js我明白我必须使用for循环来更新已更改的输出，其中outputs、updates和prev都是空数组，并且l和i被赋予值0。同时，这个问题很可能对我有帮助。

// Update changed outputs
for (l = updates.length; i < l; i++) {
    if (i in updates && updates[i] !== prev[i]) {
        (outputs[i] = outputs[i] || $(prefix + i)).text(updates[i]);
        }
}

刚刚意识到我需要updates[31] = viewportW();和updates[32] = viewportH();从边缘。不知道如何将verge.viewportW()和verge.viewportH()值实际放入数组中，然后对它们进行迭代。如果有人能在for循环中输入我需要做的事情，那将对我有很大帮助。
简单地说，我在找这个。
一。从verge.viewportW()中获取第一个值并将其存储在索引0处
在阵列中。
2。使用.text()将该值添加到div中。
三。获取第二个值表单verge.viewportW()并将其存储在
数组的索引1。
四。用新值替换div中的旧值。
5个。只要数组中有新值，就执行此操作。
如果有人能够在注释正确的for循环的每一行时，用非常简单的措辞来描述这个问题，我想这将有助于我理解遍历数组的基本原理。
例如，我熟悉这样的for循环。在这里，购物清单中的所有项目都被赋予了done类。

for (var index = 0; index < shoppingList.length; index++){
    shoppingList[index].className = 'done';
}

我只是不太明白如何将它转换成一个值不断变化的数组，新旧输出。劈开我的头。。
解决方案：
this按https://jsfiddle.net/ccL30a26/3/

最佳答案

我不知道lab.js，但在您的尝试中，您尝试的javascript有一个错误。

function getVergeValues() {
   viewportWidth  = verge.viewportW() // Get the viewport width in pixels.
   viewportHeight = verge.viewportH() // Get the viewport height in pixels.

   var $width  = $( "<div class='w'></div>" );
   var $height = $( "<div class='h'></div>" );

   $('.w').text(viewportWidth  + 'px wide');
   $('.h').text(viewportHeight + 'px high');

   $( "body" ).append( $width, $height);
}

$(window).on('resize', getVergeValues);
$(document).ready(getVergeValues);

在这段代码中，您有两部分：
名为getVergeValues的函数
两个jquery调用window resize和document ready
在您的函数中有4个部分：
带边尺寸的计算
元素的构造
元素中文本的设置
在页面中添加元素
实际上，项目2和4只需要做一次，因为你不想再添加这些元素和再次。
在第一个jsfiddle中，每次调整大小时都必须重复项1和3。
因此，将元素2和4放在函数之外，可以使代码按照您想要的方式运行：https://jsfiddle.net/zfzq1crL/。
如果要将这些元素保留在函数中，则可以使仅在文档上调用的函数准备就绪：https://jsfiddle.net/tfqsjf2t/。
仍然需要在init函数中调用函数，以便在开始时元素中具有大小。