盘点:2015最流行前端框架TOP20

本文根据GitHub上的Star数盘点了2015年最受欢迎的十大前端框架,包括Bootstrap、html5-boilerplate、Meteor等,这些框架在响应式设计、模块化方面表现突出。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

2015年已经过去了,作为一个亲历前端开发多年的开发者,目睹和见证了前端开发从最初的Javascript 语言类库到HTML5标准定稿后带来的Web Components 跨终端组件的快速发展。

  随着Web 越来越规范和标准的统一,Web组件化技术不断革新以及移动端开发不断升华的今天,我觉得有必要把过去一年帮助过我或朋友们的优秀开源前端框架做个盘点,希望这些与时俱进,具有行业代表性的项目能够越来越好,帮助到更多的前端开发者们。

  此榜单根据github上star数作为排名依据,一个人力量有限,如果收集有遗漏欢迎补充。(榜单中大部分为组件式框架,react、Angular等基础框架不在此篇讨论)

  1、 名称:Bootstrap

  

1

 

  类别/语言:HTML、CSS、JavaScript

  创建者:Twitter

  人气:在Github上有91007 stars

  描述:主流框架中毋庸置疑的老大,Bootstrap 是基于 HTML、CSS、JavaScript的,它简洁灵活,使得 Web 开发更加快捷。

  核心概念/原则: RWD 和移动优先制。

  浏览器支持: Firefox, Chrome, Safari, IE8+ (你需要 Respond.js forIE8)

  响应式: Yes

  模块化: Yes

  2、名称:html5-boilerplate

  类别/语言:HTML、CSS、JavaScript

  创建者:Paul Irish

  人气:在Github上有32,349stars

  描述:HTML5 Boilerplate 帮你构建快速, 健壮, 并且适应力强的web app或网站。

  核心概念/原则:响应式

  浏览器支持:Firefox, Chrome, Safari, IE8+,Edge,Opera

  预处理器:None

  响应式:Yes

  模块化:Yes

  3、名称:Meteor

  类别/语言:HTML、CSS、JavaScript

  创建者:immir

  人气:在Github上有31,092 stars

  描述:Meteor是新一代的开发即时web应用的开源框架,它能帮助你在最少的时间内完成开发。

  核心概念/原则:响应式

  预处理器: Less

  响应式: Yes

  模块化: Yes

  4、名称:Semantic UI

  类别/语言:HTML、CSS、JavaScript

  创建者: Jack Lukic

  人气: 在Github上有22,325 stars

  描述: “基于自然语言有效原则的UI组件框架”

  核心概念/原则: 语义,标签的矛盾性、响应式

  浏览器支持:Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only),Android 4, Blackberry 10。

  预处理器: Less

  响应式: Yes

  模块化: Yes

  5、名称:Foundation

  类别/语言:HTML、CSS、JavaScript

  创建者: ZURB

  人气: 在Github上有22,206+ stars

  描述: “世界上最优秀的响应式前端框架”

  核心概念/原则: RWD 、手机优先、语义的

  浏览器支持: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+

  预处理器: Sass

  响应式: Yes

  模块化: Yes

  6、名称:Materialize

  

2

 

  类别/语言:CSS

  创建者:Google

  人气:在Github上有15,288stars

  描述:Materialize是一个个基于材料设计的一个现代化的响应式前端框架。他们做了最繁重的工作,为您提供默认的样式,结合了您的自定义组件。此外,他们还改进动画和过渡,为开发人员提供流畅的体验。

  核心概念/原则:响应式

  预处理器:Sass

  响应式:Yes

  模块化:Yes

  浏览器支持:Chrome 35+, Firefox 31+, Safari 7+, IE 10+

  7、名称:Pure

  类别/语言:CSS

  创建者: Yahoo

  人气: 在Github上有13,161 stars

  描述: “您可以在每一个web项目中使用的一组小的和响应式的CSS模块”

  核心概念/原则:SMACSS,极简的.

  浏览器支持:Firefox的最新版本, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x

  预处理器: None

  响应式: Yes

  模块化: Yes

  8、名称:Vue

  类别/语言:CSS、JavaScript

  创建者:尤雨溪

  人气:在Github上有12,214stars

  描述:Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。

  核心概念/原则:响应式

  浏览器支持:Firefox, Chrome, Safari, IE9+,Android4.2+,iOS 7+

  预处理器:None

  响应式:Yes

  模块化:Yes

  9、名称:Skeleton

  类别/语言:CSS、JavaScript

  创建者:Dave Gamache

  人气:在Github上有10,622stars

  描述:Skeleton 是一个小的 JS 和 CSS 文件的集合,可帮你快速开发漂亮的网站,适合各种屏幕设备包括手机。Skeleton 基于 960 grid 开发。它是一个 UI 框架。

  核心概念/原则:响应式

  浏览器支持:Firefox, Chrome, Safari, IE10+,Opera

  预处理器:None

  响应式:Yes

  模块化:Yes

  10.名称: Amaze UI

  

