Javascript返回冒号

Question

我正在学习JavaScript,并且遇到了以下结构:

var Test = (function () {

  function func1() {
      //do something.....
  }

  function func2() {
      //do something.....
  }

  function func3() {
      //do something.....
  }

  return {
      func1: func1,
      func2: func2,
      func3: func3
  };

})();

我想知道返回块正在做什么.这是一个非常常用的JavaScript结构吗？请告诉我在哪里可以获得更多相关信息.

Answer 1

这是揭示模块模式.

返回的对象包含对IIFE内定义的函数的引用.因此,内部定义的函数对匿名函数是私有的.

但是如果要在外部使用内部函数,则可以使用返回的对象.

价值Test将是

var Test = {
    func1: func1,
    func2: func2,
    func3: func3
};

你可以func1从外面打电话

Test.func1();

这是Javascript 模拟 类的方式.由于没有使用模块模式的可见性说明符,因此变量/方法可以是公共/私有的.

揭示模块模式的灵感来自模块模式.在揭示模块模式时,仅在对象中返回对私有变量/方法的引用.

该模式背后的主要思想是避免邪恶的全局变量.这看起来类似于IIFE,除了返回对象而不是函数.IIFE内定义的变量/方法对函数是私有的.要访问IIFE内的任何变量/方法,需要在返回的对象中添加它,然后可以从IIFE外部访问它.此模式利用了闭包,因此即使在返回对象后,也可以访问IIFE内定义的变量/方法.

来自Addy Osmani的书" 学习Javascript设计模式"

揭示模块模式的出现是因为当我们想要从另一个公共方法调用一个公共方法或访问公共变量时,他不得不重复主对象的名称这一事实.他也不喜欢Module模式的要求,因为他希望公开的东西必须切换到对象文字表示法.

他努力的结果是一个更新的模式,我们将简单地定义私有范围中的所有函数和变量,并返回一个匿名对象,其中包含指向我们希望公开的私有功能的指针.

好处:

1. 封装.IIFE内部的代码是从外部世界封装的
2. 清洁,有组织和可重复使用的代码
3. 隐私.它允许创建私有变量/方法.无法从IIFE外部触及私有变量/方法.

缺点:

1. 如果私有函数引用公共函数,则不能覆盖该公共函数

进一步阅读:

1. https://en.wikipedia.org/wiki/Module_pattern
2. https://carldanley.com/js-revealing-module-pattern/
3. 如何在JavaScript中使用Revealing模块模式

编辑

从评论从@Mike

值得注意的是,创建一个对象(例如var me = {};),然后在其上声明可能的公共成员(me.func1 = function() { /* ... */ };),在末尾(return me;)返回该对象是很常见的.这避免了我们在OP代码的返回语句中看到的重复(其中所有公共内容都被重复).

Answer 2

它是return语句中的文字对象.这就像创建一个对象然后返回它:

var obj = {
    func1: func1,
    func2: func2,
    func3: func3
};
return obj;

文字对象语法创建一个对象并设置其属性,如:

var obj = new Object();
obj.func1 = func1;
obj.func2 = func2;
obj.func3 = func3;
return obj;

返回对象的目的是将函数内部的函数显示给外部代码,同时为函数可以使用的私有变量创建范围.

不使用私有变量时,代码执行相同的操作:

var Test = {
  func1: function() {
      //do something.....
  },
  func2: function() {
      //do something.....
  },
  func3: function() {
      //do something.....
  }
};

私有变量在函数范围内声明,并且只能由其中的函数访问.例:

var Test = (function () {

  var name;

  function setName(str) {
    name = str;
  }

  function getName() {
    return name;
  }

  return {
      setName: setName,
      getName: getName
  };

})();

Test.setName("John Doe");
var name = Test.getName();