上一篇我们讲了前端切图的学习路线,不知大家有没有收获。今天来聊聊前端工程师的核心技能之——JavaScript。js这门语言看似简单,但要做到入门、熟练以至于架构的程度,还是有一段路要走的,今天就来聊聊这段路上都要经历些什么。准备好小板凳,开讲~

level 1

首先你要对js的基础知识进行系统的学习,脑海中先有一幅知识蓝图。我们现在说的js其实包含三部分:ECMAScript规范、DOM规范、BOM规范,你要知道这三部分都有哪些内容。其中ECMA规范定义了js作为一门编程语言的标准,包含变量基本类型、对象、函数、作用域、运算符、流程控制语句等。DOM规范则规定了js如何与网页进行交互,包括访问与操作DOM节点、不同类型的节点都有哪些特性和方法、事件的监听与传播等。BOM规范定义了js如何与浏览器进行交互,包含window对象、location对象、navigator对象、history对象等。

基础知识的学习最好就是看书了,像犀牛书、蝴蝶书、高程,都是经典的教材。

当你掌握了以上基础知识的时候,差不多能写出像弹出、移动、删除节点等动效,你体会到了所谓交互其实就是用DOM操作来模拟出各种“假象”。这个时候你会开始接触jquery,或许接触的还更早一些。你开始逐个尝试jquery封装好的各个API,发现用jquery书写代码确实简单了很多。jquery的学习和原生js的学习其实也没必要有严格的先后顺序,我一开始也是穿插的来学的。你只要清楚哪些是js的内容,哪些是jquery给你包装出来的快捷方法就行。

尝到jquery的甜头之后,你会发现一个大宝藏,那就是jquery插件。你要用到的各种组件网上基本上都有现成的,你开始在网上扒一些插件下来,自己连猜带蒙改改代码,改出一个自己能用的版本。你这个时候也会开始用jquery-ui,这一套比较完善的插件库,能解决你很多需求。

这就是第一阶段,你对js有了一个基本了解,自己摸索着能改改别人插件,差不多能写出一个完整的“玩具页面”了。

level 2

在上面的基础上写了一段时间代码后,你会感觉到自己的调试效率很低。具体表现为,你写的代码有时候总是运行不出自己想要的结果,代码报错了你却怎么调也调不对。这时候你就要对js进行更深一轮的理解了,你要对js中的一些概念做到真正的理解,比如作用域链、原型、闭包。比如你要知道js运算的自动转化机制,为什么2+“1”是string,而2-“1”是number。typeof和typeof()前者是操作符后者是内置函数。如何判断一个变量是否是数组,等等这些细节问题,都是有对应的概念和原理能解释的,你要做到知其所以然。

这个阶段你会开始与服务端进行交互了,原生的ajax要理解并能手写,jquery的ajax要熟练使用。你会遇到ajax的跨域问题,开始掌握发送跨域请求,知道JSONP是个什么东西,从原理上。

在改了无数别人的插件后,你需要开始自己动手写一个jquery插件了,因为别人的难免有坑,自己写的才最可控。另外对于自己的逻辑和代码组织能力也是一个锻炼。自己尝试写插件吧,从简单到复杂。比如一个弹框插件,要具备可以配置宽高、标题、内容、回调函数等功能。或者是一个焦点图滑动插件,不要看别人的代码,自己完全从头开始构思。

当你能理解jquery的插件机制,并能自己写出项目所需的插件时,你的js水平又上了一个等级。做到以上这些,你基本可以应付一个项目的前端需求了。也就是说,你写出来的页面不再是玩具了,可以上线使用了。

level 3

接下来你应该开始接触一些更复杂的系统了,就是所谓的“富客户端”,前端代码量上了一个档次,一个js文件动辄成白上千行。你会发现js代码还像以前那样从上往下堆着,太乱了。你写的ajax返回的数据越来越复杂,用拼字符串的方式进行局部更新太费力了。

这个时候你会开始用前端模板引擎来进行局部更新,比如handlebars、artTemplate等等。你需要熟练使用他们,并尝试去理解这些模板引擎的运行机制。

然后你要开始使用mvc模式来组织你日益复杂的代码了,典型的框架就是backbone。但是backbone现在已经过时了,虽然用的不多了,但如果你还是新手,起码去了解一些它的思维,知道用逻辑层次来划分代码结构是怎么个搞法。知道前端路由是个什么机制。

到了这个阶段,你已经告别了原先的纯“刀耕火种”时代了,你开始使用各种框架来帮助你更好的完成功能。

level 3 plus

为什么有个3 plus阶段呢?因为你此时需要进行的是一个横向的扩展,js的学习本来就是一个纵横交叉的网络嘛。

此时是学习HTML5的最佳时机,一方面你对js的基础知识有了一定的储备,另一方面你也可能开始接触移动端的页面了。

HTML5新增的标签倒是小菜一碟,像<header>、<footer>、<section>、<video>之类的你在之前也多多少少接触了。更多的内容在HTML5新增的js API这块。比如新增的File API,localStorage/sessionStorage、canvas API、histroy的扩展,xhr的扩展等等。这些在移动端都是可以放心使用的,需要你对这些新特性一一学习。

你也应该在这个阶段尝试移动端的页面,了解它与PC页面开发的不同点。比如你应该在移动端抛弃jquery,开始使用zepto。了解touch事件,了解移动端click 300毫秒延迟的问题并找到解决方法。尝试写移动端的组件,如无限滚动、左右滑动插件,并解决移动端的性能问题。在网上找找司徒正美、张代平、叶小钗等总结的移动端兼容问题的解决方案等等。

总之,在这个阶段,你要能拿得下移动端页面的开发,并熟练使用HTML5的新特性。

level 4

经历了上面阶段,你的单兵作战能力已经算可以了。这个时候你会面临团队协作以及模块化开发。这个时候你就有必要了解模块化的规范了。你需要了解commonjs、AMD、CMD都是包含哪些内容,他们是什么关系,有哪些区别。

你起码得使用一下requirejs,知道老牌经典AMD模块化工具是个什么思维,解决了哪些开发中的痛点。seajs你也需要了解,知道seajs对AMD进行了哪些改进和包容。最后,你得知道commonjs规范是如何借助打包工具(browserify、webpack)一统天下,通吃服务端(nodejs)以及浏览器端的。

模块化开发与打包是分不开的,这个阶段,你也应该自己尝试使用grunt、gulp、webpack对项目进行构建和打包。尽管grunt已经没落,眼看未来是webpack的天下。

level 5

上面几个阶段的内容,其实已经是三年前乃至更早时候的东西了。在这个阶段,你才真正与时代接轨了。那就是mvvm。

你应该首先了解mvvm模式的开发思想,它是如何用双向绑定的方式来解脱我们的DOM操作,又是如何用组件化的思维来更好组织我们的代码。

老牌的mvvm框架如ember、knockout,你估计能用上的概率不高了。但是从2013年开始火起来的avalon和angular你起码得用一个。做到能用mvvm架起一个项目的程度。关于angular我曾经写过一个系列的文章,有兴趣的同学可以在我博客搜索,或者百度关键字「走近angularjs」。

最新也是目前最火的vuejs你可以得开始了解,它面向未来,只兼容高级浏览器,性能极佳而且API极简,是移动端mvvm方案的不二选择。

学习mvvm,会对你的开发习惯和开发思维进行一次转变,相对于jquery时代。可能一开始会不习惯,但这个转变是你必须经历的,因为,它会变成你未来学习其他框架的基石。

level 6

在与时代接上轨之后,你还不能停,还得更近一步。因为未来已经离我们很近了。没错,我说的就是ES2015。ES2015,乳名ES6,已于去年发布正式版,虽然浏览器的支持程度还在慢慢完善,但是我们现在使用babel进行编译后,已经完全可以工作了。

所以你现在就应该开始了解并使用ES6了。事实上,我们项目组也是今年才开始使用ES6的,对于新特性,越早上手肯定是越好,毕竟还需要一定时间的熟悉,以及开发模式的架构。

另外一块新技术就是React,以及React Native、淘宝weex这样的混合app开发框架。这又是一套全新的开发理念,在未来两三年也必定会占领越来越多的份额,所以,他们的学习也是不能落下的。其实在我们公司,目前还未开始React的使用,我相信在不久后的某个时间节点,也就自然上场了。

到了这个阶段,js方面的主流知识和框架,你也已经掌握的差不多了。其实这个时候也就不需要我来指点学习路线了,因为你到了这个阶段,自然也就明白了行业的发展趋势,能够自己把控该学什么该用什么了。

level 7

源码深度研究以及研发框架。应该明白是什么意思了哈。因为我自己目前也还不到这个阶段,所以也就不误人子弟了。放在这里,当作奋斗目标好了。

今天要说的就这么多了,这差不多也是我这几年的学习路线,基本和行业发展的进度吻合。但这也只是一条主线而已,前端领域的知识是网状的,这中间又会穿插各种大小知识,需要在学习的过程中点滴积累了。关于主线之外的其他知识点,我会在后续的文章中再给大家叨叨。敬请期待下一篇:前端自学路线之综合篇。

前端自学路线之js篇的更多相关文章

  1. 2018年Web前端自学路线

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Web前端入门的自学路线 新手入门前端,需要学习的基础内容有很多,如下. ...

  2. 我的web前端自学之路-心得篇:我为什么要学习web前端?

    时光如流水,转眼间,自己已经是大三的学长了,看着一个个学弟学妹,心中有种莫名的感觉,很怀念大学的前两年时光,但也很憧憬着自己的未来,自己将要去经历很多从未经历的事.我是我们学校信科院的一名学生,在编程 ...

  3. 前端基础3:js篇(基础及算法)

    1.js闭包相关: 题1: for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000 * i); ...

  4. 2019年Web前端入门的自学路线

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文.本文内容不定期更新. 我前几天写过一篇文章:<裸辞两个月,海投一个月 ...

  5. 好程序员web前端分享前端学习路线自学如何找到工作

    好程序员web前端分享前端学习路线自学如何找到工作,自学能不能学会WEB前端并且找到WEB前端开发岗位的工作取决于自身条件,如果基础好,自律性强那么将会容易很多,还有就是自学最难克服的并不是知识点,而 ...

  6. 一个「学渣」从零开始的Web前端自学之路

    从 13 年专科毕业开始,一路跌跌撞撞走了很多弯路,做过餐厅服务员,进过工厂干过流水线,做过客服,干过电话销售可以说经历相当的“丰富”. 最后的机缘巧合下,走上了前端开发之路,作为一个非计算机专业且低 ...

  7. (纯干货)最新WEB前端学习路线汇总初学者必看

    Web前端好学吗?这是很多web学习者常问的问题,想要学习一门自己从未接触过的领域,事先有些了解并知道要学的内容,对接下来的学习会有事半功倍的效果.在当下来说web前端开发工程师可谓是高福利.高薪水的 ...

  8. Java自学路线

    万事开头难,学习Java亦是如此.而在学习的开始,选择正确的学习路线更是尤为重要.在本文中我将分享本人自学转行路上的学习路线,希望能给想自学,却不知道方向的同学带来帮助~ 1 .JavaSE 基础 这 ...

  9. web前端入坑第五篇:秒懂Vuejs、Angular、React原理和前端发展历史

    秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知, ...

随机推荐

  1. 线性判别分析LDA原理总结

    在主成分分析(PCA)原理总结中,我们对降维算法PCA做了总结.这里我们就对另外一种经典的降维方法线性判别分析(Linear Discriminant Analysis, 以下简称LDA)做一个总结. ...

  2. 百度MIP移动页面加速——不只是CDN

    MIP是用CDN做加速的么?准确答案是:是,但不只是. MIP全称Mobile Instant Pages,移动网页加速器,是百度提出的页面加速解决方案.MIP从前端渲染和页面网络传输两方面进行优化, ...

  3. .Net Core MVC 网站开发(Ninesky) 2.3、项目架构调整-控制反转和依赖注入的使用

    再次调整项目架构是因为和群友dezhou的一次聊天,我原来的想法是项目尽量做简单点别搞太复杂了,仅使用了DbContext的注入,其他的也没有写接口耦合度很高.和dezhou聊过之后我仔细考虑了一下, ...

  4. Java 输出流中的flush方法

    转自:http://blog.csdn.net/jiyangsb/article/details/50984440 java中的IO流中的输出流一般都有flush这个操作,这个操作的作用是强制将缓存中 ...

  5. C#数组,List,Dictionary的相互转换

    本篇文章会向大家实例讲述以下内容: 将数组转换为List 将List转换为数组 将数组转换为Dictionary 将Dictionary 转换为数组 将List转换为Dictionary 将Dicti ...

  6. DataTable 转换成 Json的3种方法

    在web开发中,我们可能会有这样的需求,为了便于前台的JS的处理,我们需要将查询出的数据源格式比如:List<T>.DataTable转换为Json格式.特别在使用Extjs框架的时候,A ...

  7. 讓TQ2440也用上設備樹(1)

    作者:彭東林 郵箱:pengdonglin137@163.com QQ:405728433 開發板 TQ2440 + 64MB 內存 + 256MB Nand 軟件 Linux: Linux-4.9 ...

  8. spring boot 实战:我们的第一款开源软件

    在信息爆炸时代,如何避免持续性信息过剩,使自己变得专注而不是被纷繁的信息所累?每天会看到各种各样的新闻,各种新潮的技术层出不穷,如何筛选出自己所关心的? 各位看官会想,我们是来看开源软件的,你给我扯什 ...

  9. Java实现Excel中的NORMSDIST函数和NORMSINV函数

    由于工作中需要将Excel中的此两种函数转换成java函数,从而计算内部评级的资本占用率和资本占用金额.经过多方查阅资料和整理,总结出如下两个转换方法 标准正态分布累计函数NORMSDIST: pub ...

  10. Win10提示没有权限使用网络资源问题解决

    借鉴链接:http://www.cr173.com/html/67361_1.html Win10提示没有权限使用网络资源解决方法 1.打开控制面板; 2.在所有控制面板项中找到凭据管理器; 3.添加 ...