AngularJS 与（Angular JS + jQuery）答案

【问题标题】：AngularJS vs (AnguarJS + jQuery)AngularJS 与（Angular JS + jQuery）
【发布时间】：2016-03-20 23:29:32
【问题描述】：

我有一个关于仅将 AngularJS 与纯 JavaScript 结合使用以及将 AngularJS 与 jQuery 结合使用时的性能问题。

例如：

app.directive('fitHeight', function($window) {
    return {
        restrict: 'A',
        link: function(s){
            s.contentminHeight = $window.innerHeight - 40 + 'px';
            var h = $window.innerHeight;
            $(window).resize(function() {
                if ( h !== $window.innerHeight ) {
                    h = $window.innerHeight;   
                    s.contentminHeight = ( h - 40 ) + 'px';
                    s.$apply();
                }
            });
        }
    };
});

我看到使用 AngularJS 验证 $window 调整大小已被弃用，其他选项是创建一个间隔来检查，我发现 jquery.resize 更可接受。

或

app.directive('leftmenuDropdown', function() {
    return {
        restrict: 'C',
        link: function(s, e){    
            e.click(function(){
                var m = $(e.parent().find("ul")[0]);
                if ( m.hasClass('dd-open') ) { m.removeClass('dd-open') } else { m.addClass('dd-open') }
            });
        }
    };
});

我在 google 上搜索，我了解到 .hasClass 比纯 JavaScript 更快。

关于性能，我应该怎么做？将 jQuery 与 AngularJS 一起使用，还是仅将 AngularJS 与纯 JS 一起使用？

【问题讨论】：

标签： javascript jquery angularjs performance

【解决方案1】：

我正在搜索库的 DOM 查询性能，结果如下：

vanilla - document.getElementById('test-table') => 12,137,211 (ops/sec)
Dojo - dojo.byId('test-table') => 5,443,343 (ops/sec)
Prototype - $('test-table') => 2,940,734 (ops/sec)
jQuery - $('#test-table') => 350,557 (ops/sec)
YUI - YAHOO.util.Dom.get('test-table') =>   326,534 (ops/sec)
MooTools - document.id('test-table') => 78,802 (ops/sec)

您可以找到其他性能详细信息here。这几乎比库/框架之间的比较提供了关于本机的性能概念。但是您还需要考虑跨浏览器和您使用的环境等规范。 Angular 通常将您与 DOM 操作上的自己的方法（如指令）联系起来，并且在 Angular 系统中，通过 jquery 或本机函数编辑 DOM 可能会导致故障。如果你知道你在做什么，上面的数字显示了性能结果

【讨论】：

如果您对 VanillaJS 感到疑惑，这是一个笑话，提醒开发人员无需额外的 JavaScript 库即可完成编程:)。
完全正确 :) 而且更有趣

【解决方案2】：

Angularjs 自带 jqLite

您可以在其中拥有几乎许多所需的功能，其余的我确实使用 jQuery+Angular 创建了一个应用程序，并且由于应用程序超出了 Angular 的范围而多次发生冲突。

Angular 广受欢迎

你会发现对它的支持，比如你对 jQuery 的支持，你可以从 angular(jqLite) 本身开始。

性能

当然，加载两个繁重的库/框架并保持它们的平衡会花费更多。

【讨论】：