常用流行的前端框架简介

        目前,前端框架琳琅满目,在技术选型的时候,感觉还是有点困难。下面简单说下常用的一些流行的前端框架。

首先说下前后端分离的前端框架

一、angular JS

angularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中。

 优点:

1.新版本TypeScript: TypeScript还带来了ECMAScript新版本的所有优点,包括类语法、箭头函数、异步和等待等。此外,还添加了诸如接口、泛型和方法访问修饰符之类的已建立的OOP实践,使新成员能平滑的从Java和C#等语言向Web生态系统过渡。

2.工具: Angular是一个框架而不是一个库,因此在“事情应该如何完成”方面和能使用的相关特性方面,它提供了一个“完整的解决方案”。与诸如React和Vue等库相比,大多主要的部分包括:路由、HTTP客户端、动画、表单处理和验证等。

3.可扩展性:由于其设计和工作方式,Angular很容易就能扩展。在您遇到任何可扩展性问题和错乱的代码之前,可能在围绕独立的、可测试的、可插拔模块、延迟加载、统一数据流和类似于Redux状态管理来设计您的应用程序上花费很多时间。在这种架构下,可以让更大的团队轻松地在代码库的不同部分上工作,不必担心出现打乱工作代码或者妨碍到彼此工作的情况。通常如与require.js 并用引入其他如kendo.js 、JQ等一起使用

缺点:

1.复杂性和代码膨胀:学习成本较大。并且angular.js 包比React和Vue大了好几倍,在移动设备上主要造成了加载时间超长和性能问题。生成的代码是冗长的。

2.浏览器兼容问题 :不支持低版本浏览器

二、VUE JS

 其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库。Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组件系统。

 优点:

1. 简单:官方文档很清晰,比 Angular 简单易学。

2. 快速:异步批处理方式更新 DOM。

3. 组合:用解耦的、可复用的组件组合你的应用程序。

4. 紧凑:~18kb min+gzip,且无依赖。

5. 强大:表达式 & 无需声明依赖的可推导属性 (computed properties)。

6. 对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫你所有的代码都遵循 Angular 的各种规定,使用场景更加灵活。

缺点: 

1. 影响度不是很大:google了一下,有关于Vue.js多样性或者说丰富性少于其他一些有名的库。

2. 不支持低版本浏览器:

三、React JS

      React主要用于构建UI。你可以在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

 优点:

1. 速度快:在UI渲染过程中,React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。

2. 跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。

3. 模块化:为你程序编写独立的模块化UI组件,这样当某个或某些组件出现问题是,可以方便地进行隔离。

4. 单向数据流:Flux是一个用于在JavaScript应用中创建单向数据层的架构,它随着React视图库的开发而被Facebook概念化。

5. 同构、纯粹的javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。

6. 兼容性好:比如使用RequireJS来加载和打包,而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

缺点:

1. React本身只是一个V而已,并不是一个完整的框架,所以如果是大型项目想要一套完整的框架的话,基本都需要加上ReactRouter和Flux才能写大型应用。

其他常用的流行前端框架

一、extjs

优点:

1. UI组件丰富,外观漂亮。

2. 浏览器兼容性好。

3. 有丰富的动画效果,提高了用户的感知度。

4. 和后台代码无关。

5. 将Web程序向桌面系统转化。

6. 相对丰富的文档和示例。

缺点:

1. 体积较大,速度稍慢。

2. 不是免费的。

3. 没有合适的开发利器。

4. 没有界面设计工具。

5. 不能编译。

二、MiniUI

优点:功能强大,组件全(官方封装比较多),使用简单。

缺点:UI样式不怎么优秀,不是很好看。

三、jQuery UI

jQuery UI则是在jQuery的基础上,利用jQuery的扩展性,设计的插件。提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等;

jQuery本身注重于后台,没有漂亮的界面,而jQuery UI则补充了前者的不足,他提供了华丽的展示界面,使人更容易接受。既有强大的后台,又有华丽的前台。jQuery UI是jQuery插件,只不过专指由jQuery官方维护的UI方向的插件。

四、Dojo

优点:库相当完善,发展时间也比较长,功能强大。

缺点:文件体积比较大,200多KB,初次下载相当慢,此外,dojo的类库使用显得不是那么易用。

五、ZK

优点:ZK包含了一个以AJAX为基础、事件驱动(event-driven)、高互动性的引擎,同时还提供了多样丰富、可重复使用的XUL与HTML组件,以 及以 XML 为基础的使用接口设计语言 ZK User-interfaces Markup Language (ZUML)。

缺点:文档虽然齐全。但是相关Demo较少。

六、AmazeUI

优点:中国首个开源 HTML5 跨屏前端框架,amazeUI的默认界面更扁平化一些,组件丰富,模块化本地化支持(兼容PC 移动)轻量级,高性能。

缺点:体积大于Bootstrap,交互较复杂的(如管理后台)应用场景不够用。相对来说比较臃肿。

七、BootStrap

优点:扩展性强,该框架不断适应web技术的发展。比较成熟,在大量的项目中充分的使用和测试。拥有完善的文档,使用起来更方便。 Bootstrap提供了非常豐富的组件与插件,组件包含小图标、按钮组、菜单导航、标签页等等[3],并接受定制,拥有现成UI组件,可以快速搭建网页页面。前端处理简洁,在Blog系统搭建过程中使用方便。对高版本浏览器和移动端兼容性好。

缺点:对于有特殊需求的使用者,bootstrap框架会对其带来较大的麻烦,需要做大量的css重写来改善非bootstrap“风格”的样式,导致该网站失去使用框架的意义。对低版本浏览器兼容性不太好,定制会产生大量代码冗余,使用者利用css把原有的样式覆盖,当修改较多时被覆盖的代码没有了使用价值。Bootstrap框架设计使得HTML不再是语义及表现和内容分离的,最终会导致一堆充斥着class的DOM元素,不遵循最佳实践。部分开发人员会觉得相当刺眼,因为对扩展性,重用性和维护更是个挑战。

八、QUICK UI

优点:拥有良好的性能和兼容,丰富的组件,表单控件种类非常丰富,大量的图形化组件。例如矢量地图。新版本的QUICK UI还针对大数据的可视化展现方面,推出了一系列的展示模板。

缺点:Demo较少。收费的。也有免费版。


以上只是个人的一些看法,当然还有其他优秀的前端框架。排序也只是整理的顺序。整体来说。在选型的时候还得考虑其他因素。选择一款合适的前端框架。

你可能感兴趣的:(常用流行的前端框架简介)