零基础前端攻城狮养成计划

Posted 2020-06-14

本喵至今已经做了一年半的前端了，还不能自封前端大牛，但是也算是入门了~这段时间里，从一个测试实习生到写文案，到成为一枚前端实习并入职正式工作一年。对于前端知识来讲可以说是从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：在后几篇中，喵君会把上面提到的知识，总结一下发出来~

        请高手指教，小白学习~~