了解先行五个前端框架
相关概念
- 类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等
- 框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。
目录
1. Angular
- 对Angular的简单认识
- AngularJs是一款优秀的JS框架,已经被应用于很多Google产品中
- 它是一个JavaScript框架,通过
<script>
标签添加到HTML页面- 它通过指令(如:ng-app、ng-model)扩展了HTML,用他的表达式将数据绑定到页面中
- AngularJs是为了克服HTML在构建Web应用上的不足而设计的,通过指令让浏览器能识别新的语法
- Angular的使用
- 先通过
<script>
标签添加到网页具体是:
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
- 通过AngularJs指令扩展HTML
具体为给HTML元素新增一个属性,属性名即指令名,如给
<div>
标签添加ng-app
指令(属性):<div ng-app="">
,这是告诉AngularJs,这个标签是AngularJs应用程序的所有者,还有其他指令如:ng-model把输入的值绑定到应用程序变量,这里不在一一详细介绍。 - 通过表达式将数据绑定到HTML
表达式用
{{}}
括起,和JavaScript表达式很像,可以包含文字、运算符、变量
- AngularJs优缺点
- 优点
- 可以进行双向数据绑定,数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理,查询和监听DOM。数据绑定是的代码更少,你可以专注于你的应用
- 是一个比较完善的前端MVVM框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能
- 代码模块化,每个模块的代码独立拥有自己的作用域,model,controller等
- 强大的directive可以将很多功能封装成HTML的tag,属性或者注释等,这大大美化了HTML的结构,增强了可阅读性
- ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助,我们的项目从上线到目前,UI变化很大,在摸索中迭代产品,但是js的代码基本上很少改动
- 缺点
- .验证功能错误信息显示比较薄弱,需要写很多模板标签
- 从1.0.X升级到1.2.X,貌似有比较大的调整,没有完美兼容低版本,升级之后可能会导致一个兼容性的BUG
- AngularJs太笨重了
2. Vue
- 对Vue的简单认识
- Vue.js是一套构建用户界面的渐进式框架
- Vue只关注视图层,采用自底向上增量开发的设计
- Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
- Vue 学习起来非常简单
- Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性
- 通过
<script>
标签引入,如:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- Vue非常容易与其他库或已有项目整合
- Vue的优缺点
- 优点
- 简单易用
- 容易上手,易于学习
- 轻量高效,压缩后仅20kb大小,利用虚拟DOM实现快速渲染
- 属于MMVM框架,如果写过复杂的DOM操作,就会感受到MMVM带来的便利
- 组件化Vue
- 缺点
- 缺乏高阶学习教程
- 不支持IE8以下版本
- 生态环境差,不如angular和react
- 社区不大
- 优点
3. React
- 对React的简单认识
- React 是一个用于构建用户界面的 JAVASCRIPT 库
- React主要用于构建UI,你可以在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件
- React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源
- React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它
- React的优缺点
- 优点
- 声明式设计 −React采用声明范式,可以轻松描述应用
- 高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互
- 灵活 −React可以与已知的库或框架很好地配合
- 组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中
- 单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单
- 缺点
- 不适合单独做一个完整的框架,React是目标是UI组件,通常可以和其它框架组合使用,目前并不适合单独做一个完整的框架
- ReactJs的HTML模板功能即不完备也不健壮
4. JQuery
- 对JQuery的简单认识
- jQuery是一个快速、简洁的JavaScript框架,也可以说是JavaScript代码库
- jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情
- JQuery极大的简化了JavaScript编程,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互
- JQuery具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件
- JQuery兼容多种主流浏览器
- JQuery的优缺点
- 优点
- 可以很方便的使用JavaScript
- JQuery实现脚本与页面的分离
- 最少的代码做最多的事情
- 性能支持比较好,在大型JavaScript框架中,jQuery对性能的理解最好。尽管不同版本拥有众多新功能,其最精简版本只有18KB大小,这个数字已经很难再减少。jQuery的每一个版本都有重大性能提高。如果将其与新一代具有更快JavaScript引擎的浏览器(如火狐3和谷歌Chrome)配合使用,开发者在创建富体验Web应用时将拥有全新速度优势。
- JQuery可以修改网页中的内容,比如更改网页的文本、插入或者翻转网页图像,JQuery简化了原本使用JavaScript代码需要处理的方式。
- 缺点
- 不能向后兼容,每一个新版本不能兼容早期的版本
- 多个插件冲突,在同一页面上使用多个插件时,很容易碰到冲突现象,尤其是这些插件依赖相同事件或selector时最为明显。这虽然不是jQuery自身的问题,但却又确实是一个难于调试和解决的问题。
- JQuery核心代码库对动画和特效的支持相对较差
5. Bootstrap
- 对Bootstrap的简单认识
- Bootstrap是基于HTML、CSS、JavaScript的
- Bootstrap是一个用于快速开发Web应用程序和网站的前端框架
- Bootstrap是由动态CSS语言Less写成的
- Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构
- Bootstrap 自带以下特性:全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统
- Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等
- Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件
- 您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本
- Bootstrap依赖于JQuery
- Bootstrap的优缺点
- 优点
- 跨设备、跨浏览器,可兼容所有现代浏览器
- 它提供了一套响应式、移动设备优先的流式栅格系统。它可以根据用户屏幕尺寸调整界面,使其在各个尺寸都表现良好
- Bootstrap预定义了很多CSS类,用的时候直接给class赋予相应类名即可
- Bootstrap提供了很多实用性的JQuery插件,这些插件方便开发者实现WEB中各种常规特效
- Bootstrap提供了实用性很强的组件,包括:导航,标签,工具条,按钮等供开发者使用
- 缺点
- 对IE兼容有不小的问题,Bootstrap将所有元素盒模型都设置成border-box,这是IE混杂模式下的盒模型
- Bootstrap用了大量HTML5和CSS3语法,这些语法在兼容性方面同样存在不小的问题
- 如果有自己特殊要求需要重新定制样式,那么就要做大量的CSS重写
6. 个人总结
在初步了解了五个主流框架后,或多或少也有一些体会,Angular比较笨重,React和Vue简单易学,轻量高效,着重于视图层,JQuery极大的简化了JavaScript的编写,而Bootstrap则提供很多CSS预定义类。但这只是停留在初步认识层面,只有当实践过之后才会真正领会到这些框架的不同,特点,优缺点。