了解javascript中的模块设计模式 [英] Understanding module design pattern in javascript

问题描述

我在JavaScript方面不是很好。所以当我现在看到一段代码时，很多区域都不清楚。所以有人请帮助我理解。

I am not very good in JavaScript. so when I saw a block of code now then many area is not clear. So someone please help me to understand.

我知道以下方式人们宣布他们的模块

I know this below way people declare their module

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 。

Just I saw another bit different code for module pattern as follows where knockout.js is used.

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 || {}; ？

1) What is this code var HMS = HMS || {}; ?

2）看到这个 $（function（）{}）（）;

为什么模块没有特定的名称。看到我的第一个代码，我就像这样给我的模块命名 var Module =（function（）{}）（）

Why module has no name specific. see my first code where I give a name to my module like this way var Module = (function () {}) ()

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

3) Inside module code every function name has started with HMS.............why like HMS.PatientModel = function () { };

请帮我理解第二组代码点。谢谢

Please help me to understand the second set code point wise. Thanks

推荐答案

var HMS = HMS || {}; 

该表达式将var HMS定义为HMS或空对象（如果未定义）是一个简写

that expression defines the var HMS to HMS or empty object if it is not defined is a short hand for

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

2）您正在从IIFE创建对象

2) You are creating an object from an IIFE

如果它们不存在，它们是声明和空对象，并且一旦执行了下面的函数，就用方法/函数进行装饰。
与此相同：

They are declaring and empty object if it does not exist, and decorating it with the methods/functions once the function below its executed. is the same as this:

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

3）那个这就是他们在函数中使用HMS的原因。

3) And that is why they use HMS inside the function.

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

您应该阅读闭包， IIFE 和如何正确创建自定义JavaScript中的对象？

关闭的示例和简短说明：

Sample and short explanation of closure:

关闭就在你的时候可以访问不在函数词法范围内的变量例如，在另一个函数内声明的函数可以访问父变量。

A closure is when you have access to variables that are not in the lexical scope of the function For example, a function declared inside another function, will have access to the parent variables.

例如：

(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

这篇关于了解javascript中的模块设计模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！