[javascript] “在AngularJS中思考”如果我有一个jQuery背景?


Answers

命令式→声明式

在jQuery中, 选择器用于查找DOM元素,然后绑定/注册事件处理程序。 当事件触发时,该(必要的)代码将执行以更新/更改DOM。

在AngularJS中,您想要考虑视图而不是DOM元素。 视图是包含AngularJS 指令的 (声明式)HTML。 指令为我们在幕后设置事件处理程序,并为我们提供动态数据绑定。 选择器很少使用,因此对ID(以及某些类的类型)的需求大大减少。 视图与模型绑定(通过范围)。 视图是模型的投影。 事件更改模型(即数据,范围属性),以及投影这些模型的视图“自动”更新。

在AngularJS中,考虑一下模型,而不是jQuery选择的DOM元素来保存你的数据。 将视图看作是对这些模型的预测,而不是注册回调来操纵用户看到的内容。

关注点分离

jQuery采用了不显眼的JavaScript - 行为(JavaScript)与结构(HTML)分离。

AngularJS使用控制器和指令(每个控制器和指令都可以拥有自己的控制器,和/或编译和链接函数)来从视图/结构(HTML)中移除行为。 Angular还提供服务过滤器来帮助分离/组织您的应用程序。

另请参阅https://stackoverflow.com/a/14346528/215945

应用设计

设计AngularJS应用程序的一种方法:

  1. 想想你的模型。 为这些模型创建服务或您自己的JavaScript对象。
  2. 想想你想如何展示你的模型 - 你的观点。 为每个视图创建HTML模板,使用必要的指令获取动态数据绑定。
  3. 将控制器连接到每个视图(使用ng-view和routing或ng-controller)。 让控制器仅查找/获取视图需要完成其工作的任何模型数据。 尽可能使控制器变薄。

原型继承

不用了解JavaScript原型继承如何工作,就可以用jQuery做很多事情。 在开发AngularJS应用程序时,如果你对JavaScript继承有很好的理解,你将避免一些常见的陷阱。 推荐阅读: AngularJS中范围原型/原型继承的细微差别是什么?

Question

假设我熟悉在jQuery开发客户端应用程序,但现在我想开始使用AngularJS 。 你能描述一下必要的范式转变吗? 这里有几个问题可以帮助你构建一个答案:

  • 我如何构建和设计不同的客户端Web应用程序? 最大的区别是什么?
  • 我应该停止做什么/使用什么; 我应该开始做什么/使用什么?
  • 有没有服务器端考虑/限制?

我没有在jQueryAngularJS之间寻找详细的比较。




jQuery的

jQuery makes ridiculously long JavaScript commands like getElementByHerpDerp shorter and cross-browser.

AngularJS

AngularJS allows you to make your own HTML tags/attributes that do things which work well with dynamic web applications (since HTML was designed for static pages).

编辑:

Saying "I have a jQuery background how do I think in AngularJS?" is like saying "I have an HTML background how do I think in JavaScript?" The fact that you're asking the question shows you most likely don't understand the fundamental purposes of these two resources. This is why I chose to answer the question by simply pointing out the fundamental difference rather than going through the list saying "AngularJS makes use of directives whereas jQuery uses CSS selectors to make a jQuery object which does this and that etc....". This question does not require a lengthy answer.

jQuery is a way to make programming JavaScript in the browser easier. Shorter, cross-browser commands, etc.

AngularJS extends HTML, so you don't have to put <div> all over the place just to make an application. It makes HTML actually work for applications rather than what it was designed for, which is static, educational web pages. It accomplishes this in a roundabout way using JavaScript, but fundamentally it is an extension of HTML, not JavaScript.




They're apples and oranges. You don't want to compare them. They're two different things. AngularJs has already jQuery lite built in which allows you to perform basic DOM manipulation without even including the full blown jQuery version.

jQuery is all about DOM manipulation. It solves all the cross browser pain otherwise you will have to deal with but it's not a framework that allows you to divide your app into components like AngularJS.

A nice thing about AngularJs is that it allows you to separate/isolate the DOM manipulation in the directives. There are built-in directives ready for you to use such as ng-click. You can create your own custom directives that will contain all your view logic or DOM manipulation so you don't end up mingle DOM manipulation code in the controllers or services that should take care of the business logic.

Angular breaks down your app into - Controllers - Services - Views - etc.

