Question

我有一些主要功能，我在webApp中使用它。这些函数是纯JS，没有AngularJs相关，我希望能够在我的应用程序中的任何地方使用它们，因为它们是执行简单任务的辅助函数。

这是我所拥有的功能的一个例子：

function _removeArray(obj, id) { //Remove object from array
    for(d=0; d<obj.length;d++){
        if(obj[d].id == id){
            obj.splice(d,1);
            return obj;
        }
    };
};

我知道我们可以在服务/工厂内声明一些主要功能，但这是声明/使用这种功能的最佳方式吗？有没有更好/更正的方法呢？

Answer 1

我经常做的是创建一个全局“帮助者”对象：

var h = (function helpers(){
  var output = {};
  output.el = function(id){
    return document.getElementById(id);
  }
  return output;
}());

h.el("myElement");

如果你有一大堆函数和变量在全局范围内悬空，那么这不是一个好主意 - 但我认为有一个函数和变量嵌套在其中，非常有用。

Answer 2

如果你没有使用模块捆绑器（如webpack，browserify）或模块加载器（如systemjs）的任何模块系统，那么是。对于angular1来说，这是主要的工作方式。

在我的应用中，我刚创建了arrayUtils，numberUtils，domUtils，dateUtils等工厂，并在需要任何功能时注入它们。

示例：

日期utils的-module.js

(function () {
  'use strict';

  /* @ngdoc object
   * @name components.dateUtils
   * @description
   *
   */
  angular
    .module('components.dateUtils', [
      'angularMoment'
    ]);
}());

日期utils的-factory.js

(function () {
  'use strict';

  /**
   * @ngdoc service
   * @name components.dateUtils.factory:dateUtils
   *
   * @description
   *
   */
  angular
    .module('components.dateUtils')
    .factory('dateUtils', dateUtilsFactory);

  function dateUtilsFactory(moment) {
    var dateUtils = {
      range: range
    };

    return dateUtils;

    /**
     * Возвращает строку, содержащую текстовое представления диапазона дат.
     * Например (считая, что сейчас 2015 год):
     * <pre>
     * чт, 31 декабря, 17:30 – ∞
       ∞ – пт, 1 января 2016, 21:30
      чт, 31 декабря, 17:30 – пт, 1 января 2016, 09:00
      чт, 31 декабря, 17:30 – 21:30
    * </pre>
    * @param date1 первая дата
    * @param date2 вторая дата
    *
    * @returns строка с диапазоном дат.
    */
    function range(date1, date2) {
      var now = moment(),
          m1 = moment(date1 || null),
          m2 = moment(date2 || null),
          t1 = '∞',
          t2 = '∞';

      if (m1.isValid()) {
        // t1 = m1.calendar();
        t1 = m1.isSame(now, 'year') ? m1.format('dd, D MMMM, HH:mm') : m1.format('dd, D MMMM YYYY, HH:mm');
      }

      if (m2.isValid()) {
        // t2 = m1.isSame(m2, 'day') ? m2.format('HH:mm') : m2.calendar();
        t2 = m2.isSame(m1, 'day') ? m2.format('HH:mm') :
            m2.isSame(now, 'year') ? m2.format('dd, D MMMM, HH:mm') : m2.format('dd, D MMMM YYYY, HH:mm');
      }

      return t1 + ' – ' + t2;
    }

  }

}());

Answer 3

你可以使用singleton，这是许多JS库（例如lodash和Angular本身）所做的，尽管这基本上是工厂/服务允许你做的。

Answer 4

如果您的应用程序是纯粹的Angular应用程序，那么我们并不完全清楚。如果是这样，我建议您使用标准的Angular服务或工厂模式。如果您的应用程序是某种混合类型，并且您在Angular框架之外运行部分应用程序，那么您可以使用其中一种JavaScript模块模式声明所有描述的功能。

var myModule = (function() {
  // private properties and functions
  var privateProperty;
  // public properties and functions
  return {
    publicProperty: ''
  };
})();

是的，您已创建了一个全局变量，但您已将所有功能封装在全局对象中。

AngularJs在整个应用

4 个答案: