Javascript 模式设置差异

Question

我正在使用 jQuery 开发一个小型的单页滚动站点。作为 JavaScript 的新手，我遇到过许多其他开发人员组织代码的不同方式。通过一个带有小型 javascript 交互的简单站点，我想知道我在其他站点上看到的以下代码片段之间有什么区别。

第一的

var NS = NS || NS
NS = {
    init: function() {},
    buildNav: function() {},
    scrollToSection: function() {}
}

$( document ).ready( NS.init() );

第二

var NS = NS || NS;
NS = new (function() {
    var name = 'Basic';
    var self = this;
    self.getName = function() { return name; };
});
NS.Home = new (function() {
    // variables..are these private or public
    var self = this;
    self.init = function() {
      // initiate
    }

    self.scrollToSection = function() {
      // scroll section
    }

    // public or private method?
    function buildNav() {
    }
});

$(document).ready(function() { NS.Home.init(); });

第三

var NS = NS || NS;

NS.Home = new function() {
  var foo = $('#htmlelement');

  this.scrollToSection() {
    // scroll section
  };
  this.init = function() {
    buildNav();
  };

  function buildNav() { }
}
$( document ).ready( NS.Home.init() );

向前

(function($){
    $.fn.homepage = function() { 
        function buildNav() { }
        function init () { } 
    };
    $.fn.otherpage = function() {
        function doSomething() { }
        function init () { }
     }
})(jQuery);

$(document).ready(function () {
    $('#homepage-element').homepage();
}

Answer 1

var NS = NS || NS;如果传递的值为空或未定义，此行将 NS 初始化为默认值。这三个都创建了一个单例对象 NS - 就像一个命名空间。

第一、第二和第三解释了不同风格的面向对象编程实践。

首先，NS 对象是通过对象文字符号创建的，因此它的所有函数都是公开的，您将为 NS 创建的变量也将是公开的。

第二个和第三个非常相似，除了第二个更凌乱，第三个更清晰。
Second 和 Third 都在 NS 对象上声明了一些公开的方法(通过匿名构造函数创建)和一些私有(private)函数。

Second 和 Third 通过使用匿名构造函数动态声明一个属性。

您应该阅读一些关于面向对象的 javascript 和设计模式的文章。
从 this one 开始