So verwenden Sie AngularJS-Programmierideen

AngularJS ist ein hervorragendes Front-End-JS-Framework, das in vielen Google-Produkten verwendet wird. AngularJS verfügt über viele Funktionen, die wichtigsten davon sind: MVC, Modularisierung, automatisierte bidirektionale Datenbindung, semantische Tags, Abhängigkeitsinjektion usw. In diesem Artikel teilen wir Ihnen hauptsächlich die Verwendung von jQuery und die Verwendung von AngularJS-Programmierideen mit.

1. Wie kann ich clientseitige Webanwendungen anders gestalten und gestalten? Was ist der größte Unterschied zwischen ihnen? (Anmerkung des Übersetzers: Bezieht sich auf jQuery und Angular.js)

2. Was sollte ich nicht tun oder verwenden? Und was sollte ich tun oder verwenden?

3. Gibt es serverseitige Überlegungen/Einschränkungen?

Was ich suche, ist ein detaillierter Vergleich zwischen jQuery und Angular.js. „

Das Folgende ist die beste Antwort von Josh David Miller:

1 Entwerfen Sie niemals zuerst Ihre Seite und verwenden Sie dann die DOM-Manipulation, um sie zu ändern

in jQuery, das werden Sie tun Entwerfen Sie zuerst eine Seite und machen Sie sie dann dynamisch. Dies liegt daran, dass jQuery unter dieser Prämisse immer aufgeblasener wird Wenn Sie denken: „Ich habe ein DOM wie dieses und ich möchte, dass es X macht“, müssen Sie darüber nachdenken, was Sie erreichen möchten, und dann Ihre Ansichten entwerfen

2 Ich erweitere jQuery nicht mit Angular.js

Beginnen Sie auch nicht mit der Idee, dass jQuery das X, Y, Z kann, also füge ich einfach Angular.js für Modelle und Controller hinzu . Es ist wirklich einfach, einen am Anfang zu verführen, weshalb ich Neulingen in Angular.js immer empfehle, jQuery überhaupt nicht zu verwenden, zumindest nachdem sie sich an die „Angular-Methode“ gewöhnt haben.

I Ich habe hier (Anmerkung des Übersetzers: bezieht sich auf Stackoverflow) und auf der Mailingliste viele Entwickler gesehen, die jQuery-Plug-Ins mit 150 oder 200 Codezeilen verwenden und dann eine verwirrende Reihe von Rückrufen und $apply zum Zusammenkleben verwenden Angular.js, um diese aufwändigen Lösungen zu erstellen; in den meisten Fällen kann dieses Problem jedoch in einem kurzen Absatz gelöst werden, und dieser Ansatz macht alles einfach und klar und sofort verständlich

Ich denke, das Fazit für diese Art von Problem ist: Wenn Sie das Problem lösen, verwenden Sie es zuerst eine Lösung, dann fragen Sie in der Community; wenn es immer noch keine einfache Lösung gibt, dann verwenden Sie gerne jQuery. Aber seien Sie vorsichtig, lassen Sie sich nicht von jqeury leiten, sonst werden Sie Angular.js nie wirklich beherrschen

3. Denken Sie immer in Bezug auf die Architektur

Zunächst müssen Sie wissen, dass eine Einzelseitenstruktur keine Webseite ist. Wir brauchen eine serverseitige Entwicklermentalität plus einen clientseitigen Entwickler Denkweise. Wir müssen darüber nachdenken, wie wir unsere Anwendungen in unabhängige, skalierbare und testbare Komponenten aufteilen können jQuery

Ansichten sind „offizielle Datensätze“

In jQuery können wir sie programmgesteuert ändern. Ansicht Wir können ein Dropdown-Menü über das ul-Tag definieren:

In jQuery können wir es entsprechend der Logik unserer Anwendung mit einer Anweisung ähnlich der folgenden aktivieren.

Wenn wir nur eine Ansicht betrachten, erkennen wir nicht sofort ihre Funktionalität. Für kleine Anwendungen ist das in Ordnung. Doch bei großen Anwendungen wird die Situation plötzlich unübersichtlich und schwer zu warten.

