如何快速掌握一个ui框架

当今前端界,各种ui框架数不胜数,而且各个大厂家,都有一套自己的框架在那摆着,这让我们前端开发者们情何以堪。如此多的前端ui框架,我们该如何选择呢,如何快速掌握应用到实际开发中呢?特别是我们新手同学,刚开始接触框架时不是特别的理解,也不大会用。这便是我们今天讨论的问题。

框架的意义

框架的意义,什么是框架的意义,是让你去想这个框架给我们解决了什么问题,提供了什么帮助,为什么选择框架?这个答案是显而易见的:

  1. 统一性,选用一个Ui框架,这个框架会对样式进行统一,交互动画进行统一,这样就保证了我们这个系统的完整性,也不至一个页面一个风格,让人家感觉这是拼凑起来的一样。
  2. 兼容性,所谓兼容,不是传统意义上的去兼容啥IE 6 7 8那些低版本浏览器,而是对主流的标准浏览器的兼容性,举个例子:一个checkbox复选框在IE上显示一个样式,谷歌上又是一个样子,火狐上又是一个样子,这个时候框架开发者们就会对它的样式进行统一,并兼容各种小问题。
  3. 快速性,快速性很好理解,就是快速高效开发的意思,因为各种ui框架会封装很多我们常用的各种组件,这样我们就不用重复的去开发那些html结构和功能了。

使用框架

有了上面对ui框架的认识,那接下来肯定是要使用框架,老前端开发自不必说,我这里总结两个新手同学常出现的问题:

  1. 安装,这个问题几乎是新手同学百分百遇到的问题,这个问题的原因在于:因为现在的spa单页应用的开发,不像以前传统的开发,使用scripr标签src属性引入即可,而是使用npm安装,然后在进行注入,然后新手同学们对此就很陌生了。我觉得出现这个问题很重要的一个问题,是因为马虎,抛开国外的框架不说,像国内的框架,他们的框架安装上的使用说明,官网上其实都写得很详细得,而且是百分百适合国人阅读习惯得,而偏偏很多新手同学却总是在安装上出现问题,各种报错,问题就是出在马虎,马虎得原因就是很多同学不去人家官网看,而是先去百度一通,搜出各种教程博客,搜出得那些教程博客,本身也不会有太多错,毕竟人家花心思写了,而是在你引入后忘记了注入或者缺少了引入样式,比如:vue项目,你不只要引入主框架(js文件),主框架你还需要被vue.use()执行注入,还需要相应得引入css;angular项目(angular2以上),引入主框架后,你需要在@NgModule({})里的imports属性里导入,注意,angular项目在ui框架样式文件和vue有那么丢丢差别,vue一般写在main.js里就可以了,而angular项目一般都会引入到项目里的全局css文件style.css,执行@import引入。

  1. 组件的应用,安装好框架,就涉及到实际应用,在讲实际应用之前,先讲一下大家看现有项目会出现的情况,在看现有项目时,该项目里使用了某个ui框架,然后项目代码里各种陌生的属性,看着让人云里雾里,摸不着头脑,出现这种情况,首先一是对项目不熟悉,这个无可厚非,其次是因为你对应用这个ui框架里组件的属性和功能不了解所致。实际使用一个框架,很多新手同学对于应用,都是把代码粘贴复制过去,却忽略了去看实际的使用说明或者看的不仔细,任何一个ui框架里的组件,官网里面都有对应这个组件的api,属性的作用,方法的调用,以及使用的注意事项。其实这个时候我更加建议新手同学,先多花点时间去看这个组件的api,了解它的用法和注意事项,这样你在开发过程才会更加的事半功倍。
  2. 框架的认识,每个ui框架呢,都有一些自己特有的组件,说白了就是自己有,别人没有的,也正是因为这个原因,在项目启动初期,在技术选型时,这也是对ui框架的一个选择标准,我们需要它的某个功能来实现我们的需求,当然也涉及到实际应用和可扩展性。说到组件,这里并不想去说各个框架特有的,而是想说大家都有的,因为你对这个的认识,将决定你对ui框架使用的熟练度,说白了就是你使用框架的段位在几级,初级,中级,高级,还是大神级。我对ui框架里的组件分为这几大类型:
  • 布局型组件:主要指栅格系统组件,layout布局组件等
  • 基础型组件:主要指按钮,图标,字体,颜色等
  • 导航型组件:主要指菜单,tab标签,分页控件组件,下拉列表组件等
  • 表单型组件:input输入框,checkbox复选,radio单选,评分,日期,form表单等
  • 对话框型组件:主要指确认对话框,信息提示框
  • 数据视图组件:主要指table表格,list列表等

上面几个类型几乎是所有ui框架绝对都有的组件类型,唯一的差别有可能是各个ui框架对该类型命名的不同而已了,而功能也几乎一样,而所有组件都是封装出来的小组件,根据功能需求都会提供:**“属性,方法,事件”**这几个接口出来供我们使用,因此我们在调用组件时,对应的去查看它的api就OK了,使用也就如此简单了。

总结

本篇文章更多都是些理论知识,目的是帮助新手前端同学们对ui框架的认识,不会辣么惶恐和害怕,而ui框架应用的核心精髓其实就跟我们掌握,js,jquery,vue,angular一样,耐心仔细的看他们的api,并适当的练习下小demo,相信大家都可以很快上手的。

猜你喜欢

转载自juejin.im/post/5c01efcc5188252510541904