Question

我试图通过在我的脚本中使用命名空间来定位一个jquery选择器

，并且还将函数设为私有，但我想我仍然缺少一些东西，任何人都可以指导。如果我尝试在最后一行添加断点而不是使用devtools来访问MyUtility.Selectors.ColorCss.myBorder（）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Selectors</title>


</head>
<body>
<ul>
    <li class="test">First</li>
    <li>Second</li>
    <li>Third</li>
</ul>
<!--<script>
    $('document').ready(function(){
        $('li.test').css('color','green')
    })
</script>-->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
    var customModule = (function () {
        var MyUtility = {
            Selectors: {
                ColorCss: function () {
                    var myBorder = function () {
                        $('li').css('color', 'red')
                        console.log('hello')
                    }
                    return{
                        myBorder: myBorder
                    }
                }()
            }
        }
    }())
</script>

</body>
</html>

Answer 1

正如你所说It works if i try by adding a breakpoint on the last line and than use devtools to access MyUtility.Selectors.ColorCss.myBorder()

这是你的代码：

var customModule = (function () {
    var MyUtility = {
          Selectors: {
            ColorCss: function(){
                   var myBorder = function(){ 
                        $('li').css('color', 'red');
                        console.log('hello');
                   }
                   return{ myBorder: myBorder }
            }()
          } // Selectors
    } // MyUtility
}())

上面的代码可以写成：

function myBorderFunc() { $('li').css('color', 'red'); console.log('hello');}
var selectorObj = { ColorCss : function(){ return{ myBorder: myBorderFunc } }()};
var MyUtility = { Selectors: selectorObj};
var customModule = ( function(){ MyUtility }() );

这显示了问题

var customModule是一个函数表达式，不返回任何内容，因此undefined
由于customModule未定义，因此无法使用customModule.MyUtility
正如您所说，您可以致电MyUtility.Selectors.ColorCss.myBorder()，因为MyUtility是一个具有财产Selectors的对象，依此类推

你可以用这个例子来测试它：

// undefined since nothing is returned
var bar = (function(){ {Foo: "i am foo"} }()); 

// returns foo and can be used bar.Foo ---> "i am foo"
var bar = (function(){ return {Foo: "i am foo"} }());

要“修复代码”，请返回MyUtility

var customModule = (function () {
    var MyUtility = {
          Selectors: {
            ColorCss: function(){
                   var myBorder = function(){ 
                        $('li').css('color', 'red');
                        console.log('hello');
                   }
                   return{ myBorder: myBorder }
            }()
          } // Selectors
    } // MyUtility
    return MyUtility;
}())

这样您可以像customModule.Selectors.ColorCss.myBorder()一样访问它。

有关Function expressions vs. Function declarations

无法使用Namespace，Modular，Private来定位选择器

1 个答案: