作为一名在前端死缠烂打6年并且懒到不行的攻城士,这几年阅过很多从知名到很知名的前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这里我还是低调的只拿出10个框架来个大锅乱炖,凑够字数也就全剧终了。下面的框架也没有什么先后顺序之分,我想到啥就写啥啦(作为前端,我一向都这么的任性^_^ )。
Bootstrap
首先说Bootstrap,估计你也猜到会先说或者一定会有这个(呵呵了),这是说明它的强大之处,拥有框架一壁江山的势气。自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者废的决心,来让自己成长。结果受到周围各种基友的引诱开始了Bootstrap旅程。本人虽然是个设计+前端的万里有一的人才,但是老天只让我会用PS和各种设计工具却不给我跟设计妹子一样的审美,所以这也是我最初选择Bootstrap的原因之一,它让我做出来的东西好歹能在妹子面前装个逼,不过时间长了难免觉得Bootstrap美的让人烦躁,但好在它的每个版本都会有很大的改变,不会让人觉得自己做的网站会跟很多网站撞脸。Bootstrap的用法及其简单(这也可能就是Bootstrap作者阅攻城士无数,了解他们痛的结果),以至于是个小前端都可以快速上手,几乎没什么学习成本。
官网:http://getbootstrap.com/
Github:https://github.com/twbs/bootstrap/
作者:Mark Otto和Jacob ThorntonStar:93,112
总结:Bootstrap最大的优势就是它非常流行,流行就代表你有问题就有很多人帮你解决问题,就代表装逼它就是利器,还有就是界面比较和谐,容易上手,关注它的童鞋应该发现最新V4版也开始支持FlexBox布局,这是非常好的升级体验。劣势是class命名不够语义化,并且各种缩写,以至于我离了文档就是个菜,最近开始整混合APP,选框架的时候首选就是它,但之前搞PC一直没注意,后来搞混合右键属性看它的时候,瞬间一阵凉风袭来,Bootstrap好小,小到我只好选择别的框架。
AUI
第三个是最近刚起来的AUI,虽然作者声称是专为APICloud开发者设计的一套UI框架,但实际它还是解决了很多移动前端开发的普遍问题,是主要面向混合开发的CSS框架。看起来作者比较猖狂,各种高级CSS3遍地使用,这让我也不得不去查查这些个CSS3的兼容性。不负众望果然选的都是兼容不错的属性,哈哈了一顿激动从前辈手上大胆认识了几个好东西,并且框架还提供了聊天界面、计数列表等组件,解决了很多复杂的让我骂娘的布局,现在可以直接拿走就用。
Github:https://github.com/liulangnan/aui
官网:http://www.auicss.com/
作者:流浪男Star:92
总结:这个框架对我来说有个优点就是纯CSS框架,自己以前也就用过Pure,自己有点JS能力,如果不是复杂的效果,找个纯CSS框架自己随便改改就可以,而现在CSS3也已经能够做到动画,效率、质量、高效全兼顾,所以还是选择了这种CSS框架。有一点觉得不满的是这框架的文档真的好那什么,说好的高大上呢。
Amaze UI
第二个介绍的是妹子UI,最初使用它是因为本尊遇到了一个爱纠结细节设计士,有一次她跟我的字体较上真了,结果一句顶万句的BOOS夸了她,我只好根据她的想法去解决,结果最后找到了Amaze UI框架(我不介意你叫我懒淫),按照官方的话说就是“基于社区开源项目构建的一个跨屏前端框架,以移动优先,从小屏到大屏,最终实现所有屏幕适配,适应移动互联潮流”。但其实我就是看中它能解决国内浏览器存在的跨屏适配和兼容性问题。
官网:http://amazeui.org/
Github:https://github.com/amazeui/amazeui
所属公司:云适配Star:6710
总结:Amaze UI总的来说加入更多符合中国市场特性的元素,框架对跨屏、适配都做了比较好的处理并且准备了一系列的常用网页组件,为减少搞兼容、适配各种敲键盘的加班狗们的工作时间做了不小的贡献。框架还对中文排版优化,兼容中国本土主流浏览器、轻量化,不仅适用于桌面端,更适合移动端。
Frozen UI
有段时间看到QQ瞬间高大上了,后来四处打听,原来QQ客服端也用了混合开发,其中QQ会员前端用的是Frozen UI,并且这套框架开源,欣喜若狂耐不住心里的寂寞直接上手试了一遍,初体验感觉基础样式效果简单色调清爽,有个比较活跃的社区所以组件什么的也比较丰富。
Github:https://github.com/frozenui/frozenui
官网:http://frozenui.github.io/
作者:QQVIP FD Team Star:1,067
总结:如果拿Frozen UI配合一些如APICloud用来做混合APP感觉就太酷了,或者原生的火鸡们拿去嵌套在应用中做前端开发,这个框架对android 2.3 +、ios 4.0 +做了兼容,或者拿来做Web App也是极好的选择,劣势的话从UI层面就可以看到了,谁让它是出生在QQ会员前端的呢。
WeUI
WeUI和FrozenUI都属于比较专一的框架,WeUI比FrozenUI更专一,话说连个官网都不搞,所有答疑都在gitHub Issues解决了,这个框架极其简单,体积当然就不用说了,模块也就7个左右,不过体量小做的却不错,口碑看star就够了,框架从16/1/23发版至今github star超过7K,不过也不排除用户没地方发泄所以都跑到git上来,哈哈。
Github:https://github.com/weui/weui
DEMO:http://weui.github.io/weui/
Star:7,129
总结:看完微信设计团队设计的这套DEMO,如果要做微信公众,这个二话不说必然是首选了。框架不好的地方简而言之就是框架本身应该就没考虑过让用户用到非微信的场景之下。
SUI
“SUI是一套基于bootstrap开发的前端组件库,同时它也是一套设计规范。通过SUI,可以非常方便的设计和实现精美的页面”。果然还是直接引用官方给的枯燥无味广告要节省自己的脑细胞(囧…),当然了就像广告说的,如果你之前用过Bootstrap,那么可以轻松转向SUI,这可能就是淘宝给前端屌丝们的福利了。
Github:https://github.com/sdc-alibaba/sui
官网:http://sui.taobao.org/sui/docs/index.html
Star:120
Semantic UI
倒数第三个是Semantic UI,接触这个框架还是因为Bootstrap,Semantic UI刚上线github就受到大量开发者的关注,以至于很多人拿它俩对比各种挑刺各种夸,是好是坏不能单凭别人三句四句就抬起手指开始赞,用了以后感觉UI上跟Bootstrap没太多的区别,不过代码命名规范上却相差甚大,本人认为Semantic UI是不是就想做的不一样,它的命名全是采用复合的方式,类名特别的离散,用的时候你得很小心自己扩展或者新增的class命名与它的类名冲突。
官网:http://www.semantic-ui.cn/
Github:https://github.com/semantic-org/semantic-ui/
Foundation
Foundation算是框架界的元老啦,都说框架去的早,而这个框架一直到现在依然这么的热门,如果你比较介意Bootstrap开发撞脸的尴尬事情,那么你可以考虑使用Foundation。即使你使用预定义的UI元素,也不会与其他网站太像,就像官方说的给开发者更灵活的框架体验。
官网:http://foundation.zurb.com/
Github:https://github.com/zurb/foundation-sites
Star:22,736
UiKit
UIkit是YOOtheme团队开发的,在许多WordPress主题中都有应用(也就是如果你是个WordPress爱好者,那么这个框架应该比较适合深究),并且框架能够通过GUI编辑器和手动编辑,所以它提供了一个灵活、强大的自定义机制。框架借助LESS、jQuery、normalize.css及FontAwesome开源项目的独有特点,整合成了这么一款轻量级、模块化的前端框架。
官网:http://www.getuikit.com/
Github:https://github.com/uikit/uikit
作者:YOOtheme Star:6,372
Pure
终于最后一个了,我和你一样好开森(~ ̄▽ ̄)~),这个框架是我在做管理系统时接触的,选择使用也是因为框架小巧,并且是纯CSS,没有太多的牵扯,好用来与其他框架快速结合使用。
官网:http://purecss.io/
Github:https://github.com/yahoo/pure/
Star:13,592
介绍完毕,估计你应该看出来了,我使用框架真的也就是遇到了需求,才选择了某个框架,所以框架之间并没有什么好与特好之分,只能说你的需求是什么,这个框架合适不合适你去用,各种框架用起来也都大致差不多,会用一个其他的上手也就都变得简单容易上手,我觉得能写框架的人都是室外高仁。
作者:攻城狮Right
转载自:http://www.jianshu.com/p/f066863d5507
相关推荐
「大锅乱炖10大H5前端框架」.docx
内容概要:本文详细介绍了如何利用Simulink对BUCK电路进行PI闭环控制仿真。首先解释了BUCK电路的基本原理及其数学表达式,接着逐步指导如何在Simulink中构建仿真模型,包括选择合适的元件如电源、开关、电感、电容等,并设置了具体的参数。然后重点讲解了PI控制器的设计方法,展示了如何通过MATLAB代码实现PI控制算法,并讨论了不同参数对控制系统的影响。最后,通过观察和分析仿真结果的关键波形,探讨了如何优化PI控制器参数以获得更好的输出效果。 适合人群:从事电力电子设计的研究人员和技术爱好者,尤其是那些希望深入了解BUCK电路及其控制机制的人群。 使用场景及目标:适用于需要掌握BUCK电路工作原理以及PI闭环控制方法的学习者;旨在提高对电力电子系统的理解和优化能力。 其他说明:文中提供了详细的步骤和实例,有助于读者更好地理解和应用所学知识。此外,还提到了一些常见的挑战和解决方案,例如如何避免电压过冲、优化负载响应时间和减少输出电压纹波等问题。
MFC-Windows应用程序设计-第2章-Windows应用程序的类封装.pptx
MCS51单片机指令系统数据传送类指令.pptx
PLC电源模块维修重点技术实例.doc
内容概要:本文详细介绍了如何利用西门子S7-1200 PLC构建一个高精度的恒温水箱控制系统。首先讨论了硬件选择与配置,包括PT100温度传感器、模拟量模块的选择以及滤波时间的优化。接着深入探讨了PID控制算法的应用,包括参数整定技巧、移动平均滤波的应用以及PWM输出控制方法。此外,还涉及了人机界面的设计,强调了报警机制的优化和现场调试的经验分享。文中提供了多个实用的SCL代码片段,帮助读者更好地理解和实施具体的技术细节。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是对PLC编程和温度控制感兴趣的初学者。 使用场景及目标:适用于需要精确温度控制的工业应用场景,如食品加工、生物制药等行业。目标是将温度波动控制在±0.5℃以内,确保生产过程的稳定性。 其他说明:文中不仅提供了详细的理论讲解,还结合了大量的实际案例和调试经验,有助于读者快速掌握相关技术和应对常见问题。
内容概要:本文详细介绍了利用COMSOL进行太赫兹波段石墨烯超表面吸波器的设计与仿真的全过程。首先,通过几何建模创建了基于矩形堆叠的石墨烯单元结构,并设置了合适的材料参数,特别是石墨烯的表面电导率采用Kubo公式表示。接着,针对边界条件进行了细致设定,如使用完美匹配层(PML)和Floquet周期边界条件,确保计算效率和准确性。然后,通过参数扫描和优化,研究了不同费米能级对吸收峰的影响,实现了吸收频段的动态调控。最后,通过后处理和动画制作,展示了吸收峰随费米能级变化的动态效果,并提供了具体的MATLAB和COMSOL代码示例。 适合人群:从事太赫兹器件设计、电磁仿真以及石墨烯材料应用的研究人员和技术人员。 使用场景及目标:适用于希望深入了解太赫兹波段吸波器设计原理及其动态调控特性的科研工作者。目标是通过实际操作和理论分析相结合,掌握石墨烯超表面吸波器的设计方法和优化技巧。 其他说明:文中提供的具体步骤和代码示例有助于快速上手COMSOL仿真工具,同时强调了常见问题的解决方法,如收敛问题和网格划分策略。
内容概要:本文详细介绍了两轮平衡车和扭扭车的完整设计方案,涵盖硬件和软件两个方面。硬件部分包括主控芯片(如STM32F103)、传感器(如MPU6050)的选择与布局,以及PCB设计要点,强调了电机驱动模块的布线规则和电磁干扰防护措施。软件部分则聚焦于核心算法,如PID控制和卡尔曼滤波,用于处理传感器数据并实现车辆的平衡和运动控制。此外,文章还讨论了烧写程序、调试文件和BOM清单等量产相关的内容,分享了许多实用经验和技巧。 适合人群:对两轮平衡车和扭扭车设计感兴趣的电子工程师、硬件开发者和嵌入式程序员。 使用场景及目标:帮助读者掌握从原理图设计到量产的全流程,包括硬件选型、PCB布局、程序编写、调试方法和批量生产的注意事项。目标是让读者能够独立完成一套完整的两轮平衡车或扭扭车项目。 其他说明:文中提供了大量实战经验和技术细节,如PID参数调优、PCB布局技巧、电机驱动优化等,有助于提高产品的稳定性和可靠性。
内容概要:文章详细介绍了汽车电子软件A/B分区方案,这是一种用于汽车电子系统软件管理的最佳实践。A/B分区通过将存储空间划分为两个独立分区,分别保存完整的软件镜像,实现软件的无感更新、提高系统可靠性和支持远程更新(OTA)。具体工作流程包括从当前分区启动、下载更新包、分区验证、切换准备、重启运行以及回滚与故障处理。其核心优势在于减少停机时间、增强可靠性和安全性、助力OTA更新及提升用户体验。然而,该方案也面临存储空间需求大、更新管理复杂和功耗性能优化等挑战。文章最后提出了优化存储空间、简化更新管理和优化功耗的具体措施。 适合人群:汽车电子工程师、汽车制造商技术人员、对汽车电子系统感兴趣的工程师和技术爱好者。 使用场景及目标:①理解A/B分区的工作机制及其在汽车电子系统中的应用;②掌握A/B分区在软件更新过程中的具体操作流程;③了解A/B分区带来的优势及其面临的挑战,为实际项目提供参考。 其他说明:A/B分区方案已在新能源汽车和新势力造车中广泛应用,未来将在智能汽车和自动驾驶技术中发挥更大作用。文章强调了长期主义的重要性,鼓励读者在技术发展中保持耐心和持续学习的态度。
内容概要:本文详细介绍了利用粒子群优化(Particle Swarm Optimization, PSO)算法,在光伏电池受到局部阴影遮挡的情况下实现最大功率点跟踪(Maximum Power Point Tracking, MPPT)的方法。文中首先解释了阴影条件下光伏电池输出特性的变化,即P-V曲线由单一峰值变为多峰形态,使得传统的扰动观测法难以找到全局最大功率点。接着阐述了PSO算法的基本原理及其在MPPT中的具体实现方式,包括粒子初始化、速度和位置更新规则以及如何处理电压突变引起的系统震荡等问题。此外还讨论了粒子数量的选择、参数动态调整策略、适应度函数改进等方面的内容,并通过实验验证了该方法的有效性和优越性。 适合人群:从事光伏发电系统研究与开发的技术人员,尤其是关注提高光伏系统在非理想环境下工作效率的研究者。 使用场景及目标:适用于存在局部阴影遮挡情况下的光伏电站或分布式光伏发电系统的优化设计,旨在提高此类条件下光伏系统的能量转化效率。 其他说明:文中不仅提供了详细的理论推导和技术细节,还有具体的代码片段用于辅助理解和实施。同时指出,在实际应用中可以根据不同的应用场景灵活调整相关参数配置,如粒子数目、惯性权重等,从而达到更好的性能表现。
office办公软件培训.pptx
2025免费微信小程序毕业设计成品,包括源码+数据库+往届论文资料,附带启动教程和安装包。 启动教程:https://www.bilibili.com/video/BV1BfB2YYEnS 讲解视频:https://www.bilibili.com/video/BV1BVKMeZEYr 技术栈:Uniapp+Vue.js+SpringBoot+MySQL。 开发工具:Idea+VSCode+微信开发者工具。
内容概要:本文详细介绍了如何使用Matlab进行平行泊车和垂直泊车的路径规划与仿真。首先解释了平行泊车的基本原理,即基于车辆运动学模型,通过控制转向角和速度来规划从初始位置到目标车位的平滑路径。接着展示了具体的Matlab代码实现,包括初始化参数设置、路径规划的循环迭代以及最终的路径绘图。对于垂直泊车,则强调了其独特的路径规划逻辑,分为接近车位和转向进入两个阶段,并给出了相应的代码示例。此外,还讨论了一些高级话题,如使用双圆弧+直线组合方案、五次多项式轨迹生成、PID控制器实现轨迹跟踪等方法来优化路径规划。同时提到了碰撞检测模块的实现方式及其重要性。 适合人群:对自动驾驶技术感兴趣的初学者或有一定编程基础的研发人员。 使用场景及目标:适用于希望深入了解自动驾驶泊车原理和技术细节的人群,特别是那些想要动手实践并掌握Matlab编程技巧的学习者。通过学习本文提供的代码示例,读者能够更好地理解平行泊车和垂直泊车的具体实现过程,从而为进一步研究提供坚实的基础。 其他说明:文中提到的所有代码均为简化版本,旨在帮助读者快速入门。实际应用中可能需要考虑更多因素,例如车辆的实际尺寸、环境感知模块的集成等。此外,作者还分享了许多实用的经验和技巧,如如何避免常见的错误、如何优化代码性能等。
内容概要:本文详细介绍了如何使用连续小波变换(CWT)、卷积神经网络(CNN)和支持向量机(SVM)进行滚动轴承故障诊断的方法。首先,通过对东南大学提供的轴承数据集进行预处理,将一维振动信号转换为时频图。然后,构建了一个CNN-SVM混合模型,其中CNN用于提取时频图的特征,SVM用于分类。文中还讨论了如何选择合适的小波基、尺度范围以及如何防止过拟合等问题。此外,作者提供了T-SNE可视化工具来评估模型性能,并分享了一些实用的避坑指南。 适合人群:从事机械设备故障诊断的研究人员和技术人员,尤其是那些对振动信号处理有一定了解的人。 使用场景及目标:适用于工业环境中对旋转机械设备的故障检测和预测。主要目标是提高故障诊断的准确性,减少误判率,确保设备的安全稳定运行。 其他说明:文中提到的所有代码均已在Matlab环境下验证通过,并附有详细的注释和解释。对于初学者来说,建议逐步跟随代码实现,理解每一步骤背后的原理。
内容概要:本文详细介绍了基于三菱F5U系列PLC的恒压测试设备开发过程,涵盖了ST语言编程和梯形图逻辑控制的综合应用。主要内容包括设备的整体功能概述,如递增调压和恒压保持两大功能;ST语言在数据处理方面的优势,如从触摸屏读取设置数据、处理压力传感器数据等;梯形图在逻辑控制方面的作用,如实现递增和恒压模式的切换;触摸屏程序设计,确保良好的人机交互体验;以及监控曲线和历史记录的实现方法。文中还特别强调了ST语言和梯形图混合编程的优势和注意事项。 适合人群:具备一定PLC编程基础的电气工程师和技术人员。 使用场景及目标:适用于工业自动化领域的恒压测试设备开发,旨在提高系统的灵活性和可靠性,帮助工程师更好地理解和应用ST语言和梯形图编程。 其他说明:文章提供了多个具体的代码示例和实用技巧,如数据类型转换、环形缓冲区设计、急停逻辑等,有助于读者在实际项目中借鉴和应用。
内容概要:本文由一位汽车电子工程师撰写,主要介绍了CAPL语言及其在CANoe中的调试功能。CAPL是一种专用于CANoe的类C编程语言,支持节点仿真、报文收发、自动化测试等功能。CAPL文件分为.can和.cin两种类型,程序结构包含头文件、全局变量、事件函数和自定义函数。CAPL基于事件驱动,常见事件包括系统事件、报文事件、时间事件等。CAPL支持多种数据类型和复杂数据结构。CANoe的CAPL Debug功能允许用户在仿真或测试过程中对CAPL代码进行调试,通过设置断点、单步执行等方式检查代码逻辑和变量值,确保代码满足需求。; 适合人群:具有汽车电子开发背景,尤其是从事汽车总线网络开发、测试和分析的工程师。; 使用场景及目标:①掌握CAPL语言的基本语法和特性,熟悉CAPL文件结构和编程规范;②学会使用CANoe中的CAPL Debug功能,能够设置断点、单步调试并查看变量变化,确保代码正确性和可靠性;③提升对汽车总线网络开发和测试的理解和实践能力。; 阅读建议:本文详细介绍了CAPL语言及其调试功能,建议读者在学习过程中结合实际项目进行实践,逐步掌握CAPL编程技巧和调试方法。同时,注意理解CAPL的事件驱动机制和数据类型,这对编写高效、可靠的CAPL代码至关重要。
内容概要:本文详细介绍了基于SSM(Spring + SpringMVC + MyBatis)框架的ERP生产管理系统的源码实现及其关键特性。首先探讨了系统的权限控制设计,采用Shiro实现按钮级别的权限管理,确保不同角色拥有不同的操作权限。接着分析了设备管理模块,展示了MyBatis动态SQL的应用以及设备状态更新的灵活性。工艺监控模块利用EasyUI DataGrid实现实时数据刷新,结合后端分页查询提高性能。质量监控模块则通过Spring事务注解实现异常数据处理的原子性。此外,系统采用了Shiro进行用户密码加密,增强了安全性。最后讨论了系统的布局设计和数据可视化的实现。 适合人群:具备一定Java开发经验的研发人员,特别是对SSM框架有初步了解并希望深入了解其实战应用的技术人员。 使用场景及目标:适用于需要构建或改进企业内部生产管理系统的开发团队。主要目标是通过研究现有系统的实现细节,掌握SSM框架的最佳实践,提升系统的稳定性和功能性。 其他说明:文中提到的许多技术细节如权限控制、事务管理和数据可视化等,不仅有助于理解SSM框架的工作原理,还能为实际项目提供宝贵的参考。
内容概要:本文继续深入介绍 AUTOSAR BSW 层的关键模块,主要包括诊断模块、硬件I/O抽象模块和操作系统OS。诊断模块包含诊断通信管理器(DCM)、诊断事件管理器(DEM)和功能禁止管理器(FIM),它们分别负责通信协议实现、事件管理和功能控制,确保ECU在不同情况下的正确响应。硬件I/O抽象模块通过将硬件接口抽象化,使上层软件无需关心底层硬件细节,提高了系统的可移植性和维护性。操作系统OS分为SC1到SC4四个等级,从基本任务调度到高级别的内存和时间保护,适应不同功能安全级别的需求,保障了多任务环境下的数据一致性和实时性能。 适合人群:对汽车电子控制系统有一定了解的研发人员,尤其是从事AUTOSAR相关工作的工程师和技术人员。 使用场景及目标:①理解AUTOSAR架构下BSW层各模块的具体功能和相互关系;②掌握诊断模块在汽车ECU中的应用及其重要性;③学习硬件I/O抽象模块的设计思路和实现方法;④了解AUTOSAR OS的不同分类及其在不同安全等级产品中的应用。 阅读建议:由于涉及到较多的专业术语和技术细节,建议读者先熟悉AUTOSAR的基础概念,再逐步深入理解各模块的工作原理和应用场景。同时,结合实际项目经验进行对比学习,有助于更好地掌握本文内容。
多语言笔记系列:操作数据库-C#程序
机器人导航分割_基于deeplab实现的机器人室内导航分割算法_附项目源码+流程教程_优质项目实战