了解 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

Answer 2

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

如果 HMS 未定义，则 HMS 将等于一个空对象，否则按原样使用 HMS（在您的情况下，HMS 是一个对象）。

2) 看到这个 $(function () {}) ();

它叫IIFE。

3) 为什么喜欢 HMS.PatientModel = function () { };

HMS 是一个对象，只是将其属性与值相加。价值可以是任何东西。

4）从您在另一个答案中的评论来看，为什么他们没有定义模块名称？

他们已将模块名称定义为 Module。见var Module = (function(){}());