Question

这里我发布了一个jquery代码正在运行，但很少有线路对我来说不清楚。 js fiddle link

完整代码

HTML：

<form method="post" action="WebForm1.aspx" id="ctl00">
    <input type="submit" name="Button1" value="Fly DIV" id="Button1" class="toggleUPSContainer" />
</form>

CSS：

#UPSContainer{
    position: absolute;
    display: none;
    background:red;
    height:0;
    width:0;
}

的javascript：

$(document).ready(function () {
    var $els = [];
    var data = {
        "UPSContainer": {
            "height" : 100,
            "width" : 100
        },
        "isAnimating" : false
    };
    $els.window = $(window);
    $els.form = $('#ctl00');
    $els.toggleUPSButtons = $('.toggleUPSContainer');

    function addUPSOverlay(){
        $els.form.append('<div id="UPSContainer"></div>');
        $els.UPSContainer = $('#UPSContainer');
    }

    function getNewWindowCorner(){
        data.windowWidth = parseInt($els.window.width());
        data.windowHeight = parseInt($els.window.height());
        if($els.UPSContainer.is(':hidden')){
            $els.UPSContainer.css({
                top: data.windowHeight + 'px',
                left: data.windowWidth + 'px'
            });
        }else{
            $els.UPSContainer.css({
                left: ((data.windowWidth - data.UPSContainer.width) / 2) + 'px',
                top: ((data.windowHeight - data.UPSContainer.height) / 2) + 'px'
            });
        }
    }

    function containerOpenComplete(){
        // do what you want here when opening complete
    }

    function containerCloseComplete(){
        // do what you want here when closing complete
    }

    function toggleUPSOverlay(e){
        e.preventDefault();
        if(!data.isAnimating){
            if($els.UPSContainer.is(':hidden')){ // currently closed so open
                $els.UPSContainer.show();
                $els.UPSContainer.animate({
                        left: ((data.windowWidth - data.UPSContainer.width) / 2) + 'px',
                        top: ((data.windowHeight - data.UPSContainer.height) / 2) + 'px',
                        height: data.UPSContainer.height + 'px', 
                        width: data.UPSContainer.width + 'px'
                }, 200, function(){
                    containerOpenComplete();
                });
            }else{ // currently open so close
                $els.UPSContainer.animate({
                        left: data.windowWidth + 'px',
                        top: data.windowHeight + 'px',
                        height: 0 + 'px', 
                        width: 0 + 'px'
                    }, 200,
                    function () {
                        $els.UPSContainer.hide();
                        containerCloseComplete();
                    });
            }
        }
    }

    function attachEvents(){
        $els.window.on('resize', getNewWindowCorner);
        $els.toggleUPSButtons.on('click', toggleUPSOverlay);
    }

    function initialize(){
        addUPSOverlay();
        getNewWindowCorner();
        attachEvents();
    }

    initialize();
});

此功能的代码不清楚

function getNewWindowCorner(){
        data.windowWidth = parseInt($els.window.width());
        data.windowHeight = parseInt($els.window.height());
    }

只看 windowWidth＆amp; windowHeight药水

var data = {
        "UPSContainer": {
            "height" : 100,
            "width" : 100
        },
        "isAnimating" : false
    };

数据已声明为对象，它具有height, width & isAnimating etc之类的属性，但我们如何才能将两个名为windowWidth & windowHeight的新属性添加到数据对象中？

只是看到下面的代码似乎我们可以在运行时在javascript中向任何具有任何名称的对象添加任何属性，这里我们将值存储到windowWidth & windowHeight属性。

data.windowWidth = parseInt($els.window.width());
data.windowHeight = parseInt($els.window.height());

所以只需看看我的整个代码并告诉我这两个属性来自哪里 windowWidth＆amp; windowHeight？谢谢

编辑1

需要更多帮助。它在js var $els = [];中被称为什么？它是数组还是对象？ var $els = []; and var els = {};之间有什么区别？如果这是数组var $els = [];，那么如何将任何东西推送到数组中就像这样$els.window = $(window); or $els.body = $('body');。请帮我理解小样本的用法。感谢

Answer 1

似乎我们可以在运行时在javascript
中将任何属性添加到任何具有任何名称的对象

是。您可以。您只需分配新值。

这两个属性来自windowWidth＆amp; WINDOWHEIGHT

从您询问的代码中。赋值创建了这些属性。

Answer 2

对于普通的，你可以动态添加它们。它们不必从一开始就用对象声明。如果他们是，他们只会被覆盖。

所以你可以从一开始就添加你想要的一切......

var data = {
  "UPSContainer": {
    "height": 100,
    "width": 100
  },
  "isAnimating": false
};

..或者随时创建

var data = {};

data.UPSContainer = {};

data.UPSContainer.height = 100;
data.UPSContainer.width = 100;

data.isAnimating = false;

data.windowWidth = parseInt($els.window.width());
data.windowHeight = parseInt($els.window.height());

Answer 3

在ECMAscript3和ECMAScript5中，任何属性都可以添加到任何对象，通过点分配或通过数组类型表示法。

data.windowWidth = parseInt($els.window.width());

或

data['windowWidth'] = parseInt($els.window.width());

为数据对象创建'windowWidth'属性。在ECMA5中，可以通过以下函数更改此行为：

Object.preventExtensions( obj )

您可以使用Object.isExtensible( obj )来检查该对象的当前行为。如果您尝试将属性添加到已阻止扩展的此类对象，则会在严格模式下出现错误。

对于你的第二个问题，在javascript数组中也是一个具有属性的对象，date也是一个对象，因此你可以为数组添加属性。

需要了解jquery代码的一部分吗？

编辑1

3 个答案: