Question

我一直在尝试阅读和理解更多关于使用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 Tutorial

Answer 1

这是一种编写函数的简洁方法。这不是关闭，不过是正常的功能。对于这种声明函数的方式真正开始变得很酷的是编写面向对象的javascript变得更容易。举个例子：

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

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

Answer 2

它看起来像是简单定义函数的速度优化。

想象一下你有

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);
};

或

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

取决于浏览器。之后永远不会重新评估选择（由于浏览器在执行期间不会改变，因此无用;-)。因此，每次调用addEvent函数时，该函数都会避免1或2次测试！这可以为像addEvent这样的大量使用功能带来改变。

我希望这会对你有所帮助，

Jerome Wagner

Answer 3

通常，在Javascript中创建类时，会将函数赋值给变量。

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

}

当您要在另一个函数中使用该函数但不希望将该函数公开给站点上的所有其他代码时，您也可以将函数分配给变量。

您还可以将函数作为参数传递给另一个函数。基本上是C＃中的代表。

Answer 4

您发布的代码在逻辑上与：

相同

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);
  };
}

但有一些好处：

纯粹主义者会争辩说，分配多次是丑陋的
如果函数中有变量，则包含其范围，从而使全局命名空间更清晰。
可能是其他....

Answer 5

这不是......

闭包 - 即当您访问超出范围的变量但细节由环境处理时
原型设计 - 即添加函数或对象的基类时

返回函数的Javascript函数可能很有用。例如，如果您希望代码的行为根据运行时上下文进行更改，则可以通过让一个函数动态生成另一个函数来实现它。

也就是说，就像许多聪明的代码技术一样，它让其他人很难了解你正在做的事情。因此，维护变得麻烦，您也可以创建一些令人难以置信的难以调试的问题。我更喜欢前者的模式，除非有一个非常独特的理由这样做。

不确定我是否回答了你的问题，但这对我感觉很好....

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

5 个答案: