使用JavaScript揭示原型模式,我如何命名原型中包含的函数?

Ken*_*mer 2 javascript jquery design-patterns prototype namespaces

我正在使用Revealing Prototype Pattern并且有两个不同的原型,我将它放入同一个JavaScript文件中.这些链接是我发现的与此相关的文章. http://bit.ly/U83hdg,http://bit.ly/VmJ71h.

我的印象是,这些操作会像原子类一样运行,其中与一个相关的功能将不知道另一个中的功能.

例如,这两个原型都具有"init"和"set"功能.我在浏览器中看到的行为是,即使代码引用了第一个原型名称,也会执行最后一个版本的"init".

这是我的两个原型中的通用精简代码.

var operationA = function (control, settings) {
   this.control = control;
   this.settings = settings;
};

operationA.prototype = function () {
   init = function () {
      // do something
      return this;
   }
   set = function () {
      // do something
      return this;
   };

   return {
      init: init,
      set: set
   };
}

var operationB = function (control, settings) {
   this.control = control;
   this.settings = settings;
};

operationB.prototype = function () {
   init = function () {
      // do something
      return this;
   }
   set = function () {
      // do something
      return this;
   };

   return {
      init: init,
      set: set
   };
}
Run Code Online (Sandbox Code Playgroud)

这就是我实例化第一个对象的方式.

var objectASettings = {
   property1: 48,
   property2: 37
};
var objectA = new operationA('#mySelector', objectASettings);
objectA.init().set();
Run Code Online (Sandbox Code Playgroud)

当上面运行时,正在执行来自操作B的原型的init和set函数,而不是从操作A的原型执行init和set函数.

我假设这些原型基本上命名为其包含的函数.我是否需要为operationA和operationB创建唯一的公共函数名称(如initA,setA,initB,setB)?

有没有办法自我包含和/或命名这些公共函数,所以我可以在同一个文件中公开相同的init操作名称并在2个不同的原型上设置?

谢谢你的帮助.

Dan*_*lin 7

让它运作的几件事:

  1. 在原型函数中的第一个成员之前添加var.
  2. 用逗号分隔每个成员(你当然可以把var放在每个成员面前,但我喜欢把它保持干净......虽然个人偏好).
  3. 必须自行调用分配给原型的函数才能使模式正常工作.

这是一个适合您的示例:

<html>
<head>
   <script>
        var operationA = function (control, settings) {
           this.control = control;
           this.settings = settings;
        };

        operationA.prototype = function () {
           var init = function () {
              // do something
              return this;
           },
           set = function () {
              alert('set A');
              return this;
           };

           return {
              init: init,
              set: set
           };
        }();

        var operationB = function (control, settings) {
           this.control = control;
           this.settings = settings;
        };

        operationB.prototype = function () {
           var init = function () {
              // do something
              return this;
           }, 
           set = function () {
              alert('set B');
              return this;
           };

           return {
              init: init,
              set: set
           };
        }();

        window.onload = function() {
            var objectASettings = {
               property1: 48,
               property2: 37
            };
            var objectBSettings = {
               property1: 50,
               property2: 50
            };
            var objectA = new operationA('#mySelector', objectASettings);
            objectA.init().set();

            var objectB = new operationB('#foo', objectBSettings)
            objectB.init().set();
        }
   </script>
</head>
Run Code Online (Sandbox Code Playgroud)