Javascript 对象文字和 jQuery答案

【问题标题】：Javascript Object Literals and jQueryJavascript 对象文字和 jQuery
【发布时间】：2010-09-07 08:20:47
【问题描述】：

我在此处更新了脚本以提供更好的示例。对于 $header，我现在有一个匿名函数返回 $("#header")。虽然这可行，但我确信它没有效率，因为它每次使用它都会调用 $header - 所以它与在整个代码中使用 $("#header") 相同。

我真正想要的是将 $("header") 存储在一个变量中。当我尝试使用 $header2 （如下）执行此操作时，它失败了。 #header 是红色而不是蓝色。

当我使用 firebug 输出 lib.page.$header2.selector 时正确显示 #header。如您所见，调用 lib.page.init 的脚本位于 DOM 的底部。

有什么想法吗？

<script type="text/javascript">

        var lib = {
            page : {

                $header  : function() { return $("#header")},
                $header2 : $("#header"),

                init: function() {

                    lib.page.$header().css("background","red");
                    lib.page.$header2.css("background","blue");
                    console.log(lib.page.$header2.selector);

                }

            }
        }

</script>
</head>
<body>

    <div id="wrapper">
        <div id="header">
            <em>Example!</em>
        </div>  
    </div>      

    <script type="text/javascript">
        $(function() { lib.page.init(); });
    </script>

</body>

【问题讨论】：

标签： javascript jquery object-literal

【解决方案1】：

因为当您定义$header : $('#header') 时，该元素不可用？当你打电话给lib.page.init 是？我不确定你什么时候打电话给lib.page.init，但我敢打赌它在$(document).ready()，对吧？并且在 dom 准备好之前定义对象字面量。

好的，当您想将其分配给 $header 时，您的 div#header 不可用，您有两个选择，我将首先向您展示最佳选择。这就是我所说的“将所有脚本放在底部”！

<head>
    <!-- dont put scripts here if you can avoid it, it's bad! -->
</head>
<body>

    <div id="wrapper">
        <div id="header">
            <em>Example!</em>
        </div>  
    </div>      


    <!-- keep scripts at the end of the page just before the </body> tag -->
    <script type="text/javascript">

            var lib = {
                page : {
                    // div#header is available
                    $header  : $("#header"),
                    init: function() {
                        lib.page.$header().css("background","red");
                    }

                }
            }
            // you don't need onDomReady anymore.
            lib.page.init();

    </script>

</body>

如果您想将脚本保留在标头中，另一种选择是在 onDomReady 调用中分配 $header。

<script>
    // create lib etc here

    $(function(){ // this is an onDomReady call in jQuery
        lib.page.$header = $('#header');
        lib.page.init();
    });
</script>

【讨论】：

当我在 Firefox 中使用 console.log(lib.page.$header) 时，我得到一个返回的 jQuery 对象并且选择器是#header。有什么想法吗？
jQuery 对象的存在并不能保证它填充了 DOM 元素。你需要检查它的长度。此外，在

【解决方案2】：

“发生这种情况是因为变量是在解释脚本时实例化的。因此，在解析器获取脚本时，$("#header") 还没有在 DOM 中。"

【讨论】：