了解的五个前端框架

了解的五个前端框架

• 首先简单总结一下：之前没有接触过前端框架这个，经过最近一段时间的学习，学的也不是很深入只是大概的了解了一哈，感觉框架这个东西，就是把一些基础的零件给你做了出来，方便了很多，不用像之前一样很多东西都要自己来码。

• jQuery UI

  • 简介

    jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库，可以使用它创建高度交互的 Web 应用程序。

  • 优点

    1.jQuery 简易使用,提供高度抽象接口，短期改善网站易用性

    2.采用 MIT & GPL 双协议授权，轻松满足自由产品至企业产品各种授权需求

    3.兼容各主流桌面浏览器。包括IE 6+、Firefox 2+、Safari 3+、Opera 9+、Chrome 1+

    4.组件间相对独立，可按需加载，避免浪费带宽拖慢网页打开速度

    5.支持 WAI-ARIA，通过标准 XHTML 代码提供渐进增强，保证低端环境可访问性

    6.提供近 20 种预设主题，并可自定义多达 60 项可配置样式规则，提供 24 种背景纹理选择

  • 不足

    1.代码不够健壮：缺乏全面的测试用例，部分组件 Bugs 较多，不能达到企业级产品开发要求。

    2.构架规划不足：组件间 API 缺乏协调，缺乏配合使用帮助

    3.控件较少：相对于 Dojo、YUI、Ext JS 等成熟产品，可用控件较少，无法满足复杂界面功能要求。

• React

  • 简介

    React 是一个用于构建用户界面的 JAVASCRIPT 库起源于 Facebook 的内部项目，用来架设 Instagram 的网站，拥有较高的性能，代码逻辑非常简单，主要用于构建UI

  • 优点

    1.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

    2.灵活 −React可以与已知的库或框架很好地配合。

    3.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

    4.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

    5.声明式设计−React采用声明范式，可以轻松描述应用。

  • 缺点

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

• BOOTstrap

  • 简介

    • 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
    • CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
    • 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件部分详细讲解。
    • JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。

  • 优点

    • 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
    • 浏览器支持：所有的主流浏览器都支持 Bootstrap。
    • 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
    • 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

  • 不足

    对IE兼容也存在不小的问题，BT将所有的元素盒模型都设置成了border-box，这是IE混杂模式下的盒模型，光这点就导致了不能兼容IE。此外还用到了大量的H5标签以及CSS3语法，这些语法标签兼容性方面同样存在不小的问题

• Vue.js

  • 简介

    是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

  • 优点

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

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

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

    4. 紧凑：~18kb min+gzip，且无依赖。

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

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

  • 缺点

    1.Vue.js是一个新的项目，没有angular那么成熟。

    2.Vue.js多样性或者说丰富性少于其他一些有名的库。

    3.不支持IE8

• AngularJS

  • 简介

    AngularJS 是一个 JavaScript****框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到HTML 页面。

    AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。

    AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。

  • 简介

    1. 模板功能强大丰富，自带了极其丰富的angular指令。

    2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；

    3. 自定义指令，自定义指令后可以在项目中多次使用。

    4. angler模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。

    5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

  • 缺点

    1. angular 入门很容易 但深入后概念很多, 学习中较难理解.

    2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.

    3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.

    4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.

    5. DI 依赖注入 如果代码压缩需要显示声明.

• 总结

  • 了解这么几个主流的框架对框架的了解也有了一定的感觉，框架感觉就是一个个的一个个现成的积木一样。虽然我还没有用过但应该会比现在我全部都自己敲来的快，就像Java的库一样直接引用就行了。总的来说JQ简单兼容性好还有多种预设主题，但还不够成熟，部分组件Bug较多；React比较小巧灵活但不合适大型项目；BS的话比较成熟控件也很多但对IE的兼容性是个问题；Vue简单易学也很强大但毕竟还不够成熟IE8也不兼容；Anguler的话是很强大但是深入学习就难了资料不好找。