前端学习方法!

最近发现有很多人都想学习前端,然而大多都是不知道从何入手,一脸的迷茫。所以作为一名已经有一定工作经验的前端工程师,我觉得是时候回报社会,分享一下我

的前端学习方法了,毕竟我也是通过网上各路大神的帮助和讲解,才能走到今天的!

首先,先说说基础。

必须声明,基础很重要。现在网上各路UI框架js框架一大堆,功能各异,看起来都很厉害的样子,就导致一些刚接触前端的,html,css,js,这三大基础性的东西都

没学会就去研究框架去了,然后就是个各种bug,UI框架效果不会改,做出来的和想象中的完全不一样,使用js框架无端报错,明明很对照着敲,却还是错,百度到怀疑人生, 

试到绝望,才终于会一丢丢,原来是少写了东西,函数用法错误,又或者是作用域错了,等等一些奇葩问题,其实这些都是基础不扎实的结果。那么重点来了,怎么才能打好基

础呢?其实很简单,就是在学习的时候就多敲代码,去w3school这个网站看完例子然后就对着dom敲,仿写各种网站,编程工具建议用hbuilder,因为是中文的比较清晰明白

易上手。


1、html和css,你必须清楚十分清楚的了解div,span,p,select,option,ul,li,input,table,form表单,等一些常用的标签都有什么样的特性,块元素还是行

内元素,都自带有什么默认样式怎么清除默认样式等,比如说select的默认样式可以通过appearance:none;清除,然后可以通过background设置新的下拉框背景图片,a标

签的默认样式可以通过text-decoration:none;清除等,然后多仿几张静态页面,比如说做一个电商网页的头部,尾部,导航栏,搜索框,登录框,商品详情,内容详情等,注

意margin负值的使用,了解盒模型,相对定位,绝对定位,固定定位,浮动,清浮动这些常用的写法要懂灵活使用,前期建议就是照着菜鸟教程或者是w3school这些网站上的

例子敲,然后可以在打开网页后按f12看该网页的html结构,想一下他们为什么这样布局,如果是你你会怎么布局,最后相信你肯定会是收益匪浅的


2、js重中之重,初学者没有编程语言基础的同样是建议去菜鸟教程或者是w3school这些网站上,按上面的指示步步敲,首先大致了解js是什么,都有什么数据类型

等,然后从定义变量开始,学会console.log打印调试,for,swich,while循环的不同点,if判断,&&,||,!等运算符的使用,数组,对象元素的增删查改都用的什么方法?

shift()和pop这两个删除方法的区别,字符串的截取slice()、substring()、substrde这三个常用方法的 用法和区别,去重,换位置,数据类型的转换等等的方法,比如数

组、与字符串的互转可以通过join和split这两个方法,函数的创建,函数的形参实参各是什么意思,函数指针等,什么是闭包,优缺点,面向对象编程与面向过程等,比如

闭包的作用就是可以使外部函数引用内部函数的变量,不增加额外的全局变量,为了不使闭包造成内存的泄漏,用完后应清除引用,释放内存等。ajax核心--XMLHttpRequest

对象,如何创建这个对象,然后如何通过它实现与服务器通信等,json数据格式怎么写,json如何转换成字符串等,cookie的使用,通过js对css属性的添加与删除,如何创建

html标签,获取标签类名id等,要知道页面上的大多数运动都是通过定时改变元素位置改变的,也就是通过改变position相对定位left,top的值实现的(以上这些都可以通过

在w3school上找到答案,例子可以通过百度js运动,面向对象这些关键词就可以看到很多的解释和源码了)

3、css3+html5,当你对最原始的html,css,js都有一定的了解之后就可以学习css3和html5这些新属性了,比如说css3的旋转,运动,弹性盒子布局等,html的本

地存储localstrong和存于服务器上关闭浏览器就消失的sessionStorage,视频标签video,音频标签audio、画布canvas(这个学好了可以做很多游戏)、获取用户地理位

置方法getCurrentPosition() 等的使用,这些也可以在w3school上找到实例源码,照着敲有个基本了解就可以自己写一些新东西了,这时你会发现前端是个很有趣的东西

,反正我自学的时候是这样子的。


    最后才是框架,因为如果你基础好的话,你会发现框架很好学,毕竟一切js框架都只是js方法封装合成的一个库,简单说说我对框架的理解,我认为jq是最好最成

熟的,我喜欢它强大的选择器,然后vue是数据处理方面比较小巧且方便的,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提

供驱动。bootstrap是比较多人用的且易上手的UI框架,还有其它的框架,也可以相应的去了解,在我看来jq是最好的框架,就像有人说php是最好的语言一样,莫名的喜

欢,好了不说废话了,继续说重点:框架更新是很快的,为了适应市场需求,我们必须有非常强的学习这些框架的能力,这个能力要么是天赋,要么就只能通过加强

对基础js知识的理解来达到更快学会使用框架的目的,而且js足够好完全可以自己写框架,还有如果仔细看就会发现我在说基础的时候多次提到了w3school这个

网站,我想说的是这个网站是对初学者最好的网站,因为这网站对基础知识讲解得十分详细,且系统化,一步步的十分紧凑,建议多去看,最后js推荐两本书

(”JavaScript权威指南”和“你不知道的javascript”)不懂可以上csdn搜索提问,多逛博客,个人感觉这上面的大神是真多,看看各路大神的见解也是极好的。

特别推荐尤雨溪,阮一峰,廖雪峰这三位大神的博客!

第一次写这种分享文章,后续会提供更多前端路上的知识,希望能帮到各位读者,最后再强调一句,html,css,js这三大基础真的很重要!

你可能感兴趣的:(web前端)