angularjs - angular.js - 定义实用程序库的最佳实践

Question

我正在使用 Angular 迈出第一步，我需要定义一个实用程序帮助库，其中包含几个函数方法，例如
dataHelper.parse , dataHelper.sanitize ， ETC

以 Angular 组织它的推荐方法是什么？

Answer 1

对于实用方法，我会将它们组织在 Angular 框架之外的库中，但对 angular.extend 的依赖性很小。如果您希望您的库完全独立于 Angular，您可以替换为 extend用你自己的实现。

将您的实用程序 API 封装在 JavaScript 封装中，并将您的库作为 window 的属性公开(在下面的示例中，我将我的库命名为 myLibrary，但您可以自由选择您喜欢的任何名称)。通过将您的库附加为 window 的属性，您将可以无条件引用“myLibrary”。如果您好奇，这正是 angular 库的公开方式。

 (function (window, document) {
     'use strict';

     // attach myLibrary as a property of window
     var myLibrary = window.myLibrary || (window.myLibrary = {});

     // BEGIN API
     function helloWorld() {
         alert('hello world!');
     }

     function utilityMethod1() {
         alert('Utility Method 1');
     }

     function utilityMethod2() {
         alert('Utility Method 2');
     }
     // END API

     // publish external API by extending myLibrary
     function publishExternalAPI(myLibrary) {
         angular.extend(myLibrary, {
             'helloWorld': helloWorld,
             'utilityMethod1': utilityMethod1,
             'utilityMethod2': utilityMethod2
         });
     }


     publishExternalAPI(myLibrary);

 })(window, document);

用法

添加脚本后，您可以从任何地方使用您的库 - 服务、工厂、提供程序、 Controller 、指令等。

<script type='text/javascript' src='angular.js'></script>
<script type='text/javascript' src='myLibrary.js'></script>

<script>
      myLibrary.helloWorld();
      myLibrary.utilityMethod1();
      myLibrary.utilityMethod2();
</script>

实用程序库与 Angular 服务

我更喜欢实用程序函数驻留在自己的库中而不是 Angular 服务中的原因是因为我认为它们与 Angular 生态系统是分开的。这些实用功能几乎是独立的，并且与模块无关，而 Angular 服务/工厂与 Angular 的其他部分(包括 Controller 和指令)密切合作，并且与模块密切相关。

扩展 Angular

如果你真的想要，你甚至可以扩展 Angular 库本身。只需替换 myLibrary与 angular在脚本中(注意:这可能是不可取的，因为它会使您的脚本依赖于 Angular 实现)。