Web前端框架教程.doc

定义 1.前端框架一般指用于简化网页设计的框架，比如，jquery，extjs，bootstrap等等，这些框架封装了一些功能，比如html文档操作，漂亮的各种控件（按钮，表单等等）。 2.使用前段框架可以降低界面开发周期和提高界面的美观性。 3.有些框架比较轻量，比如jquery，有些框架比较重量，比如extjs。一般来说重量的框架会封装更多的功能，比如extjs，封装的grid控件有很强的数据展示和操作功能。 HTML5前端框架 1.JX（腾讯） JX 是一个类似 Google Closure Library 的 Web 前端开发框架，服役于 WebQQ 等大规模的 WebApp。 JX 是模块化的非侵入式Web前端框架，开发于2008年，并于2009年开源GoogleCode ，于2012年切换到Github。?JX 框架同时适用于 Web Page 和 Web App 项目的开发，特别适合构建和组织大规模、工业级的Web App，腾讯 WebQQ、腾讯Q+等产品都是采用JX框架开发，兼容目前所有主流浏览器。 2. KISSY（淘宝） KISSY是淘宝的前端类库，几乎在淘宝的每个页面上都能看到它的身影。 KISSY提供稳定的核心，包括 oo、dom、Event、Anim、Ajax 等；强大且易用的脚本加载 器，特有的 loader；丰富的UI组件，包括 Switchable、Overlay、Draggable and Droppable 等。KISSY具备模块化、高扩展性、组件齐全等特性。 QWrap（百度） QWrap是百度有啊前端团队推出的一个Javascript框架，支持IE6+、Firefox、Chrome、Safari、Opera等浏览器，在BSD协议下开源发布。 QWrap的特点如下： （1） 提供jQuery一样方便的dom功能，同时又打破jQuery“专注于dom”的约束，也提供非dom的许多功能。 （2）提供prototype方便的原型功能，同时又提供Javascript1.6的泛型功能，并且提供用户有选择方便与严谨的自由。 （3） 提供YUI2一样的静态方法库，同时又用所谓的Helper规范来做到真正的绝对静态，让组件开发者可以发布出无依赖的组件。 4. 学习YUI3的use，同时又摈弃YUI3的严谨性洁癖，让use更实用。 5. QWrap独创特的Helper + Wrap + Retouch + Apps设计，让QWrap有更多的灵性等待你去发现。 4. Tangram（百度） Tangram是一款实用的JavaScript基础库，通过它可以快速构建出高度互动的Web应用程序。Tangram具有全浏览器兼容，平滑升级体验以及自由定制输出最小尺寸的特点。 Tangram团队合影 Como（康尚实验室） Como JS Como由上海康尚实验室开发，是一款简易而功能强大的JS框架，对String等原生对象进行了扩展，支持常用的CSS选择器，高效的动画播放，强大的包扩展机制，支持类的继承等。 Web前端UI框架 1. Bootstrap 创建者：Mark Otto and Jacob Thornton 核心概念/原理：RWD和 移动优先 框架大小：145 KB 预处理器：Less and Sass 响应式：Yes 模块化：Yes 起始模版/轮廓：Yes 图标集：Glyphicons 其他插件：无绑定，有其他三方插件 独特组件：Jumbotron 文档：Good 定制：基本 GUI 定制，不过需要手动修改,因为无颜色选取工具。 浏览器支持： Firefox、Chrome、Safari、IE8+（IE8需要 Respond.js） 授权： MIT Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美，直观并且给力的web设计工具包，可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件，栅格系统以及一些常用的JavaScript插件。 Bootstrap是用动态语言LESS写的，主要包括四部分的内容： 脚手架——全局样式，响应式的12列栅格布局系统。记住Bootstrap在默认情况下并不包括响应式布局的功能。因此，如果你的设计需要实现响应式布局，那么你需要手动开启这项功能。 基础CSS——包括基础的HTML页面要素，比如表格(table)，表单(form)，按钮(button)，以及图片(image)，基础CSS为这些要素提供了优雅，一致的多种样式。 组件——收集了大量可以重用的组件，如下拉菜单（dropdowns），按钮组（button groups），导航面板（navigation