Mẫu đơn JavaScript - sự khác biệt?

Question

Điều này có vẻ giống như một câu hỏi ngớ ngẩn, nhưng những khác biệt chức năng, nếu có, giữa hai mẫu này là gì? Không có sự khác biệt chức năng thực sự và nó chỉ là vấn đề sở thích của tổ chức? Một số trường hợp nào khi bạn muốn sử dụng cái này chứ không phải cái kia? Tôi đang cố gắng tìm một mẫu thiết kế mà tôi cảm thấy thoải mái nhất. Cảm ơn!

$(function(){ 
    Core.init(); 
}); 

var Core = { 

    init: function() { 
     //some initialization code here 
    } 

    _plugins: function() { 
     //instantiate some plugins here 
    } 

    _display: function() { 
     //some more code here 
    } 

    _otherfunctions: function() { 
     .... 
    } 

} 

và

$(function(){ 
    Core.init(); 
    Plugins.init(); 
    Display.init(); 
}); 

var Core = { 

    init: function() { 
     //some initialization code here 
    } 
} 

var Plugins = { 
    init: function() { 
     //start plugins 
    } 

    _modify: function() { 
     //more code 
    } 
} 

var Display = { 
    init: function() { 
    //some init code 
    } 
} 

Answer 1

Sự khác biệt tổ chức chính là mô hình đầu tiên gây ô nhiễm không gian tên toàn cầu ít.

Nếu bạn muốn tách riêng mã của bạn thành các gói như trong ví dụ thứ hai, sau đó là cách tốt hơn, trong ví dụ của bạn, sẽ là:

$(function(){ 
    Core.init(); 
}); 

var Core = { 

    init: function() { 
     //some initialization code here 
    }, 

    plugins: { 
     init: function() { 
     //start plugins 
     } 

     _modify: function() { 
     //more code 
     } 
    }, 

    display: { 
     init: function() { 
     //some init code 
     } 
    } 
} 

và tham khảo các gói thông qua namespace chính của bạn:

Core.plugins.init(); 

Tôi không nói rằng đây là cách tốt nhất để làm như vậy nói chung (một số vấn đề ưu tiên, như thành viên và phương pháp riêng), nhưng trong ví dụ của bạn - tôi thích tôi hơn.

Answer 2

Hãy xem khung công tác này mà tôi đã xây dựng. Dường như làm việc khá tốt.

var gtg = gtg || {}; 

(function() { 
    var _this = this; 

    this.registerNamespace = function (namespace) { 
     var root = window, 
      parts = namespace.split("."), 
      i; 

     for (i = 0; i < parts.length; i++) { 
      if (typeof root[parts[i]] === "undefined") { 
       root[parts[i]] = {}; 
      } 
      root = root[parts[i]]; 
     } 

     return this; 
    }; 

}).call(gtg); 

// Register Namespaces 
gtg.registerNamespace("gtg.core"); 
gtg.registerNamespace("gtg.infoBar"); 
gtg.registerNamespace("gtg.navBar"); 
gtg.registerNamespace("gtg.tabBar"); 
gtg.registerNamespace("gtg.utils"); 

(function() { 
    var _this = this; 

    this.initialize = function() { }; 

}).call(gtg.core); 

(function() { 
    var _this = this, 
     $container, 
     $messageContainer, 
     $message; 

    function configureMessage(message) { 
     var className = "info", 
      types = ["error", "info", "warning"]; 

     for (var i in types) { 
      $message.removeClass(types[i]); 
     } 

     switch (message.MessageType) { 
      case 0: 
       className = "error" 
       break; 
      case 1: 
       className = "info" 
       break; 
      case 2: 
       className = "warning" 
       break; 
     } 

     $message.addClass(className).html(message.Message); 
    } 

    this.initialize = function() { 
     $container = $(".info-bar-container"); 
     $messageContainer = $container.find(".message-container"); 
     $message = $messageContainer.find(".message"); 

     $messageContainer.find(".close a").bind("click", function() { 
      _this.close(); 
     }); 
    }; 

    this.close = function() { 
     $messageContainer.fadeOut(300, function() { 
      $container.slideUp(300); 
     }); 
    }; 

    this.show = function (message) { 
     if ($container.css("display") !== "none") { 
      $messageContainer.fadeOut(300, function() { 
       configureMessage(message); 
       $messageContainer.fadeIn(300); 
      }); 
     } else { 
      $container.slideDown(300, function() { 
       configureMessage(message); 
       $messageContainer.fadeIn(300); 
      }); 
     } 
    }; 

}).call(gtg.infoBar); 

(function() { 
    var _this = this; 

    function initializeNavBar() { 
     var paths = window.location.pathname.split("/"), 
      navId; 

     $("#nav-bar ul.top-nav li a[data-nav]").bind("click", function() { 
      _this.switchNav($(this)); 
     }); 

     if (paths[1] != "") { 
      switch (paths[1]) { 
       case "Customer": 
        navId = "customers-nav"; 
        break; 
       case "Order": 
        navId = "orders-nav"; 
        break; 
       case "Product": 
        navId = "products-nav"; 
        break; 
       case "Report": 
        navId = "reports-nav"; 
        break; 
       case "Tool": 
        navId = "tools-nav"; 
        break; 
      } 

      if (navId != "") { 
       _this.switchNav($('#nav-bar ul.top-nav li a[data-nav="' + navId + '"]')); 
      } 

     } else { 
      _this.switchNav($('#nav-bar ul.top-nav li a[data-nav="home-nav"]')); 
     } 
    } 

    this.initialize = function() { 
     initializeNavBar(); 
    }; 

    this.switchNav = function (navItem) { 
     $("#nav-bar ul.top-nav li a[data-nav]").each(function (i) { 
      $(this).removeClass("selected"); 
      $("#" + $(this).data("nav")).hide(); 
     }); 

     navItem.addClass("selected"); 
     $("#" + navItem.data("nav")).show(); 
    }; 

}).call(gtg.navBar); 

(function() { 
    var _this = this; 

    this.initialize = function() { 
     $(".tab-bar ul li a[data-tab-panel]").bind("click", function() { 
      _this.switchTab($(this)); 
     }); 
    }; 

    this.switchTab = function (tab) { 
     $(".tab-bar ul li a[data-tab-panel]").each(function (i) { 
      $(this).removeClass("selected"); 
      $("#" + $(this).data("tab-panel")).hide(); 
     }); 

     tab.addClass("selected"); 
     $("#" + tab.data("tab-panel")).show(); 
    }; 

}).call(gtg.tabBar); 

(function() { 
    var _this = this; 

    this.focusField = function (fieldId) { 
     $("#" + fieldId).select().focus(); 
    }; 

    this.loadJQTemplate = function (templateName, callback) { 
     $.get("/Content/JQTemplates/" + templateName + ".html", function (template) { 
      callback(template); 
     }); 
    }; 

}).call(gtg.utils); 

$(document).ready(function() { 
    gtg.core.initialize(); 
    gtg.infoBar.initialize(); 
    gtg.navBar.initialize(); 
    gtg.tabBar.initialize(); 
});