Question

我是第三天使用Javascript和jQuery，我正在使用Literal Object结构进行一些操作，以使代码更易读和可修改。好。问题......

我编写了一个脚本，用于在表单和按钮中插入dinamically输入以显示输入内容。例如：

jQuery('#add').click(function(){
   jQuery('#opts').append('<li><input type="text" name="i" value="i" /></li>');
});

jQuery('#view-list').click(function(){
    $itemsList = jQuery('#opts :input');
    console.log('there are ' + $itemsList.length + ' items');
    $itemsList.each(function(){
        console.log(jQuery(this).val());
    });
});

它正常工作，“添加”按钮插入项目，单击按钮显示项目。

问题在于我采用Literal Object的方法。例如，在一个大型应用程序中，这个脚本将是它的一小部分。在这种情况下，我这样做：

var sidebarManager = {

init : function(){
    sampleFunction0();
    sampleFunction1();
    sampleFunction2();  
},

sampleFunction0 : function(){

    jQuery('#add').click(function(){
        jQuery('#opts').append('<li><input type="text" name="insert" value="insert" /></li>');
    });

    jQuery('#view-list').click(function(){
        $itemsList = jQuery('#opts :input');
        console.log('there are ' + $itemsList.length + ' items');
        $itemsList.each(function(){
            console.log(jQuery(this).val());
        });
    });

},

sampleFunction1 : function(){ //code },

sampleFunction2 : function(){ //code }

}

jQuery(document).ready(function(){
    sidebarManager.init();
});

但在这种情况下，列表按钮仅显示通过init函数调用函数时列表中的项目。如果添加了新项目，则不会显示这些项目。

我对文字对象和封装解决方案的使用感兴趣，但我很困惑：P

任何建议，消化，WTF，或其他...... :) 感谢。

被修改

在2个含糊this的情况下会发生什么？例如：

sampleFunction0 : function(){
    jQuery('#add').click(function(){
        jQuery('#opts').append('<li><input type="text" name="insert" value="insert" /></li>');
    });

    jQuery('#view-list').click(function(){
        var $itemsList = jQuery('#opts input');
        console.log('there are ' + $itemsList.length + ' items');
        $itemsList.each(function(){
            console.log(jQuery(this).val());
            var test = this.sampleFunction1(); //conflict
        });
    });
},

在这种情况下，必要的呼叫功能1是这样的：

sidebarManager.sampleFunction1();

Answer 1

首先，您必须通过添加以下内容来修复init()函数中的javascript错误：

init: function() {
    this.sampleFunction0();
    this.sampleFunction1();
    this.sampleFunction2();
},

sampleFunction0，sampleFunction1和samplefunction2仅作为sidebarManager对象上的属性存在，因此您必须将它们作为该对象的属性引用。如果你正在浏览浏览器的错误控制台或调试控制台（显示javascript解释器错误），这应该很容易找到。

然后，我看到了其他一些应该清理的问题。首先，您使用的是未声明的变量，例如$itemsList。这使得它们默认为全局变量。我认为你不希望这样，它可能会导致你的代码出现问题（与其他代码冲突也是如此）。您应该在var函数内部首次使用它们，以使它们成为局部变量。隐式全局变量是意外错误的常见来源，并且是一件坏事。避免它们。

其次，我不认为你的选择器是理想的。而不是'#opts :input'，我认为您需要这个'#opts input'来获取#opts对象中包含的任何输入标记。两者都可以在某些情况下工作，但我认为第二个更好地代表你想要的东西，可能会更快一些。带有两个修复的结果代码如下所示：

sampleFunction0 : function(){

    jQuery('#add').click(function(){
        jQuery('#opts').append('<li><input type="text" name="insert" value="insert" /></li>');
    });

    jQuery('#view-list').click(function(){
        var $itemsList = jQuery('#opts input');
        console.log('there are ' + $itemsList.length + ' items');
        $itemsList.each(function(){
            console.log(jQuery(this).val());
        });
    });
},

Answer 2

好的，不是我的强项，但对我来说，如果不在你的初始调用者中添加this，我就无法使你的代码工作。

http://jsfiddle.net/QmUbx/2/

init: function() {
    this.sampleFunction0();
    this.sampleFunction1();
    this.sampleFunction2();
},

您的代码似乎运行良好。对不起，我没有增加太多，但我相信其他人可以使用小提琴来加入。

Answer 3

在你的init函数中，你应该这样做：

init : function(){
    this.sampleFunction0();
    this.sampleFunction1();
    this.sampleFunction2();  
}

jQuery：与文字对象方法有点混淆

被修改

3 个答案: