个人中心
gpt4 book ai didi

javascript - 带有闭包编译器的 AngularJS - 简单优化失败

转载 作者：行者123 更新时间：2023-12-02 19:02:37 26 4
gpt4 key购买 nike

有人可以解释一下为什么在 AngularJS 中简单的优化对我来说失败了吗？更重要的是，我怎样才能让他们工作？ (也欢迎定义 Controller 的最佳实践/说明)。

这是我的场景，已大大简化。

我正在使用这个 HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html ng-app="">
  <head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/excite-bike/jquery-ui.css" type="text/css" rel="stylesheet" />

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js" type="text/javascript"></script>
    <script src="simple_script.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
    <script>
    //inline JS here
    $(function() {
        var spinner = $( "#qtySpinner" ).spinner({
            spin: function( event, ui ) {
                scope.qty = ui.value;
                scope.$digest();
                //console.log( event );
            }
        }); //end spinner

        var scope = angular.element(spinner).scope();
    });
    </script>
    <title>Angular Testing</title>
  </head>
  <body>
    <div ng-controller="InvoiceCntl">
      <b>Invoice:</b><br>
      <br>
      <table>
        <tr>
          <td>
            Quantity
          </td>
          <td>
            Cost
          </td>
        </tr>
        <tr>
          <td>
            <input id="qtySpinner" type="integer" min="0" ng-model="qty" required="">
          </td>
          <td>
            <input type="number" ng-model="cost" required="">
          </td>
        </tr>
      </table>
      <hr>
      <b>Total:</b> {{calculate(qty,cost)}}
    </div>
    <br>
  </body>
</html>

我使用这个高度缩小的证明(我认为)JS 文件作为“simple_script.js”，它实际上按原样工作:

//this works
window["InvoiceCntl"] = function ($scope) {
   $scope["qty"] = 1;
   $scope["cost"] = 19.95;
   $scope["calculate"] = function (xval, yval) {
                            return xval * yval;
                         };
}

使用 Google Closure Compiler ( http://closure-compiler.appspot.com/home ) 和 SIMPLE_OPTIMIZATIONS 进行缩小，我明白了，这会破坏:

//this breaks, seemingly because "a" replaces "$scope"?
window.InvoiceCntl=function(a){a.qty=1;a.cost=19.95;a.calculate=function(a,b){return a*b}};

我认为这是因为 $scope 是 Angular 寻找的关键字(依赖注入(inject)？)，因为当我手动添加额外的步骤来传递 $scope并将其分配给函数第一行的a，它就可以工作了。就像这样:

//manually passing "$scope" and immediately assigning it to "a" works
window.InvoiceCntl=function($scope){var a=$scope;a.qty=1;a.cost=19.95;a.calculate=function(a,b){return a*b}};
  • 为什么在这种情况下 $scope 的行为不像普通函数参数？
  • 有没有一种方法可以使用闭包编译器(或其他东西)来缩小(简单或高级) Angular 代码，而无需像这样的手动步骤？
  • $scope 是可配置的还是固定的关键字，也就是说，我可以在定义 Controller 时将关键字更改为“$myscope”吗？ (无论如何，不​​确定这对我有帮助)

谢谢。

最佳答案

您应该阅读http://docs.angularjs.org/tutorial/step_05

我认为您对注入(inject)“$scope”的担忧是正确的。您可以像下面这样注入(inject)。

var module = angular.module('youApp', []);
module.controller('yourCtrl', ['$scope', function($scope) {
   $scope["something"] = "somevalue";
})];

编辑:缩小重命名$scope，您可以通过添加来防止这种情况:

InvoiceCntl.$inject = ['$scope'];

关于javascript - 带有闭包编译器的 AngularJS - 简单优化失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14636822/

26 4 0
文章推荐： php - 无法从Dockerfile正确重启PHP-FPM
文章推荐： Azure Web应用程序运行 "docker run"两次并且部署失败
文章推荐： docker - 如何在没有端口问题的情况下多次运行 docker-compose？
文章推荐： javascript - 如何取消设置 _id 主干模型属性？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com