<ul class="main-menu">
    <li class="active">
        <a href="#/home">Home</a>
    </li>
    <li>
        <a href="#/menu1">Menu 1</a>
        <ul>
            <li><a href="#/sm1">Submenu 1</a></li>
            <li><a href="#/sm2">Submenu 2</a></li>
            <li><a href="#/sm3">Submenu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#/home">Menu 2</a>
    </li>
</ul>

Aber in Angular.js sind Ansichten die formale Dokumentation der ansichtsbasierten Funktionalität. Unser ul wird wie folgt deklariert:

$('.main-menu').dropdownMenu();

Beide machen eigentlich das Gleiche, aber in der Angular.js-Version weiß jeder, der diese Vorlage sieht, was passieren wird. Wenn ein neuer Entwickler dem Team beitritt, kann er auf einen Blick erkennen, dass eine Anweisung namens „dropdownMenu“ auf die Ansicht angewendet wird. Er muss nicht raten oder den Code studieren, um die richtige Antwort zu finden. Die Ansicht selbst sagt uns, was passieren wird. Viel klarer.

Angualrjs-Neulinge stellen oft diese Frage: Wie finde ich alle Links eines bestimmten Typs und füge ihnen einen Befehl hinzu? Meine Freunde waren schockiert, als sie unsere Antwort sahen: Tu das auf keinen Fall. Aber der Grund, warum ich Ihnen davon rate, ist, dass es halb jQuery, halb angulrjs ist, und das ist wirklich schlecht. Das Problem hierbei ist, dass der Entwickler jQuery im Angualrjs-Kontext verwenden möchte. Und das wird definitiv nicht funktionieren. Aufrufe sind offizielle Aufzeichnungen. Sie sollten das DOM niemals außerhalb des Geltungsbereichs der Direktive ändern (mehr dazu weiter unten). Darüber hinaus werden die Anweisungen in der Ansicht angewendet und der Zweck ist natürlich klar.

<ul class="main-menu"dropdown-menu>
    ...
</ul>

Denken Sie daran: Entwerfen Sie nicht zuerst und ändern Sie es dann. Sie müssen zuerst die Architektur entwerfen und dann über das Design nachdenken.

Datenbindung

Dies ist derzeit eine der coolsten Funktionen von Angular.js und beendet sofort alle erforderlichen DOM-Operationen, die ich zuvor erwähnt habe. Sie müssen es nicht selbst tun, Angular.js aktualisiert Ihre Ansichten automatisch!

在jQuery里， 我们响应事件并更新内容，大概是这个样子：

