angularjs和js的区别

JavaScript017

angularjs和js的区别,第1张

1.不要首先设计好你的页面,然后再通过DOM操作去修改它

在jQuery中,你首先设计了一个page,然后再去动态修改它的内容,这是因为jQuery被设计用来进行扩展并在这个前提下大幅度地增加和修改内容,但是在angularjs中,你必须在心中先设计好你的架构,

从一开始,你就要摒弃“我拥有一个DOM元素并且想让它去做某件事”,代之为“需要完成什么任务,然后接着设计你的应用,最后再去设计你的视图view层”。

2.不要使用angularjs去扩展jQuery

相应地,不要存在说让jQuery去干某些事情,然后在此基础上添加angularjs的功能让它去管理model以及controller的想法。所以一般不推荐AngularJS开发新手同时使用jQuery,至少在他们还没有适应AngularJS的开发模式之前不会去推荐这样做,但是当你真正开始适应angularjs 的方式之后,你会发觉这是一件很诱人的事情。

曾经看到过很多开发者采用将150到200行代码的jQuery插件利用angularjs的回调以及$apply方法封装起来,这种方式使得代码看起来极其复杂,但是实际上他们让这些插件跑起来了!问题在于,在大部分情况下jQuery插件能够用angularjs进行重写,并且可能只会使用很少量的代码,同时这种重写使得代码很直观且易于理解,这显然好过于将jQuery代码直接做封装。

所以最后说,当你遇见问题的时候,首先要以angularjs的思维进行思考,如果找不到解决方案,可以求助于社区,如果说没有人能够给出一个简单的方案,那么才考虑使用jQuery,不要让jQuery成为你的拐杖,否则你永远掌握不了AngularJS。

3.要以架构为中心进行思考

首先你要知道单页应用属于web应用,它们不是传统的多网页网站,所以要同时作为一个服务端和客户端开发者的思维进行思考,需要思考如何将我们的应用分为独立的,可扩展的以及可测试的部分。

数据绑定

这是到目前为止AngularJS最令人瞩目的特性了,在数据绑定方面它舍弃了对DOM的操作方式,而这一切都是由AngularJS来自动更新视图,你不必写操作dom的代码,在jQuery中,常常按照响应事件并修改视图

区别model层

在jQuery中,DOM类似于一种model,但是在AngularJS中,拥有不同于jQuery中的model层以便可以以任何我们想要的方式去管理它,它是完全独立于视图之外的。这种方式是有助于进行数据绑定并且可以保持对分离的关注,而且可以具备更好的可测试性。

关注点分离

以上所讲都和这个总体的话题相关:让你关注分离,你的视图层显示记录,你的model层代表数据,你还有个服务层用来执行这些可复用的任务。你使用directive来执行dom操作并扩展你的视图,并将它和controller连接起来,这也就是在其他方面提到的有关于增强可测试性的原因。

依赖注入

帮助解决关注点分离的是依赖注入(DI),如果你是一个服务端开发者(Java或者PHP),你可能已经很熟悉这个概念了,但是如果你是从事客户端开发的,你会觉得这个概念可能有些多余和纯属追求时髦,但是实际上不是这样。

从广义的角度讲,DI意味着你可以自由地声明组件然后从这些组件中进行实例化,这是理所当然的。你不必知道加载顺序,文件位置等诸如此类的事情,这种魔力不是能够立即看到,但是会给出一个例子:测试。

说在应用中,需要一个依赖于应用状态和本地存储的服务用来通过一个rest API来执行服务端存储,当我们测试我们的controller时,不必和服务端进行通信,毕竟只是在测试controller而已。仅添加一个与我们最初组件相同的mock服务,注入器能够确保controller获得一个虚拟的服务,controller自身不必也不需要了解这种差异。

4.以测试驱动的开发

这部分是一个架构的第三部分,但是他是很重要的,以至于需要将它放在最重要的位置。

在所有见过的,用过的以及写过的jQuery插件中,有多少具有一套测试组件呢?其实并不多,这是因为jQuery在测试上不易控制,但是AngularJS却与此不同。

