Question

In my project I create modules for each webpage and add to a base object called View:

App.js

var View = (function()  {

    var View  = function()  {
        this.attributes = {
            baseUrl : '',
            urls : {}
        };
    };

    View.prototype.setUrl = function(url)   {
        this.attributes.baseUrl = url;
    };

    View.prototype.getUrl = function()  {
        return this.attributes.baseUrl;
    };

    return new View();

})();

SearchView.js

var View = View || {};

var SearchView = View.SearchView = (function()  {

    var Private = {
        search : function(url)  {},
        loadSearchResult : function()   {},
        clearSearchForm : function()    {}
    };

    Private.search = function(url)  {
        ajax(url,...);
        this.loadSearchResult();
    };

    var SearchView = function() {
        this.settings = {};
    };

    SearchView.prototype.loadEventBindind = function()  {
        $(document)

        .on('click','#search-button', function()    {
            Private.search(View.baseUrl);
        })

        .on('click','#reset-search', function() {
            Private.clearSearchForm();
        });
    };

    return new SearchView();

})();

search.html

<script type="text/javascript" src="media/scripts/Modules/App.js"></script>
<script type="text/javascript" src="media/scripts/View/SearchView.js"></script>
<script type="text/javascript">
    View.setUrl('http://www.set.com/');
    View.SearchView.loadEventBindings();
</script>

This code works properly in Chrome and Firefox, but throws an error in IE:

‘View.SearchView‘ is null or not an object

Does IE not support this way of creating objects?

Answer 1

There are few things you should do:

You have a weak point in that your App.js script could overwrite View object created by SearchView.js.

• Don’t use one variable as both namespace and class. It’s counter intuitive.
• If you’re already writing singletons, there is no need to use prototype pattern, although there’s nothing wrong with it. You won’t save any memory though.

---

If you’re sticking your guns to using View as class and namespace, make changes like this to prevent View being overwritten.

var View = View || {};
var ViewTmp;
$.extend(ViewTmp = (function()  {

    var View  = function()  {
    ...
  ...
})(), View);
View = ViewTmp;

This script assumes that you are using jQuery (because of $.extend method).