Question

我使用angular给出了我的第一步，我需要定义一个实用程序帮助程序库，其中包含一些函数方法，例如

dataHelper.parse，dataHelper.sanitize等

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

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);

<强>用法

添加脚本后，您可以从任何地方使用您的库 - 服务，工厂，提供商，控制器，指令等。

<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服务

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

扩展角度

如果你真的想要，你甚至可以扩展角度库本身。只需在脚本中用myLibrary替换angular（注意：这可能不合适，因为它会使您的脚本依赖于Angular实现）。

Answer 2

创建自定义service

globalModule.service('toolkit',function(){

return{

    getDate: function(altFormat){
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!

        var yyyy = today.getFullYear();
        if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = yyyy +'-'+ mm+'-'+dd;

        if(altFormat){
            today = today.replace(/-/g, '.');
        }

        return today;
    },

    /**
     *  Returns a 32 character ID [ XXXXXXXX - XXXXXXXXXXXXXXXXXXXXXXXX ]
     * @returns {string}
     */

    newGUID: function(){

        // ...
    }

  };
});

您可以将其注入任何需要的地方。如果你可以将一些逻辑捆绑到单独的服务中（例如parseService），我认为你应该这样做。

如果您需要更灵活或可配置的内容，请查看提供商。

Answer 3

要扩展@pixelbits的答案，如果您希望保持外部依赖项的显式，您可以相当容易地将现有库包装用于Angular，例如momentjs：

angular.module('testApp')
.constant( 'moment', moment)

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

3 个答案: