本喵至今已经做了一年半的前端了,还不能自封前端大牛,但是也算是入门了~这段时间里,从一个测试实习生到写文案,到成为一枚前端实习并入职正式工作一年。对于前端知识来讲可以说是从0开始了~得到过大牛们指点,踩过很多坑,自己也在不断的摸索着,学习着,成长着。
先说说自己目前的技术能力,给想要入门前端的小白们一颗定心丸~
现在自己差不多3个小时可以切出一个兼容PC端和移动端的活动页面;一个和后端有交互并有表单验证的功能基本上1天就可以完成;一个没有见过的插件,看看文档就可以愉快的使用了;自己亲手写过两个插件;兼容过ie6;处理过xss漏洞;懂一些seo和性能优化;和小伙伴一起用html5做过手机软件~
一年半成长到这里,是不是有点慢啊~~可是我么有参加过培训班呀~~4个月包教包会包分配的培训班,没有时间参加的说~
也可能我挺笨的吧~~所以,乃们一定比我学的快~~~一定要有信心哦~~
说了那么多,讲讲我是怎么一步步变成了我曾经黑他们到吐血的大(gong)猴(cheng)子(shi)的吧~~~
1.看w3cshool的html,css,js相关知识。
本喵花了一周的时间看并记住了这里面的知识,是的一周时间,认真记住了相应标签的含义,各个css代表的样式,js的一些字符串处理函数、dom操作。可是记住有什么用呢,不用会忘啊~~
可是,用的时候,我怎么知道这样写是符合正常前端大猴子们的思维和规范的呢?这个时候,我们要做一件事,就是——抄~找一个简单的页面,自己仿照着它的样式,先写一遍,你会发现,并没有你想像的那么简单。单单是css的盒模型,元素的文档流问题就把自己搞疯了~~
一个左边是图片,右边是两行文字的logo,如下图,怎么切才最优雅?
因为是抄的,所以可以随时去看别人是怎么实现的,为什么要这么实现?
2.多练,多练,多练!重要的事情说三遍~
刚开始,喵君切一个带交互的页面要一整天~要随时去查某个css样式怎么用,某个奇怪的样式怎么写~后来做的多了,掌握了基本的原理,了解了各个标签的语义,css样式合适的场景,自然写的就快了~
所以在初学一段时间之后,一定要勤加练习,不能只看~ 徒手去做,才能知道问题在哪里,然后去寻找答案~
ps:切页面的意思是把设计师给你的psd文件,通过css,html和图片变成一毛一样的html文件,可以在浏览器中看~
3.深入理解css。
经过上述两个步骤,相信一般的网页已经难不到你了,这个时候,要深入理解一下css了,比如vertical-align和line-height之间的基情,不懂的去百度张鑫旭老师~~对,这个时候需要多看一些博客,看看大牛们在编码过程中遇到的坑,以及他们的解决方法~喵君看的比较多的就是张鑫旭、阮一峰的博客了~当然还有我司大牛们的~这个时候还可以看看视频课,比如幕课网,极客学院等等~~增长一下见闻。
喜欢新技术的孩子们,也可以看看html5,css3动画了~徒手做一做,发挥一下想象力~
4.关于javaScript和jQuery。
喵君看过js的一些基础后,就开始根据文档使用jQuery了。因为jQuery不用考虑文档的兼容性,并且我手中的项目就是jQuery啊~为了更快的接手,必须尽快掌握它的使用方法~
索性jQuery好用多了~你们用过就知道~~这里主要要说的是:
1.jQuery有很多插件,可以非常快速的帮助你完成特别的效果。
2.记住经常使用的字符串处理函数,能够很大的提高效率。
3.别太依赖它~
主要说第三点,喵君其实特别不爱用插件,原因就是没有任何一款插件能够适应所有的场景,如果有一些没法实现的效果,那么这个时候要么附加一些强制实现的代码,要么看源码改插件~都是很不优雅的事情,而且对于初学者,不要那么懒~~能自己搞定的,就练练手呗~~
喵君使用过轮播图的插件,但是前提是在之前,喵君已经亲手写过一个自动轮播的。讲真,使用插件快多了,不用自己计算滚动时间和绑定相应标签的事件,可是对于自己的收获,后者可是大多了~~
别太依赖,因为不是所有的场景都可以使用jQuery,比如移动端,引入一个jQuery还是太耗流量了~而且万变不离其宗,javaScript才是始祖~
5.了解性能和安全问题
在经过一段时间的锻炼,相信此刻的你对切页面和各种***钻的效果已经是手到擒来了。这个时候,奇怪的问题也会涌来,比如网站的安全问题,你引入的插件可能会含有漏洞,要随时更新~你写的代码里,可能会有xss攻击的隐患~~这个时候,有必要去了解一下简单的网站安全知识,至少要知道怎么改~
有时候,做的网页打开可能会特别慢,这个时候就需要我们去了解一下浏览器在输入网址之后都做了什么,哪里可以改进,优化,加速首屏的展示效果 。
还有,怎样布局整个页面才能减少浏览器的重绘;怎样才能使动画更加流畅。
6.提高编程效率。
此刻,我们对前端的知识已经有了更为深刻的了解,我们要去做伟大的事情了,怎么还能在一点点写css,重复调试修改依赖的css类上,花费太多时间呢?
这个时候我们可以看看less、sass的css预编译系统,加快我们对页面美化和制作效率。
如果你自己想建个网站,或者有人想请你帮忙写个页面,而那个人又完全不懂,没有设计师而你又特别忙的时候,bootstrap可以优雅的帮助你工作、人情两不误~~
7.了解node.js和mvc模式。
node.js是一种可以在服务端运行的语言,可以连接数据库,所以看到这里,你应该知道我想说什么了,喵君不会讲高大上的名词,什么服务端语言之类的,就是想说一句,只要能连接数据库,还要后端干什么~~
为了我们的终极理想,我们需要学的东西就太多了,mvvm模式,mvc模式 等等~喵君还没到那一步~~唱不出你们想听的曲子~~~
我们一起学习吧~~~
ps:在后几篇中,喵君会把上面提到的知识,总结一下发出来~
请高手指教,小白学习~~