Javascript:更好的代码/更好的设计帮助

Javascript:更好的代码/更好的设计帮助,javascript,prototype,Javascript,Prototype,我一直在努力阅读和理解更多关于Javascript更好的代码和设计的内容,实际上缺乏明确描述以不同于大多数在线代码的方式创建代码的好处/用途的教程 我遇到了下面的代码(见下文),并了解了如何将函数分配给变量,但我仍在努力理解其中的好处/如何利用这一优势 这是原型设计,使用闭包,还是仅仅是一种简洁的风格化方式,而不是按照正常意义上的方式: Function doThis(el, type, fn){ ... } 我的主要问题是你为什么要使用下面的方法,以及它的好处是什么 提前感谢您的帮助和耐心

我一直在努力阅读和理解更多关于Javascript更好的代码和设计的内容,实际上缺乏明确描述以不同于大多数在线代码的方式创建代码的好处/用途的教程

我遇到了下面的代码(见下文),并了解了如何将函数分配给变量,但我仍在努力理解其中的好处/如何利用这一优势

这是原型设计,使用闭包,还是仅仅是一种简洁的风格化方式,而不是按照正常意义上的方式:

Function doThis(el, type, fn){ ... }
我的主要问题是你为什么要使用下面的方法,以及它的好处是什么

提前感谢您的帮助和耐心

var addEvent = function() {
  if (window.addEventListener) {
    return function(el, type, fn) {
      el.addEventListener(type, fn, false);
    };
  } else if (window.attachEvent) {
    return function(el, type, fn) {
      var f = function() {
        fn.call(el, window.event);
      };
      el.attachEvent('on' + type, f);
    };
  }
}();

来源:

这是一种编写函数的简洁方式。它不是闭包,就像一个普通函数一样。这种声明函数的方式真正开始变得酷的是,编写面向对象的javascript变得更容易。举个例子:

var COMMON = {};
COMMON.Util = {};
COMMON.Util.Sort = function(aArray,fCompare){...};

列出的函数还展示了javascript的另一个很酷的方面,函数可以被传递/返回,这导致了一些很酷的编程技术。

这是一种编写函数的好方法。它不是闭包,就像一个普通函数一样。这种声明函数的方式真正开始变得酷的是,编写面向对象的javascript变得更容易。举个例子:

var COMMON = {};
COMMON.Util = {};
COMMON.Util.Sort = function(aArray,fCompare){...};
列出的函数还展示了javascript的另一个很酷的方面,函数可以被传递/返回,这导致了一些很酷的编程技术

  • 闭包——即当您访问一个超出范围但细节由环境处理的变量时
  • 原型化——即在向对象的基类添加函数或
返回函数的Javascript函数可能很有用。例如,如果希望代码的行为根据运行时上下文进行更改,可以通过让一个函数动态生成另一个函数来相当干净地实现

这就是说,就像许多聪明的代码技术一样,它让别人很难了解你在做什么。因此,维护变得很麻烦,您也可能会产生一些难以调试的问题。我更喜欢前者而不是后者,除非有真正独特的理由这样做

不确定我是否回答了你的问题,但我感觉很好……

这不是

  • 闭包——即当您访问一个超出范围但细节由环境处理的变量时
  • 原型化——即在向对象的基类添加函数或
返回函数的Javascript函数可能很有用。例如,如果希望代码的行为根据运行时上下文进行更改,可以通过让一个函数动态生成另一个函数来相当干净地实现

这就是说,就像许多聪明的代码技术一样,它让别人很难了解你在做什么。因此,维护变得很麻烦,您也可能会产生一些难以调试的问题。我更喜欢前者而不是后者,除非有真正独特的理由这样做


不确定我是否回答了你的问题,但我感觉很好……

这看起来像是一种速度优化,而不是简单地定义函数

想象一下你有

Function addEvent(el, type, fn){
   if (window.addEventListener) {
      el.addEventListener(type, fn, false);
   } else if (window.attachEvent) {
      var f = function() {
         fn.call(el, window.event);
       };
      el.attachEvent('on' + type, f);
   }
}
这是一个跨浏览器功能,用于添加与您发布的示例相同的事件。当您有数千个addEvent调用时,就会出现差异

在您发布的示例中,函数在开始时对每种浏览器类型进行了“简化”和“具体化”(注意末尾的“();”)

你会得到任何一个

var addEvent = function(el, type, fn) {
  el.addEventListener(type, fn, false);
};

取决于浏览器。选择之后将永远不会重新评估(这将是无用的,因为浏览器在执行期间不会更改;-)。因此,每次调用addEvent函数时,该函数都避免了1或2次测试!对于像addEvent这样的大量使用的函数,这可能会有所不同

我希望这能帮助你


杰罗姆·瓦格纳(Jerome Wagner)

这看起来像是一种速度优化,而不是简单地定义函数

想象一下你有

Function addEvent(el, type, fn){
   if (window.addEventListener) {
      el.addEventListener(type, fn, false);
   } else if (window.attachEvent) {
      var f = function() {
         fn.call(el, window.event);
       };
      el.attachEvent('on' + type, f);
   }
}
这是一个跨浏览器功能,用于添加与您发布的示例相同的事件。当您有数千个addEvent调用时,就会出现差异

在您发布的示例中,函数在开始时对每种浏览器类型进行了“简化”和“具体化”(注意末尾的“();”)

你会得到任何一个

var addEvent = function(el, type, fn) {
  el.addEventListener(type, fn, false);
};

取决于浏览器。选择之后将永远不会重新评估(这将是无用的,因为浏览器在执行期间不会更改;-)。因此,每次调用addEvent函数时,该函数都避免了1或2次测试!对于像addEvent这样的大量使用的函数,这可能会有所不同

我希望这能帮助你


Jerome Wagner

通常,在Javascript中创建类时,将函数分配给变量

function MyObject() {
 this.WhoAmI = function()
    {
       return "I don't know";
    };

} 
当您打算在另一个函数中大量使用某个函数,但又不想将该函数公开给站点上的所有其他代码时,也可以将该函数分配给变量


还可以将函数作为参数传递给另一个函数。基本上是C#中的委托

通常,在Javascript中创建类时,将函数分配给变量

function MyObject() {
 this.WhoAmI = function()
    {
       return "I don't know";
    };

} 
当您打算在另一个函数中大量使用某个函数,但又不想将该函数公开给站点上的所有其他代码时,也可以将该函数分配给变量


还可以将函数作为参数传递给另一个函数。基本上是C#中的委托

您发布的代码在逻辑上与以下代码相同:

var addEvent;
if (window.addEventListener) {
  addEvent = function(el, type, fn) {
    el.addEventListener(type, fn, false);
  };
} else if (window.attachEvent) {
  addEvent = function(el, type, fn) {
    var f = function() {
      fn.call(el, window.event);
    };
    el.attachEvent('on' + type, f);
  };
}
但也有好处:

  • 纯粹主义者会认为分配多个