Question

我使用JS require()在另一个JavaScript文件中使用函数。我一直在打这个错误：

TypeError: lightFn.hextoRGB is not a function
    at lightPage.js:17
    at Scope.$digest (angular.js:16664)
    at Scope.$apply (angular.js:16928)
    at done (angular.js:11266)
    at completeRequest (angular.js:11464)
    at XMLHttpRequest.requestLoaded (angular.js:11405)

我正在运行AngularJS 1.5。这是HTML页面的后端JS代码：

'use strict';
(function($) {
angular.module('careApp.lightPage', ['ngRoute', 'farbtastic'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/lightPage', {
    templateUrl: './lightPage/lightPage.html',
    controller: 'lightPageCtrl'
  });
}])

.controller('lightPageCtrl', ['$scope', function($scope) {
    //require() call for external script, located in another folder
    var lightFn = require(['../client_scripts/lights/lights.js']);
    $scope.color = "#123456";
    //watches $scope.color for any changes. On change, run the function.
    $scope.$watch('$scope.color', function(){
        console.log("Sending " + $scope.color + " to lighting board.");
        lightFn.hextoRGB($scope.color);
    });
}]);
})(jQuery);

根据我得到的错误，我猜测：

我写的require()无法正常使用
AngularJS中的某些内容阻止我使用require()

非常感谢任何帮助。

Answer 1

这不是您使用require()的方式。 require()接受两个参数，Array个依赖项，以及一个Function来调用加载的依赖项作为参数。

require([
    // Provide an array of dependencies you need
    "one/of/my/deps",
    "another/dep"
], function (
    // Your dependencies will be loaded into the arguments of your callback
    oneOfMyDeps,
    anotherDep
) {
    // Your dependencies are available here
    oneOfMyDeps.foo();
    anotherDep.bar();
});

您尝试将require()的返回值存储在lightFn中。但是，require()并没有真正返回任何有用的内容。您需要在为require()提供的回调中使用已加载的依赖项执行操作。您可以在下面看到正确的用法。

require(['../client_scripts/lights/lights.js'], function (lightFn) {
    $scope.color = "#123456";
    //watches $scope.color for any changes. On change, run the function.
    $scope.$watch('$scope.color', function () {
        console.log("Sending " + $scope.color + " to lighting board.");
        lightFn.hextoRGB($scope.color);
    });
});

值得注意的是，AngularJS具有与AMD（require.js）在依赖注入方面使用的类似概念。然而，签名是奇怪的不同。实际上，您已在当前的应用程序中使用它。阅读AngularJS＆＃39; Dependency Injection

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/lightPage', {
    templateUrl: './lightPage/lightPage.html',
    controller: 'lightPageCtrl'
  });
}])

在AngularJS中，签名只是一个数组，其依赖关系字符串依次为Function，其中包含依赖关系对象的参数。就像我说的，这与非常类似于AMD，区别在于回调是依赖数组的最后一个成员。

app().config([
    // Deps are in array similar to AMD
    "some/dep",
    "some/other/dep",
    // Callback is last member of array
    function (
        // Dep objects are still arguments of callback
        someDep,
        someOtherDep
    ) {
        domDep.fizz();
        someOtherDep.buzz();
}]);

这与require in commonjs works不同。在commonjs中，require()实际上返回了一些内容。如果您熟悉node.js，则会分享使用详情。

不同之处在于require.js实现了AMD JavaScript规范而不是commonjs规范，使其异步，因此您不必等待所有模块加载，然后才可以做任何事情。两者都有利有弊，但这超出了问题的范围。

AngularJS不允许通过requireJS访问外部函数

1 个答案: