javascript - AngularJS 与(Angular JS + jQuery)

Question

当你只使用带有纯 JavaScript 的 AngularJS 以及当你使用带有 jQ​​uery 的 AngularJS 时，我有一个关于性能的问题。

例如:

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

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

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

Answer 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 . 这几乎给出了关于 native 的性能概念，而不是库/框架之间的比较。 但是您还需要考虑跨浏览器和您使用的环境等规范。 Angular 通常会在 DOM 操作上将您绑定(bind)到它自己的方法(如指令)，并且在 Angular 系统中通过 jquery 或 native 函数编​​辑 DOM 可能会导致故障。如果你知道自己在做什么，上面的数字显示了性能结果