了解五个前端主流框架

Avery_66
2,377 阅读8分钟

了解先行五个前端框架

相关概念

  • 类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等
  • 框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。

目录

  1. Angular

  2. Vue

  3. React

  4. JQuery

  5. Bootstrap

  6. 个人总结

1. Angular

  1. 对Angular的简单认识
  • AngularJs是一款优秀的JS框架，已经被应用于很多Google产品中
  • 它是一个JavaScript框架，通过<script>标签添加到HTML页面
  • 它通过指令(如：ng-app、ng-model)扩展了HTML，用他的表达式将数据绑定到页面中
  • AngularJs是为了克服HTML在构建Web应用上的不足而设计的，通过指令让浏览器能识别新的语法
  1. 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表达式很像，可以包含文字、运算符、变量

  1. AngularJs优缺点
  • 优点
    1. 可以进行双向数据绑定，数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理，查询和监听DOM。数据绑定是的代码更少，你可以专注于你的应用
    2. 是一个比较完善的前端MVVM框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能
    3. 代码模块化，每个模块的代码独立拥有自己的作用域，model，controller等
    4. 强大的directive可以将很多功能封装成HTML的tag,属性或者注释等，这大大美化了HTML的结构，增强了可阅读性
    5. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助，我们的项目从上线到目前，UI变化很大，在摸索中迭代产品，但是js的代码基本上很少改动
  • 缺点
    1. .验证功能错误信息显示比较薄弱，需要写很多模板标签
    2. 从1.0.X升级到1.2.X，貌似有比较大的调整，没有完美兼容低版本，升级之后可能会导致一个兼容性的BUG
    3. AngularJs太笨重了

2. Vue

  1. 对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非常容易与其他库或已有项目整合
  1. Vue的优缺点
    • 优点
      1. 简单易用
      2. 容易上手，易于学习
      3. 轻量高效，压缩后仅20kb大小，利用虚拟DOM实现快速渲染
      4. 属于MMVM框架，如果写过复杂的DOM操作，就会感受到MMVM带来的便利
      5. 组件化Vue
    • 缺点
      1. 缺乏高阶学习教程
      2. 不支持IE8以下版本
      3. 生态环境差，不如angular和react
      4. 社区不大

3. React

  1. 对React的简单认识
  • React 是一个用于构建用户界面的 JAVASCRIPT 库
  • React主要用于构建UI，你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件
  • React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源
  • React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它
  1. React的优缺点
  • 优点
    1. 声明式设计 −React采用声明范式，可以轻松描述应用
    2. 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互
    3. 灵活 −React可以与已知的库或框架很好地配合
    4. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中
    5. 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单
  • 缺点
    1. 不适合单独做一个完整的框架，React是目标是UI组件，通常可以和其它框架组合使用，目前并不适合单独做一个完整的框架
    2. ReactJs的HTML模板功能即不完备也不健壮

4. JQuery

  1. 对JQuery的简单认识
  • jQuery是一个快速、简洁的JavaScript框架，也可以说是JavaScript代码库
  • jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情
  • JQuery极大的简化了JavaScript编程，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互
  • JQuery具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件
  • JQuery兼容多种主流浏览器
  1. JQuery的优缺点
  • 优点
    1. 可以很方便的使用JavaScript
    2. JQuery实现脚本与页面的分离
    3. 最少的代码做最多的事情
    4. 性能支持比较好，在大型JavaScript框架中，jQuery对性能的理解最好。尽管不同版本拥有众多新功能，其最精简版本只有18KB大小，这个数字已经很难再减少。jQuery的每一个版本都有重大性能提高。如果将其与新一代具有更快JavaScript引擎的浏览器(如火狐3和谷歌Chrome)配合使用，开发者在创建富体验Web应用时将拥有全新速度优势。
    5. JQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，JQuery简化了原本使用JavaScript代码需要处理的方式。
  • 缺点
    1. 不能向后兼容，每一个新版本不能兼容早期的版本
    2. 多个插件冲突，在同一页面上使用多个插件时，很容易碰到冲突现象，尤其是这些插件依赖相同事件或selector时最为明显。这虽然不是jQuery自身的问题，但却又确实是一个难于调试和解决的问题。
    3. JQuery核心代码库对动画和特效的支持相对较差

5. Bootstrap

  1. 对Bootstrap的简单认识
  • Bootstrap是基于HTML、CSS、JavaScript的
  • Bootstrap是一个用于快速开发Web应用程序和网站的前端框架
  • Bootstrap是由动态CSS语言Less写成的
  • Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构
  • Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统
  • Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等
  • Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件
  • 您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本
  • Bootstrap依赖于JQuery
  1. Bootstrap的优缺点
  • 优点
  1. 跨设备、跨浏览器，可兼容所有现代浏览器
  2. 它提供了一套响应式、移动设备优先的流式栅格系统。它可以根据用户屏幕尺寸调整界面，使其在各个尺寸都表现良好
  3. Bootstrap预定义了很多CSS类，用的时候直接给class赋予相应类名即可
  4. Bootstrap提供了很多实用性的JQuery插件，这些插件方便开发者实现WEB中各种常规特效
  5. Bootstrap提供了实用性很强的组件，包括：导航，标签，工具条，按钮等供开发者使用
  • 缺点
  1. 对IE兼容有不小的问题，Bootstrap将所有元素盒模型都设置成border-box，这是IE混杂模式下的盒模型
  2. Bootstrap用了大量HTML5和CSS3语法，这些语法在兼容性方面同样存在不小的问题
  3. 如果有自己特殊要求需要重新定制样式，那么就要做大量的CSS重写

6. 个人总结

在初步了解了五个主流框架后，或多或少也有一些体会，Angular比较笨重，React和Vue简单易学，轻量高效，着重于视图层，JQuery极大的简化了JavaScript的编写，而Bootstrap则提供很多CSS预定义类。但这只是停留在初步认识层面，只有当实践过之后才会真正领会到这些框架的不同，特点，优缺点。

avatar
文章
阅读
粉丝