如何快速掌握一个ui框架

栏目: Html · 发布时间: 5年前

内容简介:当今前端界,各种ui框架数不胜数,而且各个大厂家,都有一套自己的框架在那摆着,这让我们前端开发者们情何以堪。如此多的前端ui框架,我们该如何选择呢,如何快速掌握应用到实际开发中呢?特别是我们新手同学,刚开始接触框架时不是特别的理解,也不大会用。这便是我们今天讨论的问题。框架的意义,什么是框架的意义,是让你去想这个框架给我们解决了什么问题,提供了什么帮助,为什么选择框架?这个答案是显而易见的:有了上面对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引入。
如何快速掌握一个ui框架
  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,相信大家都可以很快上手的。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

程序员之禅

程序员之禅

[德] Christian Grobmeier / 荣耀、朱艳 / 人民邮电出版社 / 2015-8 / 39.00元

禅是一种生活态度和生活方式。程序员是一份特别辛苦的职业,也是一个承受各种压力的群体。在物欲横流的今天,禅对于程序员有着特殊的意义和价值。 本书的作者是一名德国程序员老兵,深谙程序员的喜怒哀乐。他曾经发表了一篇题为“程序员之禅的十条法则”的博客文章,引发众多程序员热烈的讨论和强烈的共鸣。本书共10章,结合程序员日常生活和工作的方方面面,作者通过对禅的知识、理解、体验、思考和感悟,提出很多中肯的......一起来看看 《程序员之禅》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

SHA 加密
SHA 加密

SHA 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具