Question

有人可以解释为什么这不符合我认为应该的方式（或者我忽视的方式）。

function Pane(data) {
    var state = {
        show: function(data) {
            var pane = document.querySelector('.pane[data-content='+data.target+']');
            pane.classList.add('active');
        },
        hide: function(data) {
            var pane = document.querySelector('.pane[data-content='+data.target+']');
            var paneSibling = $(pane.parentNode.childNodes);
            paneSibling.each(function(sibling) {
                if(check.isElement(sibling)) {
                    var isActive = sibling.classList.contains('active');
                    if(sibling != pane && isActive) {
                        sibling.classList.remove('active');
                    };
                };
            });
        }
    }
    return state;
}

所以我可以控制日志Pane(arg).show/hide并将它作为一个函数记录，那么为什么当我调用Pane(arg).show时它没有做任何事情呢？对象中的函数工作（在自己的函数中构造函数之外）。

Answer 1

该函数返回state对象，因此它永远不会返回构造的对象，即使与new一起使用也是如此。由于state包含这些方法，因此您只需调用该函数并立即调用返回对象上的其中一个方法。

现在，如果您希望show和hide能够通过关闭自动访问data，那么由于您正在影响，它无法正常工作通过声明方法参数来变量。你可以这样做：

function Pane(data) {
    var state = {
        show: function() {
            var data = data || arguments[0];
            var pane = document.querySelector('.pane[data-content='+data.target+']');
            pane.classList.add('active');
        },
        hide: function() {
            var data = data || arguments[0];
            var pane = document.querySelector('.pane[data-content='+data.target+']');
            var paneSibling = $(pane.parentNode.childNodes);
            paneSibling.each(function(sibling) {
                if(check.isElement(sibling)) {
                    var isActive = sibling.classList.contains('active');
                    if(sibling != pane && isActive) {
                        sibling.classList.remove('active');
                    };
                };
            });
        }
    }
    return state;
}

然后你可以像这样使用它：

Pane({}).show();

或者像这样：

var p = Pane();
p.show();

或者在需要时强制使用新参数：

p.show({foo:'bar'});

Answer 2

您将覆盖每个函数中的原始参数。所以你要做的是找到属性为data-content='undefined'

的元素

这显然不起作用。

所以要解决这个问题，你应该只删除show / hide函数中的data参数。

这是plnkr显示问题并修复。

JavaScript：不调用构造函数

2 个答案: