前端是一个看似入门门槛不高,但要学好很难的领域。前端的知识体系庞杂又松散,技术演进快,如果摸不清脉络的话很容易陷入盲人摸象的困境甚至跑偏。

其实只要掌握了正确的方法,学习前端和学好前端就只是个时间问题。

1.梳理清楚知识体系框架

学习前端,不管是入门还是进阶,一定都要有知识体系建设的想法。就算是刚开始学,也一定要有这样的意识。前面说过,因为前端知识点多而分散,所以如果不能构建起自己对于前端的知识体系框架的认识,很容易就会不知所措,没了方向。
 
这样看起来是不是清爽很多?

2.准备和基础的学习

HTML,CSS,Javascript这三样真的很重要,真的很重要,真的很重要,刚开始的时候你压根不用去管那些花里胡哨的框架,一定要把基础打好。框架再怎么更新迭代,最基础的东西还是这三样,只要你能掌握好基础,就等于拿到了打开前端世界的钥匙。

3.把学的东西用起来

每次学过一些小的知识点,都要想办法把它们用起来,想清楚这些知识点的有哪些使用的场景,等到基础知识学到一定程度了也可以反过来,先预先想好场景和要实现的功能,再去想在这些场景下面该用哪些知识,如果遇到了解决不了的问题和没有学过的知识,去你的脑图里把它的位置搞清楚,写出来。列入后续的学习计划。

一定不要一直看,一直学,却不在具体的场景里去用,你应该养成拿自己学到的东西做些东西解决些问题的习惯。不断的做出东西,解决问题,不断给自己正向的激励,不断的完善自己的知识体系,一定要让自己有成就感。

找到适合自己的前端发展方向

 

前端是N类人的统称,是个很大的圈子很大的世界。很多时候的口水仗,作为围观群众的我看来,完全是两个不同路子不同关注点的人的打情骂俏,是不可能有结果的。为什么呢?打个极端点的比方,就本身职业领域这一块,设计师的关注点和开发同学的关注点能一样吗?如果一样,就不会在设计部门有“我要好好调教我们公司的开发”,同时技术部门有“我要好好调教我们公司的设计师”的说法了。你有看到哪个公司,设计师和开发一起其乐融融去团建的吗?我是没见过的,完全玩不到一块。

人类之所以强盛,就是因为人类本身具有多样性,有各种各样的性格各种各样的特质。前端要想繁荣,也是离不开各式各样的小伙伴在各自的领域和方向上发光发热。关于这一点,其实很多前端都是知道的,但是,遇到有些场景的时候就没有意识到这一点。比方说,偏数据的前端往往喜欢工程化,但是,如果是偏设计的前端,很多时候需要摆脱工程化思维,重视定制化以及特异性思维。但是这两类人就经常会一起争论某个观点,因为,虽然谈论的是一个东西,他们也都是前端,但实际上两人并不是一个路子。同一个路子的前端的争论才会有成长,不同一个路子只会一直吵下去。

如果从产出的代码比重来衡量这两类前端。偏后的前端提交的代码主要是JS和HTML,没错,有HTML,因为套模板,而偏前的前端提交的代码主要是CSS和HTML,这里的HTML往往是原型。在座的可以对号入座看看自己是哪个领域的。

不妨现在喝杯茶,仔细想想自己平时接触的代码,看看自己是从事哪个方向?

然而,放眼实际,很多小伙伴是一个人从头走到尾的,页面自己写,视觉交互自己写,数据交互也自己写。这种小伙伴在重视功能的中小企业或者非纯正互联网企业是非常受欢迎的,技能程度和企业需求也是契合的。加以时日,只要是情商正常,表达正常,在企业做个技术经理是毫无压力的。

但,人往高处走,尤其这几年优秀前端的用人荒,有些团队招人的招数防不胜防,所以,这些小伙伴就忍不住看看外面的机会,一些互联网大厂或者独角兽公司就是心仪的目标。然而,最终的结果可能会碰壁,为什么呢?大厂都是有前端团队的,是一种合作模式,如果你前端跨度很广,但是,每一个点都只是你自己以为不错的水平,其实你什么都不会,这不是全栈,是全蛋。原因下面几点:

  1. 人的精力是有限的
    每天除了吃饭睡觉剩下就是前端的人是很少数的,就算有,能坚持个1年就很了不得了,所以,那些工作才3, 5年就自诩全栈的,只能说可能和我对全栈定义的标准不一样。
  2. 人的特质是固定的
    有人内向,有人外向;有人细腻感性,有人洒脱理性;有人想象力丰富,有人抽象能力出众。前端作为一门承上启下的职业,承接的真是两个不同路数的群体。所以,你若想全栈,需要内外兼修,感性与理性并存,富有想象力,同时抽象能力和逻辑思维能力出众。这样的小伙伴有吗?有。但肯定不是你,因为如果你是这样的人,你根本就不需要看本文喝鸡汤。

所以,正确的发展之路应该是先找到适合自己的前端发展方向,朝着这个方面努力深入,同时扩大自己其他方面的成长。大的前端团队需要的是一专多长的人。

都有哪些方向呢?

我列举几个我知道的方向:界面展现用户体验和可访问性方向、偏后的js/nodejs开发方向、audio/video音视频等富媒体方向、SVG/canvas/webGL动效创意表现与数据可视化方向、工具建设文档管理内部站建设的前端运维方向。根据客户端不同,还可以分为PC端方向,移动端方向以及物联网方向。

我该选择哪个方向呢?

可以从下面几个点判断:

  1. 成长经历
    比方说你以前学计算机的或者通信工程之类的,理工科气质浓郁的,建议往后走,JS要扎实,要懂至少一门后端语言,了解一定的HTML和CSS。如果你以前是学数学物理的,可以走动效数据可视化方向,因为这个领域除了JS扎实,还需要数学和物理比较强。如果是有设计背景的,可以用户体验和可访问性方向,优势在于设计敏感,关注情感体验,对细节把控拿捏更准确,理解并接受重复性工作。
  2. 个人喜好
    喜欢编程喜欢工程化,偏后;我喜欢酷酷的动效,动效方向;我喜欢做面向用户的产品,让整个交互自然,则可以走体验方向;喜欢基础建设,则可以干运维。等等。
  3. 和谁玩得来
    我和设计师们在一起的时候更自然亲切很聊得来,你应该走前端偏前的领域;如果你和后端开发在一起的时候更自然亲切很聊得来,你应该走偏后领域;如果你和设计和后端在一起都很亲切自然都玩得来,你应该做领导,统筹资源,协调管理。
  4. 个人能力
    如果你能力一般般,只想混口饭吃,公司需要你哪个方向你就选哪个方向。如果你能力一般,编程实在学不来,但又不想被人颐指气使,可以试试小众方向,HTML可访问性,无障碍阅读以及SEO等,这是进大厂比较好的途径。就类似于,当年的我想上清华,只能选考古专业一样。如果能力很强,来,这位爷,这里几位姑娘全是本院的头牌,您随便选!

然而,现实是残酷的,不是说你选择了哪个方向,且适合自己,你就一定发展很好。

HTML/CSS的入门实际是很简单(但这种简单的意义非常深远,以后再聊),门槛很低,效果又是所见即所得,容易培养兴趣,所以茫茫中国,会写页面的人何其多。要想脱颖而出,要么有万人之上的深度,要么万人玩不来的技能

万人之上的深度:勤奋刻苦会让你有所成,但是,想要登峰造极那必须是要有天赋的。所以,单纯想通过HTML/CSS走上人生巅峰,如果没有足够的天赋,以及超幸运的环境支持(公司写代码的全男的,就我一个女的,还美女),那么你会很快撞到人生的天花板。
万人不会的技能:在web领域,我觉得此技能为两块:一是扎实的设计功力,二是数学功底与逻辑思维能力。二者其一即可(兼得的跟我们不是一个档次的,不予讨论)。小时候的熏陶、绘画基本功练习,设计理论的学习,这些是很难被一般人超越的。所以,普通人想去转行做设计,除了一些罕见的具有天赋的人,往往会拿激情当才能,最后苦逼命!第二个,就是数学功底与逻辑思维能力。恰好,今天微博上看到了一张图:

虽然有玩笑成分,但不可厚非,工作之后的数学功力是个很明显的技能优势。恰好,动画,web矢量绘制需要用到大量的数学知识。于是,大家是不是看到了一个可以跟其他芸芸区分的方向?至于逻辑思维,更多涉及JavaScript以及后台开发等相关知识,即计算机背景优势,阿里的前端基本上都是这么一出。

于是,我提炼了下可以脱颖而出的技能组合:

技能 程度 境况
设计 | HTML/CSS deep | good+

HTML/CSS good

HTML/CSS deep

HTML/CSS/JS | 数学、动画、图形 deep | good+  
HTML/CSS/JS | 后台语言、服务器 deep | good+  
设计 | HTML/CSS/JS | 数学、动画、图形 | 后台语言、服务器 good+ | deep | good+ | good+

所以,要想前端有所成,有两条路,一是往前,webGL, canvas, SVG领域,这需要对图形敏感,有设计感,有动画素养,有相当的数学知识,以及最重要的JavaScript控制能力;一是往后,走开发路线,工具,富应用,运维(数据统计、前端安全、前端部署)领域,这需要懂后台、计算机网络、逻辑思考能力,以及最重要的JavaScript开发功力。

无论那条路,JavaScript的掌握都是基础、都是中枢。So, 虽然新技术,新方向很诱人,但是,如果基础不好,走两步就会摔倒,吃力不讨好。静下心来,好好扎实前端基础再说,年轻当时,步子跨大了,当心扯着你未来老婆的最爱。

 

