代码之家 › 专栏 › 技术社区 › davidkonrad

AngularJS工厂:用文字来调用父级的最佳方法?

angularjs javascript

davidkonrad · 技术社区 · 6 年前

如果我有

var test = {
  return {
    foo: function() {
      return 1
    },
    sub: {
      bar: function() {
        var foo = this.foo() // <--- here, does obviously not work
      }
    }
  }
}

推荐的最佳访问方式是什么 foo() 从内 sub.bar() ……?

为了澄清这一点,我想将AngularJS服务划分为多个部分。

“真实”代码:

angular.module('myApp').factory('Service' function() {
  return {
    foo: function() {
       return 1
     },
     sub: {
       bar: function() {
         var foo = this.foo() // <--- here, does obviously not work
       }
     }
   }
 })

2 回复 | 直到 6 年前

Ori Drori 6 年前

因为你用的是 angular factory ,您可以使用 Revealing Module Pattern :

angular.module('myApp').factory('Service' function() {
   function foo() {
     return 1
   }

   var sub = {
     bar: function() {
       var foo = foo()
     }
   }

   return {
     foo: foo,
     sub: sub
   }
 })

Ele 6 年前

这是不好的:

return {
  foo: function() {
    return 1
  }
}

你得把它拿走 return 语句和函数内 bar 您可以访问该功能 foo 使用变量名 test 如下: test.foo()

var test = {
  foo: function() {
    return 98989;
  },
  sub: {
    bar: function() {
      var foo = test.foo();
      console.log(foo);
    }
  }
};

test.sub.bar();

另一种方法是使用函数 bind 但太过分了:

var test = {
  foo: function() {
    return 98989;
  },
  sub: {
    bar: function() {
      var foo = this.foo(); // Using the object 'this'
      console.log(foo);
    }
  }
};

test.sub.bar.bind(test)();

现在,您可以声明一个变量 service 并使用该变量:

angular.module('myApp').factory('Service'function() {
  var service = {
    foo: function() {
      return 1
    },
    sub: {
      bar: function() {
        var foo = service.foo();
                  ^^^^^^^
      }
    }
  };

  return service;
});

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前