美高梅官方网站3045-mgm6608美高梅app下载
目前主流的前端框架

目前主流的前端框架

作者:美高梅官方网站    来源:未知    发布时间:2020-01-19 21:59    浏览量:

如何定义解释Vue、AngularJS、React、bootstrap、easyUI使人容易理解?应该如何定义和解释这些框架:Vue、AngularJS、React、Bootstrap、easyUI使人更加快速和容易理解?发现网络上人们给上面这些框架的命名比较混乱,让人容易混淆。现在基本上绝大部分资料都把这些框架称之为“前端框架”,但是我简单了解了下,发现Vue、AngularJS、React和Bootstrap、easyUI根本就不是一个东西。Vue这些好像还带了数据变化自动刷新等等这些功能,而Bootstrap就仅仅只是界面的布局和排版。所以我觉得上面这些框架是不是应该这样划分:前端框架:Vue、AngularJS、React界面框架/UI框架:Bootstrap、easyUI至于简单介绍让人!清晰!易懂,我因为自己也不太清楚,所以想向熟悉的各位咨询,欢迎各位谈自己的理解和总结,让更多的人轻松了解,也尽量不要在让错误的概念一直“折磨”后来者。

4.Mint UI

八. 总结

Bootstrap中文网地址:

3. angular2

新出的例子少

如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已,现在的前端越来越复杂,知识点越来越丰富。要做WEB前端,就需要知道前端到底是什么,需要学习那些知识;前端至少要懂的三个部分:HTML,CSS,JavaScript(简称JS),那首先先明确这三个概念:

二. 数据流

美高梅官方网站3045,1.Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面。
实现原理:
$scope
变量中使用脏值检查来实现。像ember.js是基于setter,getter的观测机制,
$scope.$watch
函数,监视一个变量的变化。函数有三参数,”要观察什么”,”在变化时要发生什么”,以及你要监视的是一个变量还是一个对象。
使用ng-model时,你可以使用双向数据绑定。 使用$scope.$watch
(视图到模型)以及$scope.$apply
(模型到视图),还有$scope.$digest
双向绑定的三个重要方法:
$scope.$apply()$scope.$digest()$scope.$watch()
在AngularJS双向绑定中,有2个很重要的概念叫做dirty check,digest loop,dirty check(脏检测)是用来检查绑定的scope中的对象的状态的,例如,在js里创建了一个对象,并且把这个对象绑定在scope下,这样这个对象就处于digest loop中,loop通过遍历这些对象来发现他们是否改变,如果改变就会**调用相应的处理方法来实现双向绑定。

  1. Vue 也支持双向绑定,默认为单向绑定数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解
    Vue相比():
    Vue.js 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。Angular,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。
    并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。 Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。
    Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。

  2. React-单向数据流
    MVVM流的Angular和Vue,都是通过类似模板的语法,描述界面状态与数据的绑定关系,然后通过内部转换,把这个结构建立起来,当界面发生变化的时候,按照配置规则去更新相应的数据,然后,再根据配置好的规则去,从数据更新界面状态。
    React推崇的是函数式编程和单向数据流:给定原始界面(或数据),施加一个变化,就能推导出另外一个状态(界面或者数据的更新)。
    React和Vue都可以配合Redux来管理状态数据。

5.angular

  1. 开发语言技术,主要是ES6&7,coffeescript,typescript等;
  2. 开发框架,如Angular,React,Vue.js,Angular2等;
  3. 开发工具的丰富和前端工程化,像Grunt,Gulp,Webpack,npm,eslint,mocha这些技术;
    就开发框架这块,Angular(1&2),React,Vue目前占据着主流地位而且会相持比较长的一段时间,所以这里对比一下这三门技术,以便之后的技术选型。

6.React

4. 前端库实力参数对比

美高梅官方网站3045 1

image.png

以上3大框架均不支持IE8以下;
IE9以下解决方法:Bootstrap (在IE8也会不支持一些样式和属性)+jQuery;
其他框架稳定性欠缺

1.Bootstrap中文网

四. 性能与优化

性能方面,这几个主流框架都应该可以轻松应付大部分常见场景的性能需求,区别在于可优化性和优化对于开发体验的影响。Vue 的话需要加好 track-by 。React 需要 shouldComponentUpdate 或者全面 Immutable,Angular 2 需要手动指定 change detection strategy。从整体趋势上来说,浏览器和手机还会越变越快,框架本身的渲染性能在整个前端性能优化体系中,会渐渐淡化,更多的优化点还是在构建方式、缓存、图片加载、网络链路、HTTP/2 等方面。

近几年最火的前端框架当属Vue.js了,Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点”。授予了这么高的评价的vue.js,也是开源世界华人的骄傲,因为它的作者是位中国人

三. 视图渲染

  1. AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。AngularJS将会遍历DOM模板, 来生成相应的NG指令,所有的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM加载完成之后, 才开始起作用的。
    React
  2. React 的渲染建立在 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。当状态发生变化时,React 重新渲染 Virtual DOM,比较计算之后给真实 DOM 打补丁
    Virtual DOM 提供了函数式的方法描述视图,它不使用数据观察机制,每次更新都会重新渲染整个应用,因此从定义上保证了视图与数据的同步。它也开辟了 JavaScript 同构应用的可能性。
    超大量数据的首屏渲染速度上,React 有一定优势,因为 Vue 的渲染机制启动时候要做的工作比较多,而且 React 支持服务端渲染
    React 的 Virtual DOM 也需要优化。复杂的应用里可以选择 1. 手动添加 shouldComponentUpdate 来避免不需要的 vdom re-render;2. Components 尽可能都用 pureRenderMixin,然后采用 Flux 结构 + Immutable.js。其实也不是那么简单的。相比之下,Vue 由于采用依赖追踪,默认就是优化状态:动了多少数据,就触发多少更新,不多也不少
    React 和 Angular 2 都有服务端渲染和原生渲染的功能。
  3. Vue.js 不使用 Virtual DOM 而是使用真实 DOM 作为模板,数据绑定到真实节点。Vue.js 的应用环境必须提供 DOM。Vue.js 有时性能会比 React 好,而且几乎不用手工优化。
  1. Layui
1. 上手难度

Vue < react < angular

下一篇:没有了
友情链接: 网站地图
Copyright © 2015-2019 http://www.zen-40.com. mgm美高梅有限公司 版权所有