‘壹’ 移动APP开发框架盘点2:Web移动前端框架大全
开源项目其实有一个成熟周期,这个周期大概是三年左右,自React框架在2013年发布并引爆了前端框架的大潮,这个属于前端的周期就此开始了。
之后在2015年5月开源的React Native又开启了属于Web移动前端的周期,15-16年,18-19年,21-22年正好就是属于移动前端的三个爆发点。
三年前,在第一个成熟收获期,我盘点了移动开发框架。在这第二个成熟收获期,理所当然要来盘点一波。
不过,当我点开github项目的code-frequency时,还是被这个准到吓人的周期猜想惊呆了,先给你们看一波,剩下的自行验证。
1、https://github.com/youzan/vant/graphs/code-frequency
2、https://github.com/quasarframework/quasar/graphs/code-frequency
再来说第二个比较有意思的发现,停止维护的项目绝大多数是Vue框架项目。
盘点开始的时候我还觉得React框架处于绝对劣势,到完成时我发现React无论在选择面还是成熟度上都超过了Vue。
原因我这里就不分析了,反正大家都有自己的看法。
网页类框架就是前端组件框架,这一次虽然有大量项目停止维护,但是也有很多项目坚持了下来,而且还涌现出了一批新项目。
大厂占了主导,因为这些年大厂在移动开发上的需求,远高于其它方面。个人项目要坚持确实不易。
本来是想要做一个验证项目,把所有框架都试用一遍并给出推荐度的。由于进度太慢,还是下一次再发吧。
这次的重点是渐进类框架,就是所谓多端同构框架(小程序框架)。这几年国内的重点的各种小程序平台,所以多端框架的需求很是旺盛。
不过大多数先行者都没挺过来还是让我很意外,只有Taro成功了,想想还是有很多让人唏嘘的东西。
在这里还是先预测一波吧,因为这一类框架最变化最大,最终还是有很多框架要出局的。
渐进类框架是一个过渡性的产品,最终会变成桥接类框架的一部分,所以,与桥接类框架协同才是框架的出路。
这个赛道基本全是大厂了。
腾讯新一代跨端开发框架Hippy
Hippy一看就是淘宝Weex的对标项目,Kpi功能全面压制。所以官方支持 React 和 Vue 两种主流前端框架。在Weex2019年实质停更后发布,要不要这么卷?
Hippy 2.x 架构主要分成三层,UI(JS) 层 Hippy-React 和 Hippy-Vue 负责驱动 UI 指令生成;中间层 C++ HippyCore 负责抹平平台差异性和提供高性能模块;渲染层 Android 和 iOS 负责提供终端底层模块、组件,并与布局引擎通信。
对Weex惨遭遗弃,我上次就说过:“ReactNative提供工具,Weex提供框架,将平台差异化屏蔽(Write Once, Run Everywhere)。所以Weex则注定功能相对弱小,并且坑比较多。”Weex最终下马也是必然的,淘宝又发布升级版北海,为了实现(Write Once, Run Everywhere),它采用自绘,而且是基于Flutter自绘。
所以Hippy3.x就一如既往的Kpi功能层层加码,很有腾讯风格。在未来的 3.x 中业务与渲染层中的具体实现可根据用户实际场景进行切换:业务层上不再局限于 JS 驱动,还可选择(如:DSL/Dart/WASM 等)其它语言进行驱动;在渲染层中,渲染引擎除了支持现有原生(Native)渲染之外,还可以选择其他渲染 Renderer,如 Flutter(Voltron) 渲染。
“Kraken 北海”是一款高性能Web渲染引擎。底层基于 Flutter 进行渲染。
Kraken 不限制上层开发者使用的框架,无论你是使用 Vue 、Rax 还是 React 都可以开发 Kraken 应用。
Kraken 的 runtime 通过 JS Engine Binding 的方式提供了一系列 Web 标准的 API 接口,调用相应 API 会执行相关逻辑并创建一系列需要发送给 Dart 层处理的指令。
Kraken 其实就是一个小程序平台,而且追求全平台完全一致。我虽然认为各平台不一致是很自然的事情,但是也表示理解,毕竟别人吹牛有当真的传统(KFC表示认同)。
Kraken 现在也是一个小号浏览器,所以它的主要工作就是抠标准,毕竟它是一款基于 W3C 标准的高性能渲染引擎。
最后,我劝淘宝领导定Kpi要理智些,毕竟Hippy4我还蛮期待的。
滴滴出品的超轻量级动态化跨端开发框架,主打轻量和实用。
Hummer 以 JS 引擎为基石,目前已支持 JavaScriptCore、Hermers、QuickJS 等业内知名 JS 引擎(这里本来还有个V8的,我删除了,源码里面没有,Kpi需要)。再配合经过调优的 Yoga 布局引擎,抹平了两端视图布局差异(性能更佳的自研布局引擎开发中)。顺便提一下,Hippy采用V8(功能更强)自研布局引擎(性能更佳)。
Hummer 的特点是抛弃了业界其他动态化跨端框架普遍使用的DSL层和VDOM层,因此原生 Hummer 不具备前端开发常用的响应式编程的能力,但同时换来的是接近原生开发的体验和性能。再以原生 Hummer 为基础,在此之上开发了一套基于MVVM架构的开发框架 —— Tenon ,通过 Tenon,可以把使用 Vue/React 编写的代码,转换成原生 Hummer 的代码。
Hummer也是一个小程序平台,而且超轻量。如果想要无限提升自己APP的能力,可以考虑嵌入Hummer。
Web移动前端框架正在迎来第三个高速发展期,各类框架得到极大繁荣。
个人在具体项目的贡献已经微乎其微了,创新、架构创新是唯一制胜的手段,这也是我看好React的根本原因。
最后,还是想做点微不足道的 探索 ,现在前端组件库层出不穷,更换组件库带来的代价有点大。想创建一个框架,来实现上次说的组件公约数和公倍数,无缝切换组件库。理论上支持所有组件库 ,也能为后来者提供弯道超车的机会。我想大厂可能没有需求,也不会愿意发布这种框架,毕竟都是平台部门说了算。
这个库就是useMobile,当然分为useMobileReact和useMobileVue。下次先发布useMobileReact。等我发布后,再来填上面表中缺的推荐度。
原文地址: https://www.cnblogs.com/windfic/p/16019457.html
‘贰’ 前端页面的插件有哪些
工具类
方便操作对象,数组等的工具库
underscore.js
lo-dash与underscore.js的api基本一致。与underscore比其优势是,效率高;可自定义构建
Sugar在原生对象上增加一些工具方法
functional.js提够了一些Curry的支持
Watch.js监视对象或属性的变化
bacon.js函数式编程,cool
streamjs用流的方式来对数组,对象进行系列操作
异步流程控制
eventproxy朴灵出品
Arbiter.js详细
发布订阅
qPromise风格的
Async.js
mock
Mock.js生成随机数据和mock Ajax 请求
jquery-mockjaxmockajax请求
时间库
moment
datejs
浏览器探测
Bowser探测具体浏览器和版本
ua-parser-js探测具体浏览器和版本,操作系统,设备类型等
调试
console-polyfill能放心的使用 console.log()之类的console方法
log让控制台输出的log有样式
Konsole.js在页面的一个元素里输出log信息详细
uri.jsuri操作
cookie增删改cookie的工具库
director前端路由库详细
BigDecimal.js提高精度的数字操作
JSDoc根据javascript文件中注释的信息,生成API文档详细
hotkeys键盘事件的封装
MD5用 MD5 的方式加密文件的库
浏览器增强类
让一些旧浏览器变牛逼的库
Selectivizr让IE 6-8一些的css3选择器
ieBetter让ie6-8有高级浏览器的特性
ExplorerCanvas让IE8-的浏览器支持canvas
CSS3 Pie让IE6-9支持border-radious,box-shadow,linear-gradient。 可以使用.htc文件(注意Mine type)或.js文件。在用Pie.js时,box-radious的元素有背景色时,不显示背景色。。。
formFive让旧的浏览器支持HTML5表单的一些特性,如 placeholder,autofocus
https://github.com/anselmh/object-fit让浏览器支持object-fit这css规则
HTML5 Cross Browser Polyfills一堆Polyfills
flexibility让旧的 IE 也支持 Flexbox
选择器增强
Lining.js让浏览器实现类似::nth-line(), ::nth-last-line()的效果
未归类
prefixfree用了它,写css时,就不需要加浏览器的前缀了
表单类
jquery-file-upload上传文件组件详细
zTree文件树形视图控件
Treed树编辑器。感觉展示的感觉很像思维导图
FileAPI对文件选择框内的文件的一些处理
表单验证
.Validate详细
jQuery-Validation-Engine
表单元素美化
uniform提供对下拉框,单,复选框,按钮等表单元素的美化
select2多选下拉框
selectivity和unfirom比较类似
DropKick下拉框,单,多选。外观比uniform好
switcheryios7风格的开关组件
nouislider用滚动条来设置/控制(音量等)
range.css美化input[type=range]元素的外观
图片类
holderjs生成占位图片
lazyload
imagesLoaded选取的图片都加载好后执行调回
CSSgram用CSS3的Filter实现Instagram滤镜的库
图标类
Icon Font汇总
SVG做的图标
svgicons
iconic
HYBICON带交互效果。如 hover, click
HTML字符实体图标
http://www.amp-what.com/
transformicons图标点击时,会有一些变换效果。如,加号变成叉号
css3patternscss3 做的可平铺纹理。浏览器兼容性不好。
浏览图片
fancybox弹出查看图片,视屏等等demo
yoxview弹出查看图片,图片尺寸缩放很自然
图片墙
wookmark
UI 框架
WeUI由微信官方设计团队为微信 Web 开发量身设计。
Framework7
UI 组件类
拖拽
dragula支持Draggable,Dropable和Sortable。感觉比jqueryUI的轻量级,好用的样子
angular-draguladragular 官方的 angular 版本
数据可视化(图表)
Echarts网络出品
highcharts功能强大。是收费的。
Plottable.JS基于D3的一个图表库
flot文档不给力
chartJs中文文档demo很漂亮,很清晰。比较轻量级。
ichartJs中国的一个家伙搞的,感觉还不错。
时间选取组件
foundation-datepicker
DatePicker一个简单的日历详细
full calendar支持脱放的方式来改变待办事宜的时间
Simple Events Calendar外观很喜欢。收费 5$
jQuery ui datepicker经典,不是很好看
pickadate轻量级,手机友好的,漂亮。但貌似只能在弹出层中显示,而没有下拉这种方式显示。
zebra-datepicker可配置性很强。但貌似只能在弹出在右上方。。。
bootstrap-datepickerbootstrap风格。
dateRangePicker选取时间段。bootstrap风格。该组件依赖Twitter Bootstrap, Moment.js和jQuery.
自定义滚动条
perfect scrollbar轻量级的滚动条。外观与mac上chrome的滚动条一样。
iscroll在移动设备上用不错
加载(Loding)效果
CSS SpinnersCSS做的
Loaders.cssCSS做的
表格组件
jsGridData Grid。详细
backgrid基于Backbone.js的DataGrid
excellentexport把表格的内容生成excel。兼容 Firefox, Chrome, IE6+
datatables表格可交互(对内容进行排序,删除等)
handsontable生成Excel外观的数据
JSpreadsheets表格数据的组件库
选取颜色
Spectrum
分享到SNS
JiaThis生成分享代码。
编辑器
ace代码编辑器,可以用来做demo演示
ckeditor
ueditor网络做的
tinymce对html内容进行实时的编辑
summernote在移动设备上用不错
通知组件
notie.js
HTML5播放器
jwplayer被大量网站使用
html5media简单的h5player,轻量级
jplayer功能强太,可换肤
展示
Impress.js各种旋转,和奇特的体验
fullPage全屏显示。用滚轮来翻页详细
zepto.fullpage专注于移动端的fullPage.js,依赖Zepto
pagePiling和fullPage类似
turn.js做一本书,带漂亮的翻页的效果
幻灯
slidesjs挺好用的,只是那幻灯导航的CSS都要自己写,呵呵详细
iSlider无任何插件依赖的手机平台javascript滑动组件详细
bgstretcher全屏幻灯,会随着页面大小的变化而变化。
Swiper开源、免费、强大的移动端触摸滑动插件Swiper中文网
coin-slider兼容IE6。蛮好的~。不过其切换方式是一块块的。不能配置切换方式。。。
wowslider幻灯切换时各种很炫的效果。收费。
cycle2普通的幻灯,竟然不支持垂直滚动。。。
jcarousel普通的幻灯,不兼容IE6
reveal3d滚动。做ppt相当不错
nodePPT国人做的,做ppt也相当不错。有些方面比 reveal做的还好。但生成导出的html有些问题
roundabout3d切换,看的后面图片的边
弹出框
Magnific-Popup兼容PC,Mobile。还不错,有5k+的star
layer国人开发的,兼容ie6+。不喜欢其调用方式。
动画效果
mixitup用漂亮的动画效果来完成排序和筛选
jQuery.Marquee跑马灯效果
quickflip卡片翻转效果
卡片翻转效果2兼容性可以。写的比较简单:1,只支持x方向翻转 2,类名都是规定好的 3,只能被调用一次。 需要改写一下。我的改进版见这里
TheaterJS模拟两个人在屏幕上对话
midnight.js文字颜色随着背景变,屌炸了
color-animationjquery的颜色渐变动画插件。jquery的动画不支持颜色值的变化。改库提供了这个支持。
transit对元素进行css的变换
tagcanvas3D标签云效果详细
iconate图片切换动画
Snap.js左/右侧导航的出现效果
CSS shake抖动动画
ClickSpark.js点击后的一些酷炫的效果
视觉差插件
scrollorama比较简单
superscrollorama能做的效果更多,但要用第三方Tween的库,使用起来比较复杂。
scrolldeck
flash
swfobj能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。它使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。此外,它能够避免您的HTML、XHTML中出现object、embed等非标准标签,从而符合更加标准。详细
抽奖
wScratchPad刮刮卡刮奖效果
jqueryrotate旋转插件。可以用来做转盘抽奖效果
Intro.js用来介绍网站的功能很不错。也可以做新手引导。
blockUILolding组件。
simple-hint提示信息。用css做的。兼容性IE 9+。
dotdotdot文字溢出时,添加在文字末尾加省略号
jQuery-menu-aim二级菜单的切换如Amazon主页上一样迅速
AnythingZoomer放大镜功能
美化/高亮语法代码
google-code-prettify
DlHighlight仅支持JavaScript、CSS、XML、HTML 这4语法高亮
please按要求随机舒服的颜色
Awesomplete输入的智能提示,自动补全
proTip提示。感觉比 Bootstrap 的 tip 好
Hammerjs手势库。封装了 Swipe, Tap, Pinch, Pan等手势
用户体验增强类
动画
velocity提高Jquery动画的性能。以及颜色动画之类的新特性。
Snap.svg操作 SVG 的 JS 库。号称 SVG 的 jQuery。demo
walkway以动画的方式,渐渐地画出 SVG 的路径。
SVG
测试
Mocha
Chai
Should
Snoion
DeviceMock.jsmock 设备。
其他类
ZeroClipboard将内容复制到剪切板兼容主流浏览器的解决方案详细
html2canvashtml转化成canvas,可以用来做截图。详细
Ink响应式html邮件框架
性能测试
抓取,解析RSS内容(不能跨域,所以后台要做代理,所谓的解析Rss其实就是解析xml)
jFeed
jRss简单版的jFeed
scriptcam与摄像头交互
cylon.js机器人框架,支持35个平台
Masonry一个瀑布流框架
devices.css移动设备边框的外观。做原型的时候用不错。
Bootbox.js对bootstrap的弹出框做的一些封装
免费皮肤
AdminLTE
Bootstrap相关类
JS Plugins仓库
jQuery Cards高质量的 jQuery 插件网站
jster
node moles
npmrankSort npm packages by page rank
YOU MIGHT NOT NEED JQUERY PLUGINS不依赖 jQuery 的 js 插件。
awesome-nodejs
Libraries.io各种语言的库
OniUI去哪儿网做的一套基于Avalon的框架
常用的移动端框架
zepto.js
语法与jquery几乎一样,会jquery基本会zepto~
最新版本已经更新到1.16
iscroll.js
解决页面不支持弹性滚动,不支持fixed引起的问题~
实现下拉刷新,滑屏,缩放等功能~
最新版本已经更新到5.0
underscore.js
笔者没用过,不过听说好用,推荐给大家~
该库提供了一整套函数式编程的实用功能,但是没有扩展任何JavaScript内置对象。
最新版本已经更新到1.8.2
滑屏框架
适合上下滑屏、左右滑屏等滑屏切换页面的效果
slip.js
iSlider.js
fullpage.js
swiper.js
flex布局
flex布局目前可使用在移动中,并非所有的语法都全兼容,效果良好~
‘叁’ 除了Bootstrap,还有什么其他前端UI库
1.Aliceui
Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式。
2.Amazeui
Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。
3.sui
SUI是一套基于bootstrap开发的前端组件库,同时她也是一套设计规范。
通过SUI,可以非常方便的设计和实现精美的页面。
同时sui还有移动端版本msui,msui是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库,减少重复工作。
4.FrozeUI
Frozen UI是一个开源的简单易用,轻量快捷的移动端UI框架。基于手Q样式规范,选取最常用的组件,做成手Q公用离线包减少请求,升级方式友好,文档完善,目前全面应用在腾讯手Q增值业务中。
‘肆’ 常使用的库有哪些常用的前端开发工具开发过什么应用或组件
很多呀。VB,JAVA,.NET 都是数据库开发的!没数据库的程序都是些小的小程序。玩玩而已!
‘伍’ 前端框架都有哪些,企业常用的是哪些
在做web开发的时候经常会遇到一个问题,那就是,选择什么样的框架来做前端开发。下面我把目前常用的一些前端的框架简单的给你介绍一下.
就目前来说,比较流行且常用的Web前端框架有Angular、React和Vue。AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发,它主要考虑的是构建CRUD应用,而至少90%的Web应用都是CRUD应用。React是一个用于构建用户界面的JavaScript库,也是Web应用程序的视图层。React拥有较高的性能,代码逻辑非常简单,已经有越来越多的人开始关注和使用它。Vue.js是一套构建数据驱动的Web界面的渐进式框架。Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。
除了这几个,还有一些,我给你介绍
1. Bootstrap
Boostrap绝对是目前最流行用得最广泛的一款框架如上图。它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JavaScript插件。
2、flex
Apache基金会发布了Flex 4.8版本,这是Adobe将Flex捐献给Apache基金会后发布的第一个版本
3、extjs
ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。
4、easyui
easyui帮助你构建你的web应用更加容易。
它是一个基于jquery的插件,开发出来的一套轻量级的ui框架,非常小巧而且功能丰富。
5、MiniUI
又一个基于jquery的框架,开发的界面功能都很丰富。
6、jQuery UI
jQuery UI 是一套 jQuery 的页面 UI 插件,包含很多种常用的页面空间,例如 Tabs(如本站首页右上角部分) 、拉帘效果(本站首页左上角)、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。
7、DWZ
DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.
8、GWT
Google 网页工具包——GWT 提供了一组基于Java语言的开发包,这个开发包的设计参考Java AWT包设计,类命名规则、接口设计、事件监听等都和AWT非常类似。熟悉Java AWT的开发者不需要花费多大的力气就能够快速的理解GWT开发工具包,将更多地时间投入到GWT应用的开发过程中。
9、YUI
Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证,基本上没怎么研究过!
10、Sencha
Sencha 是由 ExtJS、jQTouch 以及 Raphael 三个项目合并而成的一个新项目。
11、Dojo
在国内应用好像不是很广,不过性能上应该没问题。
Dojo是一个用javascript语言实现的开源DHTML工具包。
12、ZK
ZK是 一套以 AJAX/XUL/Java 为基础的网页应用程式开发框架,用于丰富网页应用程式的使用接口。最大的好处是,在设计AJAX网络应用程式时,轻松简便的操作就像设计桌面程式一样。 ZK包含了一个以AJAX为基础、事件驱动(event-driven)、高互动性的引擎,同时还提供了多样丰富、可重复使用的XUL与HTML组件,以 及以 XML 为基础的使用接口设计语言 ZK User-interfaces Markup Language (ZUML)。
13、OperaMasks-UI
OperaMasks- UI是OperaMasks团队 2011下半年打造的一款轻量级前端JS组件库,旨在提供一款学习曲线低、定制性灵活、样式统一,且多浏览器支持、覆盖企业业务场景的前端 JavaScript UI组件库。目前,该团队已将这一产品以LGPL 开源协议开放给社区。
14、JavaFX
Sun 公司(已于2009年被Oracle公司收购)在2008年12月05日发布了JavaFX技术的正式版,它使您能利用 JavaFX 编程语言开发富互联网应用程序(RIA)。JavaFX Script 编程语言(以下称为JavaFX)是Sun微系统公司开发的一种declarative, statically typed(声明性的、静态类型)脚本语言。
以上的回答希望对你有所帮助
‘陆’ web前端主流框架有哪些
bootstrap框架,这个应该是所有前端开发都知道并用过的一个框架了,应为这个是目前最流行的框架,使用最广,网上文档资料模板最多最容易查找的了。它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JavaScript插件,简洁、直观、强悍,让web开发更迅速、简单。
Foundation 是一个易用、强大而且灵活的响应式前端框架,用于构建基于任何设备上的响应式网站、 Web应用和电子邮件。结构语义化、移动设备优先、完全可定制。
Semantic UI 经过多年的努力、致力于可以用更语义化的方式构建网站、原生语言规则让代码更易读易懂。
Amaze UI | 中国首个开源 HTML5 跨屏前端框架。Amaze UI 以移动优先(Mobile first)为理念,组件丰富,模块化;本地化支持,关注中文排版;轻量级,高性能。官网提供有丰富的模板下载。织梦系统wap手机模块就是用的就是这个。
SUI 是一套基于bootstrap开发的前端组件库,同时她也是一套设计规范。通过SUI,可以非常方便的设计和实现精美的页面。
SUI Mobile 是一套基于Framework7开发的UI库。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。
‘柒’ 前端框架都有哪些,最主流的是哪个
推荐几个精致的web UI框架及常用前端UI框架!
1.Aliceui
Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式。
2.Amazeui
Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。
3.sui
SUI是一套基于bootstrap开发的前端组件库,同时她也是一套设计规范。
通过SUI,可以非常方便的设计和实现精美的页面。
同时sui还有移动端版本msui,msui是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库,减少重复工作。
9.YDUI Touch
YDUI Touch 专为移动端打造,在技术实现、交互设计上兼容主流移动设备,保证代码轻、性能高;使用 Flex 技术,灵活自如地对齐、收缩、扩展元素,轻松搞定移动页面布局;实现强大的屏幕适配布局,等比例适配所有屏幕。什么?用得不开心?轻松切换 px;自定义Javascript组件、Less文件、Less变量,定制一份属于自己的YDUI;
10、后台UI开发框架 MuseUI
一款基于bootstrap风格,兼容于主流浏览器(包括IE6)的后端UI开发组件。
‘捌’ 可用于前端开发的框架或类库有哪些
1. Bootstrap
Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JavaScript插件。
Bootstrap是用动态语言LESS写的,主要包括四部分的内容:
脚手架——全局样式,响应式的12列栅格布局系统。记住Bootstrap在默认情况下并不包括响应式布局的功能。因此,如果你的设计需要实现响应式布局,那么你需要手动开启这项功能。
基础CSS——包括基础的HTML页面要素,比如表格(table),表单(form),按钮(button),以及图片(image),基础CSS为这些要素提供了优雅,一致的多种样式。
组件——收集了大量可以重用的组件,如下拉菜单(dropdowns),按钮组(button groups),导航面板(navigation control)——包括:tabs,pills,lists标签,面包屑导航(breadcrumbs)以及页码(pagination),缩略图(thumbnails),进度条(progress bars),媒体对象(media objects)等等。
JavaScript——包括一系列jQuery的插件,这些插件可以实现组件的动态页面效果。插件主要包括模态窗口(modals),提示效果(tool tips),“泡芙”效果(popovers),滚动监控(scrollspy),旋转木马(carousel),输入提示(typeahead),等等。
Bootstrap已经足够强大,能够实现各种形式的 Web 界面。为了更加方便地利用Bootstrap进行开发,很多工具和资源可以用来配合使用,下面列举了其中的一部分工具和资源。
jQuery UI Bootstrap —— 对于jQuery和Bootstrap爱好者来说这是个非常好的资源,能够把 Bootstrap的清爽界面组件引入到jQuery UI中。
jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主题类似,这是一个为jQuery Mobile建立的主题。如果你想让用Bootstrap开发的网站在手机端也可以优雅访问,那么这个资源对你来说很方便易用。
Fuel UX —— 它为Bootstrap添加了一些轻量的JavaScript控件。Fuel UI 安装,修改,更新以及优化都很简单方便。
StyleBootstrap.info —— Bootstrap提供了自己的几种界面风格,StyleBootstrap提供了更多的配色选项,并且你可以给每个组件都应用不同的配色。
BootSwatchr —— 利用这个工具你可以立刻查看主题修改后的效果。对于每一次变动的效果,这个应用都会生成一个唯一的URL方便你与他人分享,你也可以在任意时刻修改你的主题。
Bootswatch —— 提供大量免费的Bootstrap主题。
Bootsnipp —— 在线前端框架交互组件制作工具,是一个供给设计师和开发者的基于Bootstrap HTML/CSS/JavaScript 架构的免费元素。
LayoutIt —— 通过界面拖放生成器简便快捷地创建基于Bootstrap的前端代码。通过拖放动作将Bootstrap风格的组件加入到你的个人设计里并且可以方便地修改他们的属性,简单便捷。
2. Fbootstrapp
Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和设计相同的功能。包含用于所有标准组件的基本的CSS和HTML,包括排版、表单、按钮、表格、栅格、导航等等,风格与Facebook类似。
3. BootMetro
BootMetro框架的灵感来自于Metro UI CSS,基于Bootstrap 框架构建,用于创建Windows 8 的Metro风格的网站。它包括所有Bootstrap的功能,并添加了几个额外的功能,比如页面平铺,应用程序栏等等。4. Kickstrap
Kickstrap是Bootstrap的一个变体。它基于Bootstrap,并在它的基础上添加了许多app,主题以及附加功能。这使得这个框架可以单独地用于构建网站,而不需要额外安装什么。你需要做的仅仅是把它放到你的网站上,然后用就可以了。
App 是一些页面加载完成之后加载运行的JavaScript和CSS打包文件。默认加载的app有Knockout.js, Retina.js, Firebug Lite, and Updater,你也可以自行添加更多的app。
选择不同的主题可以让你的网站在众多Bootstrap构建的类似网站中显得与众不同。
附加功能是一些用来扩展Bootstrap UI 库的附件,它们的语法基本相同或者相似。
‘玖’ 好用的前端ui框架
Aliceui
Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS的更好方式。
Amazeui
Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。
sui
SUI是一套基于bootstrap开发的前端组件库,同时她也是一套设计规范。
通过SUI,可以非常方便的设计和实现精美的页面。
同时sui还有移动端版本msui,msui是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库,减少重复工作。
FrozeUI
Frozen UI是一个开源的简单易用,轻量快捷的移动端UI框架。基于手Q样式规范,选取最常用的组件,做成手Q公用离线包减少请求,升级方式友好,文档完善,目前全面应用在腾讯手Q增值业务中。
uiKit
uiKit是一款轻量级、模块化的前端框架,可快速构建强大的web前端界面。
H-ui
H-ui是轻量级前端框架,简单免费,兼容性好,适用于中国网站。
Weui
weUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
layui
Layui 诞生于2016年金秋,是一款带着浓烈情怀的国产前端UI框架,她追求极简,又不失丰盈的内在,说她是史上最轻量的结晶,似乎并不为过。一切都源自于她对原生态的执着,对前端社区的那些噪杂声音的过滤,以及她本身的精心雕琢。
YDUI Touch
YDUI Touch 专为移动端打造,在技术实现、交互设计上兼容主流移动设备,保证代码轻、性能高;使用 Flex 技术,灵活自如地对齐、收缩、扩展元素,轻松搞定移动页面布局;实现强大的屏幕适配布局,等比例适配所有屏幕。
‘拾’ web前端三大主流框架都是什么
web前端三大主流框架都是Angular、React、Vue。
3、Vue
Vue作为最后推出的框架(2014年),借鉴了前辈angular和react的特点(如VirtualDOM、双向数据绑定、diff算法、响应式属性、组件化开发等)并做了相关优化,使其使用起来更加方便,更容易上手,比较少适合初学者。