在jQuery中,测试的唯一方法是使用一个demo页去创建一个独立组件来使得的测试可以执行dom操作。接下来我们必须开发一个独立的组件然后将它集成到的应用中来,这是多不方便啊!在很多情况下,当使用jQuery开发实际上是做了很多重复开发而不是以测试驱动的开发,

但是在AngularJS中我们可以关注分离点,所以可以做一些测试驱动的开发。

5.从概念上讲,指令不是打包的jQuery

你常常听说,dom操作只能在指令中,这是必须的,你必须严肃对待。

深入讨论,

某些指令仅仅是装饰视图(例如ngClass),因此有时候直接操作dom是可以的,但是当一个指令类似于一个小物件并且拥有自己的模板,那么它应该当做一个分离的关注点,这就是说,它的模板需要和link中的执行逻辑以及其他controller函数分离开。

AngularJS拥有一整套的工具可以是这种分离更简单,使用ngClass指令,可以动态地更新class,使用ngBind可以进行双向数据绑定,使用ngShow和ngHide 我们

可以采用编程的形式显示和隐藏一个元素,也包括自己写的很多指令。换句话说,可以不用Dom操作而完成所有工作,dom操作越少,指令越容易测试,越容易指定他们的style属性,就越容易在将来改变他们,那么他们就越容易复用和分发。

看过很多AngularJS新手使用指令封装一大串 jQuery代码,换句话说,既然不能在controller里面进行dom操作,那么我可以将他放在指令中,虽然这相对于直接操作dom好很多,但是任然是错误的。

看看在上面的记录,即使我们将其放在一个指令中,任然需要以Angular的方式去操作它,这种方式不执行dom操作!在很多时候dom操作是需要的,但是这种情况比你想的要少得多。当需要做dom操作的时候先问问自己这里是否必须这样做,这才是一种更好的方式。

总结

不要总使用jquery ,甚至不要去引用它,它会阻止你前进,当回到这个问题—你知道你怎么在AngularJS中以jquery方式解决问题,但是当你使用诸如$等选择器时,你要想想它们实际上是禁锢了AngularJS,如果你不知道怎么不用jQuery实现,那么去请教别人,一次一次去问,最好的方式是不需要使用jQuery,使用jQuery只会导致你的工作量提升。

React 和 Vue 有许多相似之处,它们都有:

1.使用 Virtual DOM

2.提供了响应式(Reactive)和组件化(Composable)的视图组件。

3.将注意力集中保持在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库。

React 和 Vue 的区别:

1.复杂性

在 API 与设计两方面上 Vue.js 都比 Angular 1 简单得多,因此你可以快速地掌握它的全部特性并投入开发。

2.灵活性和模块化

Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序,而不是在任何时候都必须遵循 Angular 1 制定的规则,这让 Vue 能适用于各种项目。我们知道把决定权交给你是非常必要的。

这也就是为什么我们提供 Webpack template,让你可以用几分钟,去选择是否启用高级特性,比如热模块加载、linting、CSS 提取等等。

3.数据绑定

Angular 1 使用双向绑定,Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。

4.指令与组件

在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作,而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。在 Angular 中两者有不少相混的地方。

5.性能

Vue 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。

Vue.js 是一个用来开发Web 界面的前端库。《Vue.js权威指南》致力于普及国内Vue.js 技术体系,让更多喜欢前端的人员了解和学习Vue.js。如果你对Vue.js 基础知识感兴趣,如果你对源码解析感兴趣,如果你对Vue.js 2.0感兴趣,如果你对主流打包工具感兴趣,如果你对如何实践感兴趣,《Vue.js权威指南》都是一本不容错过的以示例代码为引导、知识涵盖全面的最佳选择。

《Vue.js权威指南》一共30 章,由浅入深地讲解了Vue.js 基本语法及源码解析。主要内容包括数据绑定、指令、表单控件绑定、过滤器、组件、表单验证、服务通信、路由和视图、vue-cli、测试开发和调试、源码解析及主流打包构建工具等。该书内容全面,讲解细致,示例丰富,适用于各层次的开发者。