and there is one more thing, that's the directive. It's an attribute you can attach to any DOM element and you can go nuts with jQuery within it without worrying about your jQuery ever conflicts with AngularJs components or messes up with its architecture.

I heard from a meetup I attended, one of the founders of Angular said they worked really hard to separate out the DOM manipulation so do not try to include them back in.




I find this question interesting, because my first serious exposure to JavaScript programming was Node.js and AngularJS. I never learned jQuery, and I guess that's a good thing, because I don't have to unlearn anything. In fact, I actively avoid jQuery solutions to my problems, and instead, solely look for an "AngularJS way" to solve them. So, I guess my answer to this question would essentially boil down to, "think like someone who never learned jQuery" and avoid any temptation to incorporate jQuery directly (obviously AngularJS uses it to some extent behind the scenes).




jQuery is a DOM manipulation library.

AngularJS is an MV* framework.

In fact, AngularJS is one of the few JavaScript MV* frameworks (many JavaScript MVC tools still fall under the category library).

Being a framework, it hosts your code and takes ownership of decisions about what to call and when!

AngularJS itself includes a jQuery-lite edition within it. So for some basic DOM selection/manipulation, you really don't have to include the jQuery library (it saves many bytes to run on the network.)

AngularJS has the concept of "Directives" for DOM manipulation and designing reusable UI components, so you should use it whenever you feel the need of doing DOM manipulation related stuff (directives are only place where you should write jQuery code while using AngularJS).

AngularJS involves some learning curve (more than jQuery :-).

-->For any developer coming from jQuery background, my first advice would be to "learn JavaScript as a first class language before jumping onto a rich framework like AngularJS!" I learned the above fact the hard way.

祝你好运。




Can you describe the paradigm shift that is necessary?

Imperative vs Declarative

With jQuery you tell the DOM what needs to happen, step by step. With AngularJS you describe what results you want but not how to do it. More on this here . Also, check out Mark Rajcok's answer.

How do I architect and design client-side web apps differently?

AngularJS is an entire client-side framework that uses the MVC pattern (check out their graphical representation ). It greatly focuses on separation of concerns.

What is the biggest difference? What should I stop doing/using; what should I start doing/using instead?

jQuery is a library

AngularJS is a beautiful client-side framework, highly testable, that combines tons of cool stuff such as MVC, dependency injection , data binding and much more.

It focuses on separation of concerns and testing ( unit testing and end-to-end testing), which facilitates test-driven development.

The best way to start is going through their awesome tutorial . You can go through the steps in a couple of hours; however, in case you want to master the concepts behind the scenes, they include a myriad of reference for further reading.

Are there any server-side considerations/restrictions?

You may use it on existing applications where you are already using pure jQuery. However, if you want to fully take advantage of the AngularJS features you may consider coding the server side using a RESTful approach.

Doing so will allow you to leverage their resource factory , which creates an abstraction of your server side RESTful API and makes server-side calls (get, save, delete, etc.) incredibly easy.




As a JavaScript MV* beginner and purely focusing on the application architecture (not the server/client-side matters), I would certainly recommend the following resource (which I am surprised wasn't mentioned yet): JavaScript Design Patterns , by Addy Osmani, as an introduction to different JavaScript Design Patterns . The terms used in this answer are taken from the linked document above. I'm not going to repeat what was worded really well in the accepted answer. Instead, this answer links back to the theoretical backgrounds which power AngularJS (and other libraries).

Like me, you will quickly realize that AngularJS (or Ember.js , Durandal, & other MV* frameworks for that matter) is one complex framework assembling many of the different JavaScript design patterns.

I found it easier also, to test (1) native JavaScript code and (2) smaller libraries for each one of these patterns separately before diving into one global framework. This allowed me to better understand which crucial issues a framework adresses (because you are personally faced with the problem).

例如:

  • JavaScript Object-oriented Programming (this is a Google search link). It is not a library, but certainly a prerequisite to any application programming. It taught me the native implementations of the prototype, constructor, singleton & decorator patterns
  • jQuery / Underscore for the facade pattern (like WYSIWYG's for manipulating the DOM)
  • Prototype.js for the prototype/ constructor/ mixin pattern
  • RequireJS / Curl.js for the module pattern/ AMD
  • KnockoutJS for the observable, publish/subscribe pattern

NB: This list is not complete, nor 'the best libraries'; they just happen to be the libraries I used. These libraries also include more patterns, the ones mentioned are just their main focuses or original intents. If you feel something is missing from this list, please do mention it in the comments, and I will be glad to add it.




Links