$.ajax({
  url:'/myEndpoint.json',
  success:function( data, status ) {
    $(&#39;ul#log&#39;).append(&#39;<li>Data Received!</li>&#39;);
  }
});

视图则看上去是这样的：

<ul class="messages"id="log">
</ul>

除了关注点混合的问题，这里同样有之前提到的表征目的的问题。更重要的是，我们不得不手动引用并更新dom节点。并且如果我们想要删除一个日志，我们不得不再次对dom编程操作。我们怎样才能抛开dom来测试逻辑呢？还有，如果我们希望改变展现呢？

真是让人凌乱。。。

但是在Angular.js中，我们可以这样做：

$http( '/myEndpoint.json').then(function( response ) {
    $scope.log.push( { msg:'Data Received!'} );
});

我们的视图看上去是这样的：

<ul class="messages">
    <li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>

但是考虑到刚才提到的问题，我们的视图看上去可以是这样的：

<div class="messages">
    <div class="alert"ng-repeat="entry in log">
        {{ entry.msg }}
    </div>
</div>

现在，替换掉了无序列表，我们使用Bootstrap警告框。同时我们根本不需要改变控制器代码！更重要的是，不论日志何时或者如何更新，视图也会跟着改变。自动的！漂亮！

虽然我没有在这里演示出来，但是数据绑定是双向的。所以这些日志信息同样可以在视图中被编辑，就像这样：

<input ng-model= "entry.msg" />

是不是更开心了？

不同的模型层

在jQuery中，dom有点像模型。但是在angualrjs中，我们有一个分离的模型层， 而这个模型层可以让我们用任何方式管理，完全独立于视图。这对于上面说的数据绑定很有帮助， 还可以维护关注点分离，并且引入更多的可测试性。其它的答案提到了这点，所以我这里就不再赘述了。

关注点分离

以上所有的这些把我们带入了这样的主题：保持你的关注点分离。你的视图表现的像记录什么会发生（大部分情况）的正式记录；你的模型表现你的数据；你有一个服务层来执行可重用的任务；你执行dom操作并通过指令扩展你的视图；并且你用控制器来组合这些。这些同样已经在其它答案中提到，我在这里唯一还要提出的一个事情就是可测试性，我会在下文的另一节里专门讨论。

依赖注入

依赖注入是让我们实现关注点分离的方法。如果你是一个服务器端的开发者（从java到php），你可能对这个概念已经非常熟悉了，但是如果你是一个来自jQuery的客户端的朋友，那么你可能会认为这个概念是傻浅挫。但是它可不是：）

从一个更广的观点来看， 依赖注入意味着你可以非常自由的声明组件，然后你可以通过任意其它组件，呼叫一个它的实例，然后授权。

你不需要知道载入顺序，或者文件位置，或者其它类似的东西。这种强大的力量可能不会立刻显现，但是我这里会提供一个（通常）的例子：测试。

比如在我们的应用中，需要一个通过REST API，同时也依赖于应用状态，本地存储实现了服务器端存储的服务。当在我们的控制器上跑测试的时候，我们不希望与服务器端通讯-毕竟我们在测试控制器。我们能够仅仅添加一个与我们原始组件同名的mock服务，注入器将确保我们的控制器自动获取伪造对象–我们的控制器不会也不需要知道它们的区别。

那么既然提到测试……

4. 保持测试驱动的开发

这个其实是关于架构的第三节的一部分，但是这个主题非常重要，所以我需要将其提出来作为自成体系的部分。

那些你看过，用过，写过的所有jQuery插件，它们中有多少有相应的测试包？不是很多吧？ 因为jQuery可不是很遵守这个规矩。但是angualrjs是。

在jQuery中， 测试的唯一方法是用示例页面来独立地创建组件，针对该页面我们的测试可以实施dom操作。于是我们就不得不分离地开发一个组件然后将其集成进我们的应用。多么不方便啊！

那么多时间啊，当我们使用jQuery开发时，我们选择使用迭代开发代替测试驱动的开发。可以谁又能怪我们呢？

但是因为我们有关注点分离，我们能够在Angular.js里反复使用测试驱动开发。举个例子，我们想要一个超简单的指令来指示在菜单中我们目前的路径是什么。我们可以在视图中这样声明我们想获取的：

<a href="/hello"when-active>Hello</a>

好了，我们现在可以写个测试：

it( 'should add "active" when the route changes', inject(function() {
    varelm = $compile(&#39;<a href="/hello" when-active>Hello</a>&#39;)( $scope );
 
    $location.path(&#39;/not-matching&#39;);
    expect( elm.hasClass(&#39;active&#39;) ).toBeFalsey();
 
    $location.path(&#39;/hello&#39;);
    expect( elm.hasClass(&#39;active&#39;) ).toBeTruthy();
}));

我们运行测试，并确认它是失败的。那么我们来写下我们的指令：

.directive( 'whenActive',function( $location ) {
    return{
        scope:true,
        link:function( scope, element, attrs ) {
            scope.$on('$routeChangeSuccess',function() {
                if( $location.path() == element.attr('href') ) {
                    element.addClass('active');
                }
                else{
                    element.removeClass('active');
                }
            });
        }
    };
});

现在我们的测试通过了，并且我们的菜单按照请求运行。我们的开发是迭代并且测试驱动的，太酷了哦！

5. 从概念上来看，指令不是打包的jQuery

你会经常听到“只在指令里做dom操作”。这是必要的。请对它表示出尊重！

但是让我们谈点更深入的。。。

一些指令只是装饰那些在视图里的已有的（想想ngClass），因此有时候就直接进行dom操作，基本上都能搞定。但是如果一个指令像个“widget”并有一个模板，

那它同样要遵守关注点分离原则。也就是说，这个模板也应该与它在链接和控制器函数里的实现保持最大的独立。

Angular.js自带着一套工具让这件事变得简单； 使用ngClass我们能够动态的更新类；ngBind允许双向的数据绑定；ngShow和ngHide以编程的方式显示或隐藏一个元素；还有更多–包括我们自己写的那些。换句话说， 我们可以不用DOM操作来实现所有的酷炫的事儿。 dom操作越少，指令越容易测试，它们也更容易样式化，在未来它们也更容易改变，并且也变得更加可重用和可分发。

我看到很多Angular.js开发新手将指令当做放置一堆jQuery的地方。换句话说， 他们认为：“既然我不能在控制器里做dom操纵，那么我就把这段代码放到指令里”。当然这看上去好多了，但是通常这仍然是错的。

想一下在第三节里我们编写的日志记录。即使我们将其放到一个指令里，我们仍然希望用“anggualjs方式”来做这件事情。这仍然没有做任何dom操作！在很多情况下dom操作是必须的，但是这种情况其实比你想的少得多！在你在你的应用中到处使用dmo操作之前，问问你自己，这真的是必须的吗。可能有更好的方法呢。

这里用一个简单的例子来展示我们经常会看到的一个模式。我们需要一个切换按钮。（注意：这个例子有那么一点人为设计的技巧并且有点啰嗦，但是很多更复杂的情况其实也完全可以根据这个例子的方式来解决。）

.directive( 'myDirective',function() {
    return{
        template:&#39;<a class="btn">Toggle me!</a>&#39;,
        link:function( scope, element, attrs ) {
            varon =false;
 
            $(element).click(function() {
                if( on ) {
                    $(element).removeClass(&#39;active&#39;);
                }
                else{
                    $(element).addClass(&#39;active&#39;);
                }
 
                on = !on;
            });
        }
    };
});

这里有一些错误。第一，jQuery不是必须的。我们这里做的一切都不需要jQuery！第二， 即使是我们的页面上已经有jQuery，也没有理由一定要在这里使用它；我们可以简单的使用angular.element，而且就算在一个没有jQuery的项目中我们的组件仍然可以工作。第三，即使我们假设为了让这个指令工作，jQuery是必须的，如果jqury被加载，那么jqLite（angler.element）一定会使用jQuery。所以我们不需要使用$（译者注：jQuery的一个标识符号，是jQuery函数的别名）–我们可以使用angular.element。第四， 紧接第三点，jqLite元素不需要被包裹在$里–传递给link函数的element已经是一个jQuery元素！第五， 我上一节已经提过的，为什么我们要将模板混合进我们的逻辑呢？

这个指令可以更精简的重写（即时在更复杂的例子里也一样）：

.directive( 'myDirective',function() {
    return{
        scope:true,
        template:&#39;<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>&#39;,
        link:function( scope, element, attrs ) {
            scope.on =false;
 
            scope.toggle =function() {
                scope.on = !$scope.on;
            };
        }
    };
});

再次强调，模板的那些代码都是在模板里的，所以你或者你的使用者能够很方便的将其换成一个符合任何需要的样式，同时逻辑不被改变。这就是重用性-赞！

当然，还有其它很多好处–比如测试 – 这很容易！ 不论什么在模板中，指令的内部API绝不会被接触，所以重构就变得容易。你可以在不接触指令的情况下随意改变你的模板。并且不论你怎么变，你的测试仍可以通过。

耶！

所以如果指令不只是一组jQuery风格的函数，那么它们是什么呢？指令其实就是html的扩展。如果html不能完成你希望它做的一些事情，你就写一个指令来做，并且当它是html的一部分来使用。

换句话说， 如果Angular.js一下子无法完成手头的工作，想想看你的团队是否能用ngClick、ngClass等来搞定它。

以上内容主要是关于会jQuery，该如何用AngularJS编程思想，希望对大家有帮助。

相关推荐：

AngularJs增删改查的方法

用AngularJS的实现自定义服务

AngularJs表单验证的方法

Das obige ist der detaillierte Inhalt vonSo verwenden Sie AngularJS-Programmierideen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!