前端常用框架整理
说明
本文介绍一些本人使用后体验感不错的框架(个人编写前端经验并不多,使用过的也很有限,欢迎推荐),下面介绍的框架基本都可以在CDN当中找到:CDN链接
传统开发框架
一般基于传统模式开发(通过<script>
标签引入各个js文件)常用的框架
Jquery
主要用于DOM操作的JS框架,里面封装了很多函数可用于直接操作DOM,并在网上有很多各种功能的插件供使用
官方文档参考:https://www.jquery123.com/
基本使用可以参考我的文章:https://www.jianshu.com/p/01b81b30fa20
Bootstrap
该框架主要用于设置前端展示样式,提供了很多好看的样式,并能够兼容电脑和手机的页面布局
官方文档参考:https://v3.bootcss.com/css/
基本使用可以参考我的文章:https://www.jianshu.com/p/f5870a554476
Font Awsome
也是一套CSS样式框架,主要是提供了各种字体图标样式
文档参考:http://fontawesome.dashgame.com/
教程参考:https://www.runoob.com/font-awesome/fontawesome-tutorial.html
还有个叫iconfont的平台提供的图标样式也很不错,这里附上链接:
https://www.iconfont.cn/
Layui
该框架也是用于设置展示样式,提供了很多好用且好看的组件,如:分页、日历、字体图标等
如分页表格参考:https://www.layui.com/doc/modules/table.html
日历参考:https://www.layui.com/doc/modules/laydate.html
官方文档参考:https://www.layui.com/doc/
注:
该框架在上面提供的CDN当中没有,可以在下面的CDN链接当中找到:
CDN链接
模块化开发框架
现在比较常用的模块化开发,结合webpack
之类的工具构建打包的框架(当然这里介绍的框架在传统开发模式下也能使用,但是更建议在模块化开发下使用,因此归类在此处)
Vue
该框架基于MVVM模式,主要用于数据绑定,减少DOM操作,提高渲染效率,并且提供了很多方便的模板语法等,是前后端分离常用的框架,和其类似的还有react和angular,而vue在这些框架之间是相对来说最好学的一个,并且性能上也不会逊色。在开发单页、且数据处理多的应用上是首选框架
官方文档参考:https://cn.vuejs.org/v2/guide/
或者参考:https://www.runoob.com/vue2/vue-tutorial.html
注:
单页应用:一般的网页在切换页面时,都会重新发起请求,同时返回的也都是完整的html代码;而在单页应用中切换页面则是通过销毁原先的内容,生成新的内容来实现,因此并没有发起请求,在效率上更高,详细可以参考:https://www.jianshu.com/p/4c9c29967dd6
Element-UI
提供了很多好看的样式组件,配合vue之类框架的模块化开发,类似于和vue版本对应的bootstrap(Element-UI在移动端响应式上相对弱一些,因此移动端建议使用如:muse-ui(样式好看但提供的较少,官网)、vant(更可靠些,适合电商类项目,官网)、vux(官网)
之类的框架)
官方文档参考:https://element.eleme.cn/#/zh-CN/component/installation
可视化框架
做一些可视化图形展示常用的框架
Echarts
该框架主要是用于绘画各种可视化数据图表,特别好用,在国内也挺火的
参考:https://echarts.baidu.com/
D3
和上面的Echarts差不多,但是中文资料没有Echarts那么全
参考:https://d3js.org/
看到有的文章推荐的挺多前端的干货,这里放上链接: