Question

如何在Angular项目中包含JavaScript文件，但为其所有功能指定名称？我第一次包含了Underscore.Script和Lodash，发现它们都有实际名称（＆＃34; _＆＃34;和＃34; s＆＃34;）..

_.mixin(s.exports());

我已经观看了一些关于JavaScript和Angular的课程，但找不到任何可以解释这个或如何实现它的课程。

Answer 1

在Javascript中，最简单的方法是在编写库时将所有函数定义为全局范围内对象的属性。

var myLibrary = {};
myLibrary.myFunction = function(){
  /* Your function code */
};

然后在包含您的文件后，您可以访问您的功能：

myLibrary.myFunction();

更好的方法可能是将您的库包装在自执行函数中，这将帮助您避免无意中向全局范围添加属性（这是一种很好的做法）

(function(root){
    var myLibrary = {};
    myLibrary.myFunction = function(){
      /* Your function code */
    };
    root.myLibrary = myLibrary;
}(window));

请注意，将window传递给自执行功能将在浏览器中运行，但不能在不同的上下文中运行（如nodejs）。

如果你想专门为 Angular 创建一些东西，我建议你研究angular services，你可以创建与Angular依赖注入系统一起工作的库。

Answer 2

在角度我们有控制器，指令，服务，工厂和提供商。让我们举一个工厂的例子 - ＆＃34;客户＆＃34;具有获取和设置细节的功能。

<强> app.module.js

angular.module("myapp", []);

<强> Customer.js

angular.module("myapp").factory("Customer", function(){

   function Customer(name, email){
     this.name = name;
     this.email = email;
   }

   Customer.prototype.getName = function(){
      return this.name;
   };

   Customer.prototype.getEmail = function(){
      return this.email;
   };

   Customer.prototype.setName = function(name){
     this.name = name;
   };

   Customer.prototype.setEmail = function(email){
      this.email = email;
   };

});

CustomerController.js

angular.module("myapp").controller("CustomerController", ['Customer', 
   function(Customer){
      var custObj = new Customer();
      custObj.setName("Test");
      custObj.setEmail("test@gmail.com");

      console.log("Name: " + custObj.getName() + " Email: " + custObj.getEmail());
   }
]);

这里app.module.js - Angular App主模块已初始化。 Customer.js是一个JS，您可以使用此文件及其功能，为其命名＆＃34; Customer＆＃34;在CustomerController.js文件中。

Answer 3

其他答案告诉您使自己的脚本模块化。这很好，但它没有解决消除Underscore和LoDash歧义的问题。所以这是如何做到的：

我首先建议你研究像RequireJS这样的模块化系统。像LoDash和Underscore这样的库是为了识别和集成AMD风格的架构而构建的，允许它们共存（但是，这两个库是多余的.LoDash应该是Underscore的替代品。但我离题了。

如果你不使用模块系统（不要与棱角分明的module混淆），你必须自己做垫片工作。无论如何，这并不难，但它有点手动。 HTML中指定的脚本按顺序执行（请注意：那里有异步加载器，但它们使您的问题更容易解决，而不是更难）。

因此，对于您的特定问题，您可以这样做：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.js"></script>
<script>
  var mylodash = _;
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script>
  var myunderscore = _;
</script>

此后您将可以访问这两者（根据您的喜好随意命名或分组）。这两个库都可以很好地避免污染全局命名空间（在浏览器中附加到window）。但是如果你的图书馆暴露了许多不同的方法，你需要自己拼凑它们。

简单？当然，但从长远来看，学习使用CommonJS或RequireJS之类的东西。他们不仅解决了这个特殊问题，而且还提供了许多其他好处 - 你会很高兴你做到了。

如何在AngularJS中创建一个带有变量名的JS文件？

3 个答案: