前端自学路线之 JavaScript 篇

今天来聊聊前端工程师的核心技能之——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新增的标签倒是小菜一碟,像、、、

你也应该在这个阶段尝试移动端的页面,了解它与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

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

今天要说的就这么多了,这差不多也是我这几年的学习路线,基本和行业发展的进度吻合。但这也只是一条主线而已,前端领域的知识是网状的,这中间又会穿插各种大小知识,需要在学习的过程中点滴积累了。

文章转载自 开源中国社区[http://www.oschina.net]

时间: 2024-10-31 01:26:46

前端自学路线之 JavaScript 篇的相关文章

前端自学路线之JavaScript篇

今天来聊聊前端工程师的核心技能之--JavaScript.js这门语言看似简单,但要做到入门.熟练以至于架构的程度,还是有一段路要走的,今天就来聊聊这段路上都要经历些什么.准备好小板凳,开讲~ level 1 首先你要对js的基础知识进行系统的学习,脑海中先有一幅知识蓝图.我们现在说的js其实包含三部分:ECMAScript规范.DOM规范.BOM规范,你要知道这三部分都有哪些内容.其中ECMA规范定义了js作为一门编程语言的标准,包含变量基本类型.对象.函数.作用域.运算符.流程控制语句等.D

BAT及各大互联网公司2014前端笔试面试题--JavaScript篇_基础知识

而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 附上第二篇:BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 前面几题是会很基础,越下越有深度. 初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型:String,boolean,Number,Undefined, Null 引用数据类型:Object(Array,Da

BAT及各大互联网公司2014前端笔试面试题--JavaScript篇

很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习js更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 附上第二篇:BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 前面几题是会很基础,越下越有深度.    初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案.   2.JavaScript的数据类型

Web前端优化最佳实践之JavaScript篇

Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条.前端优化最佳实践,最重要的还是"实践",要理解这东西容易得很,关键是要去"实践",去"执行",去"反馈",去获取受益. 1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom) 当一个脚本在下载的时候,浏览器干不了其它的事儿(串行了).所以,把它扔到最后面去处理.对于一些功能性的脚本,可

JavaScript自学笔记(必看篇)_javascript技巧

0-判断变量.参数是否初始化 if(x){} //变量被初始化了或者变量不为空或者变量不为零 1-声明函数不需要声明返回值.参数类型,句尾甚至都不需要';' function sum(i1,i2){return i1+i2} 2-直接声明匿名函数立即使用 var f=function(i1,i2){return i1+i2;}; alert(f(1,2));//普通匿名函数 alert(function(i1,i2){return i1+i2;}(3,4));//直接声明,立即使用 3-js中没

前端代码标准最佳实践:javascript篇

前言 最近一直重构项目的前端代码,也参考了各种前端代码的最佳实践,目的是让前端的HTML,CSS,JavaScript代码更符合标准,有更好的性能,更好的可维护性,尝到了重构后的甜头,也萌生了写这个系列博客的念头.前端代码有其固有的灵活性,这就导致了目前前端代码非常混乱的局面,本系列文章希望能起到抛砖引玉的作用,让更多的人重视前端代码的质量,编写更标准的前端代码. 本系列文章共有三篇,分别讨论HTML,CSS,Javascript,本篇将讨论Javascript. 目前,Javascript已广

初学者应该了解的编程陷阱:javascript篇

对于初学编程语言的朋友来说,经常会犯一些比较"经典"的错误.在这一系列文章中,我们将介绍如何让初学编程的朋友避免一些基本的错误,并且了解如何正确的编程和开发代码. 这一篇文章中,我们介绍5个javascript代码开发中需要注意的问题和技巧. 冗余的DOM操作 DOM操作众所周知是比较重量级的.有效的限制交互可以大大的帮助你提高你的代码的性能.看看下面这段代码: // anti-pattern for (var i = 0; i < 100; i++){ var li = $(&

j2ee-新人跪求指导Java自学路线

问题描述 新人跪求指导Java自学路线 我现在自学完了Javase,oracle 想问一下个为大神是否可以跳过javaweb的学习直接学习j2ee?

做一名合格的前端开发工程师(12篇)——第一篇 Javascript加载执行问题探索

  楼主做前端开发一年多了,对前端的见解还是多多少少有一点的,今天特拿出来跟大家分享分享.   做前端开发少不了各种利器.比如我习惯用的还是Google浏览器和重型武器Fiddller.   一: 原始情况 首先大家看看如下的代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default&