CODEWITHSUNDEEP
javascriptjquery
kam
kam

Reputation: 425

Unable to target a selector using Namespace ,Modular, Private

i am trying to target a jquery selector

  • by using namespaces in my script and also making function private but i think i am still missing something here, can anyone guide. It works if i try by adding a breakpoint on the last line and than use devtools to access 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>

    Upvotes: 1

    Views: 70

    • Answers (1)

    surfmuggle
    surfmuggle

    Reputation: 5944

    As you said It works if i try by adding a breakpoint on the last line and than use devtools to access MyUtility.Selectors.ColorCss.myBorder()

    This is your code:

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

    Your code above can be written as: 

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

    This shows the problem

    1. var customModule is a function expression that does not return anything and it is therefore undefined
    2. since customModule is undefined you can not use customModule.MyUtility
    3. as you said you can call MyUtility.Selectors.ColorCss.myBorder() since MyUtility is an object that has a property Selectors and so on

    you can test it out with this example:

    // 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"} }());

    To 'fix your code' return 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;
}())

    This way you can access it like this customModule.Selectors.ColorCss.myBorder().

    More info about Function expressions vs. Function declarations

    Upvotes: 1

    Related Questions