javascript - 无法使用命名空间，模块化，私有(private)来定位选择器

我试图通过在脚本中使用名称空间来定位一个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>

最佳答案

如您所说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的更多信息