如何在angular中创建utils库

How to create a utils library in angular

本文关键字：创建 utils angular      更新时间：2023-09-26

我对Angular很陌生。很抱歉有这个基本问题，但我找不到关于如何以正确的方式在Angular中编写库的信息。

原因是得益于Angular模块以及可测试性/模拟。

图书馆

我正在将我的代码转移到Angular，但我的大部分代码都是基于我几个月来开发的库编写的。想象一下类似下划线的内容。

所以我最初的想法是把它包在一个有角度的模块里，比如：

angular.module('mylib', [])
       .factory('map', map)
       .factory('reduce', reduce)
       .factory('find', find);
function map (...

每个工厂功能都是可测试的。然后像这样使用：

angular.module('app', ['mylib'])
       .controller('MainCtrl', ['$scope', 'map', MainCtrl]);
function MainCtrl($scope, map) {
    ... do stuff with map ...

我想这对几个函数来说是可以的，但我的库有20多个函数，把它们中的每一个定义为工厂，然后把它们注入到我的控制器中，这太麻烦了。

第二个解决方案

另一种方法是只有一个返回对象的工厂。有点像这样：

angular.module('mylib', [])
       .factory('mylib', mylib)
function mylib () {
  var exports = {};
  exports.map = function (...
  exports.reduce = function (...
  exports.find = function (...
  return exports;
}

然后像这样使用：

angular.module('app', ['mylib'])
       .controller('MainCtrl', ['$scope', 'mylib', MainCtrl]);
function MainCtrl($scope, mylib) {
    ... do stuff with mylib.map ...

但是

这是一个好方法吗？用Angular编写实用程序库并使用它的好方法是什么？可读性和可维护性很重要，但我不希望有那么多样板代码。

如果你的库函数和你的例子一样通用，我一开始就不会把它们定义为Angular模块。编写一个简单的JS库。这将减少无用的样板，而且作为奖励，你的库也可以在非Angular应用程序中使用。Angular与不知道它的库配合得很好，例如，不需要数据对象实现任何额外的东西（比如ko.observable、Backbone Model等）即可用于数据绑定。

作为一个Angular模块并不是可测试性的要求。我唯一能想到的Angular可以在通用实用程序库中改进可测试性的是依赖项注入（例如，将"当前时间"的模拟服务注入到时间库中以获得确定性结果）。如果你不需要这些，就考虑一下最不复杂的过去，只需编写一个简单的JS库。

如果将库包装在Angular模块中是一个绝对的要求（例如，不要用一个短的名称空间污染全局名称空间），我仍然会用纯JS编写库，将其放入一个更复杂的名称空间，然后用Angular模块将其别名。

lib/handy-utilities-1.0.js

// Or any other descriptive namespace
var handyUtilities = {
    map: function() { ... }
};

app/util.js

angular.module("handyUtilities", []).constant("util", handyUtilities);
相关文章：