3

 

  类别/语言:HTML、CSS、JavaScript

  创建者:云适配

  最后更新时间:2015年12月

  人气:在Github上有6425 stars

  描述:Amaze UI是国内首个开源HTML5跨屏前端框架产品系列,中文排版支持更优、本土化组件丰富。该产品系列中有专门针对移动端的HTML5混合应用开发框架Amaze UI Touch以及针对跨屏HTML5网页开发的Amaze UI Web。其中,Amaze UI Touch可以帮助开发者通过丰富的组件,快速构建出与原生APP相媲美的专属移动端的HTML5应用。

  核心概念/原则:组件化、移动优先、轻量级、高性能。

  浏览器支持: Firefox, Chrome, Safari, IE8+

  响应式: Yes

  模块化: Yes

### 集成超高频RFID手持终端与UniApp 为了实现超高频RFID手持终端与UniApp的集成开发,需考虑硬件接口通信、数据处理以及前端展示等方面。具体而言: #### 1. 硬件接口通信 大多数现代RFID手持设备支持通过串口(UART)、蓝牙或Wi-Fi等方式与其他装置连接。对于基于Android系统的PDA手持机来说,通常会提供SDK来简化应用程序对接过程[^4]。 #### 2. 数据交互逻辑 当RFID读写器检测到标签时,它将获取的信息发送给移动设备上的应用软件。此过程中涉及的数据格式转换和解析至关重要。开发者应熟悉所选用的具体型号及其对应的API文档,以便正确配置参数并执行命令序列以完成诸如盘点库存之类的操作[^5]。 #### 3. 前端页面构建 利用Vue.js框架下的跨平台工具——UniApp可以快速搭建适用于iOS/Android双平台的应用界面。在此基础上加入必要的组件用于显示扫描结果列表或其他业务功能所需的控件。 以下是简单的代码片段示范如何初始化一个基本的RFID读卡流程,并将其结果显示在一个uni-app项目里: ```javascript // main.js - 初始化rfid模块实例化对象 import { rfidModule } from './libs/rfid'; // 引入自定义封装好的rfid库文件路径 export default { onLaunch() { this.rfid = new rfidModule(); console.log('app启动'); try{ let res = await this.rfid.init(); // 调用sdk方法初始化rfid模块 if (res.success){ console.log('rfid初始化成功'); } }catch(e){ console.error(`rfid初始化失败:${e.message}`); } }, } ``` ```html <!-- pages/index.vue --> <template> <view class="content"> <!-- 显示已识别物品清单 --> <scroll-view scroll-y style="height: calc(100vh - var(--window-top)); padding: 20rpx;"> <block v-for="(item, index) in itemList" :key="index"> {{ item }} </block> </scroll-view> <!-- 底部按钮触发rfid扫描动作 --> <button type="primary" @click="startScan">开始扫描</button> </view> </template> <script> export default { data(){ return { itemList:[], // 存储被发现过的tag id集合 }; }, methods:{ async startScan(){ const tags = await this.$store.state.app.rfid.readTags(); // 获取当前可见范围内所有tags if(tags && Array.isArray(tags)){ this.itemList.push(...tags); } uni.showToast({ title:`共找到${this.itemList.length}个`, icon:'none' }); } } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值