2023学年完整公开课版前端框架

前端框架1.了解前端框架

2.掌握常见开源前端框架1、学好Web框架熟悉掌握HTML、服务器端脚本语言、CSS和JavaScript之后，学习Web框架可以加快Web开发速度，节约时间。PHP程序员可选的框架包括CakePHP、CodeIgniter、Zend等，Python程序员喜欢使用Django和webpy，Ruby程序员常用RoR。2、开源前端框架BootstrapBootstrap是美国Twitter公司的设计师MarkOtto和JacobThornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得Web开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。主流框架之一，Bootstrap是基于HTML、CSS、JavaScript的，它简洁灵活，使得Web开发更加快捷。2、开源前端框架MeteorMeteor是一个full-stackjavascript平台，可用于开发web和移动应用。其最大特点是其（通过websocket）保持客户端连接的“实时”框架。数据库（mongodb）的改变可“实时”展示到界面中。Meteor是新一代的开发即时web应用的开源框架，它能在较短时间内完成开发。2、开源前端框架html5-boilerplateHTML5Boilerplate——最流行的web开发前端模版，帮你构建快速,健壮,并且适应力强的webapp或网站。其特点如下：一个干净、移动终端友好的HTML模版优化过的Google统计代码包含了Normalize.cssv1版本—一个先进的、支持HTML5的CSSreset—和基础样式、辅助功能、多媒体查询、打印样式自带了两个优秀的Javascript工具库的最新版本：jQuery(默认链接到Google的CDN,如果CDN失效，本地文件作为后备)和Modernizr浏览器特性监测工具库高性能：提供了一组Apache配置参数，帮你提高网站的性能、该框架可以快速构建健壮，且适应力强的webapp或网站。2、开源前端框架SemanticUI如今，一个工具好不好用，在很大程度上要看它是不是集成了很多的好用的模块。semanticUI就是这样一款工具，集成了很多很漂亮的UI模块，能够使网页制作更加高效和美观。当然，追求个性化和灵活性的同学还是要自己写CSS更好一点，因为这样我们的创意就不会被工具所束缚，当然缺点是做网页的速度会慢一点。手写CSS是一件很麻烦的事情，在这里推荐你使用一个CSS框架：SemanticUI，这个框架比起Bootstrap来，使用起来更加语义化，更容易上手，也更好看。2、开源前端框架FoundationFoundation是在国外比较流行在国内的使用就比较少，在兼容上Foundation在Foundation4就已经放弃了IE8的支持这点可能也是在国内使用者少的原因之一，Foundation在js库中使用的是Zepto（就是轻量级的JQueryFoundation4就已经把mobilefirst放在首要开发Foundation用于开发响应式的HTML,CSSandJavaScript框架。2、开源前端框架Materialize实现UI组件有助于构建有吸引力，一致和功能的网页和网络应用程序，同时坚持现代网络设计原则，如浏览器可移植性，设备独立性和优雅的降级。它有助于创建更快，更美观，更灵敏的网站。它的灵感来自GoogleMaterialDesign。Materialize是一个使用CSS，JavaScript和HTML创建的UI组件库。2、开源前端框架PurePure是一个CSS框架，源自雅虎。Pure的框架是基于响应式的，整个框架非常轻量级，压缩为gzip文件仅为3.7KB*。Pure包含的组件样式较多，比如：有表单、表格、表、按钮、导航等等，标识的使用也很简单。Pure自带的样式以及已定义好的类名，可以调整出更丰富漂亮的控件样式、布局几乎可以在每一个web项目中使用的一组小的和响应式的CSS模块。2、开源前端框架VueVue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件

[2]

。Vue.js自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js也能完美地驱动复杂的单页应用。Vue.js是用于构建交互式的Web界面的库。它提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。2、开源前端框架AmazeUI该产品系列中有专门针对移动端的HTML5混合应用开发框架AmazeUITouch以及针对跨屏HTML5网页开发的AmazeUIWeb。其中，AmazeUITouch可以帮助开发者通过丰富的组件，快速构建出与原生APP相媲美的专属移动端的HTML5应用。国内首个开源HTML5跨屏前端框架产品系列，中文排版支持更优、本土化组件丰富2、开源前端框架Ulkit1、UIkit基于LESS开发，代码结构清晰简单，易于扩展和维护。

2、具有体积小、反应灵敏的响应式组件，使用一致的、无冲突的命名规则。3、可根据UIKit基本的风格及样式，轻松地自定义创建出自己喜欢的主题样式。4、根据不同的屏幕分辨率与上网设备，UIKit会自动做出响应，提供一致的体验。一个轻量级的和模块化的前端框架,用于快速开发和功能强大的web接口。2、开源前端框架KISSYKISSY是淘宝的前端类库，几乎在淘宝的每个页面上都能看到它的身影。

KISSY是一款跨终端、模块化、高性能、使用简单的JavaScript框架。除了完备的工具集合如DOM、Event、Ajax、Anim等，它还提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的JavaScript框架，KISSY为移动终端做了大量适配和优化，让你的程序在全终端均能流畅运行。一款跨终端、模块化、高性能、使用简单的JavaScript框架。2、开源前端框架MUIMUI主要有三种含义：一、一种单独发行的计算机操作系统Windows的多语种版本；二、世界上最权威的Halal认证的官方机构；三、在移动通讯技术中的专有名词。最接近原生APP体验的高性能前端框架2、开源前端框架AraleArale拥有popup、validator、position等丰富且优秀的组件模块

，模块API设计简洁，迭代迅速，推崇适度重复和组合大于继承的原则。人性化的文档、丰富的演示和完善的测试用例是Arale对自有模块的要求。Arale使用简单好用的包管理工具SPM帮助我们处理打包部署等繁琐工作；使用spm提供的源服务来发布