亡命之徒aaaaaa.......chao的更多相关文章

  1. sort命令与cat区别25.1 由于sort默认是把结果输出到标准输出,所以需要用重定向才能将结果写入文件,形如sort filename > newfile [root@shiyan a]# cat a.txt aaaaaa [root@shiyan a]# sort a.txt >c.txt ------------- 在重定向前会自动创建c.txt这个文件。 [root@shiyan

    25.1 由于sort默认是把结果按照行排序后输出到标准输出,所以需要用重定向才能将结果写入文件,形如sort filename > newfile[root@shiyan a]# cat a. ...

  2. Eclipse和MyEclipse工程描述符.classpath和.project和.mymetadata详解aaaaaa(转)

    Eclipse和MyEclipse工程描述符.classpath和.project和.mymetadata详解(转) (2012-03-28 15:06:54) 转载▼ 标签: .mymetadata ...

  3. AAAAAA

    有可能被立案调查.暂停上市.退市风险警示*ST.特别处理ST的公司:银鸽投资(SH:600069).天山生物(SZ:300313).金贵银业(SZ:002716).美盛文化(SZ:002699).未名 ...

  4. POJ 1027:The Same Game 较(chao)为(ji)复(ma)杂(fan)的模拟

    The Same Game Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 5168   Accepted: 1944 Des ...

  5. 自己实现一个javascript事件模块

    nodejs中的事件模块 nodejs中有一个events模块,用来给别的函数对象提供绑定事件.触发事件的能力.这个别的函数的对象,我把它叫做事件宿主对象(非权威叫法),其原理是把宿主函数的原型链指向 ...

  6. 【C#公共帮助类】 Utils 10年代码,最全的系统帮助类

    为大家分享一下个人的一个Utils系统帮助类,可能有些现在有新的技术替代,自行修改哈~ 这个帮助类主要包含:对象转换处理 .分割字符串.截取字符串.删除最后结尾的一个逗号. 删除最后结尾的指定字符后的 ...

  7. Linux文件查找.md

    Linux 文件查找 在Linux系统的查找相关的命令: which 查看可执行文件的位置 whereis 查看文件的位置 locate 配合数据库查看文件位置 find 实际搜寻硬盘查询文件名称 w ...

  8. Atitit 智能云网络摄像机的前世今生与历史 优点  密码默认888888

    Atitit 智能云网络摄像机的前世今生与历史 优点  密码默认888888 用户名admin  密码aaaaaa 网络摄像机是一种结合传统摄像机与网络技术所产生的新一代摄像机,它可以将影像通过网络传 ...

  9. Atitit onvif 协议截图 getSnapshotUri 使用java

    Atitit onvif 协议截图 getSnapshotUri 使用java 1.1. ONVIF Device Test Tool1 1.2. 源码2 1.3. 直接浏览器访问http://192 ...

随机推荐

  1. GreenDao 数据库:使用Raw文件夹下的数据库文件以及数据库升级

    一.使用Raw文件夹下的数据库文件 在使用GreenDao框架时,数据库和数据表都是根据生成的框架代码来自动创建的,从生成的DaoMaster中的OpenHelper类可以看出: public sta ...

  2. PHP好用但又容易忽略的小知识

    1.PHP函数之判断函数是否存在 当我们创建了自定义函数,并且了解了可变函数的用法,为了确保程序调用的函数是存在的,经常会先使用function_exists判断一下函数是否存在.同样的method_ ...

  3. continue break 区别

    在循环中有两种循环方式 continue , break continue 只是跳出本次循环, 不在继续往下走, 还是开始下一次循环 break  将会跳出整个循环, 此循环将会被终止 count = ...

  4. css样式之border-image

    border-image-source 属性设置边框的图片的路径[none | <image>] div { border: 20px solid #000; border-image-s ...

  5. Java实现多线程断点下载(下载过程中可以暂停)

    线程可以理解为下载的通道,一个线程就是一个文件的下载通道,多线程也就是同时开启好几个下载通道.当服务器提供下载服务时,使用下载者是共享带宽的,在优先级相同的情况下,总服务器会对总下载线程进行平均分配. ...

  6. VMware安装CentOS

    centos镜像地址:https://www.centos.org/download/ VMware版本:12.5.2 build-4638234 创建新的虚拟机 直接默认下一步 稍后安装操作系统-& ...

  7. 08讲browse命令的使用技巧

    .浏览所有parts ,使用技巧 .浏览所有 nets,使用技巧 在上图中选择nets .浏览所有 offpage connector,使用技巧 如上 .浏览所有 DRC makers,使用技巧 5. ...

  8. Linux配置防火墙 开启80端口的方法

    命令行输入: vi /etc/sysconfig/iptables 将 -A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT ...

  9. 【腾讯优测干货分享】如何降低App的待机内存(二)——规范测试流程及常见问题

    本文来自于腾讯优测公众号(wxutest),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/806TiugiSJvFI7fH6eVA5w 作者:腾讯TMQ专项测 ...

  10. 我的公司培训讲义(1):.NET开发规范教程

    这是1年多以前我在公司所做讲座的讲义,现在与园友们分享,欢迎拿去使用.一起讨论.文中有若干思考题,对园友们是小菜一碟.另有设计模式讲义一篇,随后发布.博文上了首页,感谢博客园团队推荐,也感谢所有园友的 ...