javascript - 理解javascript中的模块设计模式

Question

我不太擅长 JavaScript。所以当我现在看到一段代码时，很多地方都不清楚。所以请有人帮助我理解。

我知道人们通过下面的方式声明他们的模块

var Module = (function () {
  var privateMethod = function () {
    //A Private Method
    var privatemember; // scope is only private method
  };
  return {
    publicMethod: function () {
      //you can call private method here.
    }
  };
})();

Module.publicMethod(); //works

刚刚我看到了另一个有点不同的模块模式代码，如下所示，其中使用了 Knockout.js。

var HMS = HMS || {};

$(function () {

    HMS.PatientModel = function () {
        this.Patient_Name = ko.observable();
        this.Patient_Address = ko.observable();
    };

    HMS.PatientViewModel = function () {
        var patient = ko.observable(),
        loadPatient = function () {
            var newModel = new HMS.PatientModel();
            newModel.Patient_Name("Premkumar");
            patient(newModel);
        };
        return {
            patient: patient,
            loadPatient: loadPatient
        };
    } ();


    HMS.PatientViewModel.loadPatient();

    ko.applyBindings(HMS.PatientViewModel);

});

1) 这个代码是什么 var HMS = HMS || {}; ?

2) 请参阅此$(function () {}) ();

为什么模块没有特定的名称。请参阅我的第一个代码，我为模块命名，如下所示 var Module = (function () {}) ()

3) 在模块代码内部，每个函数名称都以 HMS 开头............为什么像 HMS.PatientModel = function () { };

请帮助我明智地理解第二组代码点。谢谢

Answer 1

var HMS = HMS || {}; 

该表达式将 var HMS 定义为 HMS 或空对象(如果未定义)，则为简写

if(HMS) {
  var HMS = HMS;
} else {
  var HMS = {};
}

2) 您正在从 IIFE 创建对象

如果对象不存在，它们将声明并清空对象，并在其下面的函数执行后用方法/函数装饰它。 与此相同:

var HMS = {
   PatientModel : function () {},
   PatientViewModel : function () {}, 
}

3)这就是他们在函数内部使用 HMS 的原因。

var HMS = {};
HMS.PatientModel = function() {};
HMS.PatientViewModel = function() {};

您应该阅读 Closures , IIFE ，和How to “properly” create a custom object in JavaScript?

关闭的示例和简短说明:

闭包是指您有权访问不在函数词法范围内的变量。例如，在另一个函数内声明的函数将有权访问父变量。

例如:

(function(){
    var a = 1;

    function mainFunction() {

        function innerFunction() {
            var b = 2

            function subFunction() {
                console.log(a); //We have access to "a" here.
                console.log(b); //We have access to "b" here.
            }

           subFunction();
        }


        innerFunction();
        console.log(a); //We have access to "a" here.
        console.log(b); //We dont have access to "b" here. //error
    }
    mainFunction();

})();
console.log(a);  //We dont have access to "a" here. //error