首页 web前端 js教程 学习JavaScript的经验之路

学习JavaScript的经验之路

Aug 04, 2017 pm 01:19 PM
javascript js

这篇文章主要介绍了如何学JavaScript?前辈的经验之谈,也就是怎么学前端的问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

鉴于时不时,有同学私信问我怎么学前端的问题。
这里统一回复一下,如下次再遇到问我此问题同学,就直接把本文链接地址发给你了。

首先说句题外话。关于有人管我叫大神的事情。
个人感觉这跟你买东西时,人家管你叫帅哥一样,你答应与否都无妨。

正题开始,前端怎么学,应该因人而异,别人的方法未必适合自己。
就说说我的学习方法吧。
我把大部分时间放在学习js上了。因为这个js的学习曲线,先平后陡。
项目实践和练习啥的,我不说了,主要说下工作之外的时间利用问题。
我是怎么学的呢,看书,分析源码。
个人这几天统计了一下,前端书籍目前看了50多本吧。大部分都是js的。市面上的书基本,差不多都看过。

第一个问题是,看书有啥好处?
好处应该是不言而明的,书看多了,基础会逐渐夯实起来。
看多了,自己的判断力,自然就上来了。
看别人的文章,就能很快判断出,对方每块儿讲得对不对,哪块儿又是自己不清楚的,模棱两可的。
当然也为看源码,分析源码提供了基础。

10本书读2遍的好处,应该大于一本书读20遍。
10本书的交集,那就是基础知识的核心,而并集那就是所有的知识。
好书当然要多读,反复读。但是只读一本是不行的。
因为每本书的侧重点都不一样。从不同的侧面,去理解一个知识点,是很有意义的。
所以特别佩服印度人,他跟你讲英文,你一个词语没听懂,他会蹦出n个同一意思的单词,你听懂一个,就ok了。
看书也是这样的,某一块讲得不透彻,不用担心,其他书籍可以帮助你来了解。

第二个问题是,书籍推荐。
个人觉得不错的,没事可以翻翻的。书籍如下:

>《javascript面向对象编程指南》,风格轻松易懂,比较适合初学者,原型那块儿讲得透彻,12种继承方式呢。

>《js权威指南》、《js高级程序设计》,这两本书经典是经典,但是太厚,适合把其中任意一章都当成一本书来读。洋洋洒洒,很难一口气看完。比较适合当做参考书。

>《你不知道的javascript》狙击js核心细节,闭包、原型、this讲得都还清楚。目前《中册》也出了,还在看。

>《js设计模式与开发实践》js设计模式也是要学的,此书把js的设计模式讲得非常清晰,一点不晦涩,看起来没多少难度。

>《正则指引》,分析源码时,如果正则表达式不懂,没法进行下去的。此书相对来说讲得比较清晰。

>《基于MVC的JavaScript Web富应用开发》,看完后,基本能写出自己的mvc框架了。是本好书。

>《javascript函数式编程》,js是一门函数式语言,此书是函数式编程一个入门,函数是一等公民那是非常重要的。

>《js忍者秘籍》,jq作者写的,没有传说中的那么难读,话说就算你看完并理解所有知识点,也不会达到世界高手级别的。因为你还没有做到随心所欲。

>《javascript框架设计》,如果初看此书,会觉得此书有罗列代码之嫌。在我看来,此书讲究的是框架的全局观。

以上书籍是我认为是成就高手之路上必须看的,也需要反复看。

css相关的书籍,说实话我看得比较少,总共有六七本吧。有两本必须推荐一下:

>《css权威指南》,css基础知识点那是讲得非常清楚的。什么层叠优先级、line-height啥的。不是随便一本书都敢叫“权威指南”的。

>《css揭秘》此书我也是不断的看,此书才不屑于全面讲css3各属性呢。css规范文档能讲的,它只会讲你最不在意的。此书解决的47问题,解决思路和解决方案同等重要,很有启发性。以上各书你都可以不买,至少买本此书吧。

第三个问题,怎么看。

想必很多同学,都想看书,但是很难看下去。
文字部分相对来说还能看看,一遇到代码,头皮就发麻了。
此问题一开始时我也遇到的。

说一个学习理论。
比如说学英语,有个开水理论。
词汇量必须达到6000才行,如果没达到,英文水平不会上去的,
这跟烧开水一样,没事烧烧,放着凉凉,从来没烧到100度,那么此水是永远不能喝的。
一旦煮沸过,就可以随时喝了。

20本书你看不下去,说明什么呢?

任何一本书,你都没看完过。熟悉的,永远只是前三章。别笑,我原先也是这样的。
那么现在的问题是,怎么把一本书看完呢?
很简单,敲。
《基于MVC的JavaScript Web富应用开发》这本书我看时,就是这样,终于有一天,我下定决心要把此书从头到尾敲一遍。
文字加代码都敲,然后就一章一章得看完了。代码敲一遍后,你会发现,没之前看起来的那么难。
如果你属于一看书就犯困那种同学。强烈建议你把《javascript面向对象编程指南》此书从头到尾敲一遍。
坚持看完一本书后,信心就上来了。先保证看完一本再说。看完3本后,基本应该能做到几天就能看一本了。万事开头难,加油吧。

第四个问题,看书的层次问题。

书看完后,要自己总结,要与其他书籍对比看。有同学同时对比着看《权威指南》和《高设》来的。
随便拿出个知识点,你都能闭着眼睛说得头头是道,说明水平够了。

下一块就是源码的学习了。
看框架源码之前,想说一件事情:dom的api不懂,没问题,你可以百度。但是正则一定要先研究研究。
不然大多数人去尝试分析源码时,遇到的挫折都在于此。

怎么去阅读源码呢?

敲,照着敲。

有哪些代码值得去敲呢?
优秀框架或者库的源码都值得你去敲。
但是拿jq来敲,来入门,那不行的。原因:太他么长了。八九千行呢!!

个人觉得underscore.js库是不错的第一个选择。原因都是工具方法,敲完以后自己的水平应该略有小成吧。
其实有一些api的实现,你要把它当成getElementById一样,深深的印在脑海里。比如extend方法,必须张口就来。
敲完underscore库后,可以考虑去看看《javascript函数式编程》这本书了。

jq的源码不好敲。那么zepto的源码比较少1800多行,敲一天应该敲完了。
敲几遍后,把所有不懂的地方,都百度清楚,然后就可以写自己的类jq的库了。
然后就可以作为一项技能写进自己的简历里。比如“创建过自己的jquery库”。
当然敲的过程,还能帮助自己对jq的api认识。

然后是backbone.js,因为此框架是以类jq和underscore为基础的mvc框架。代码也没多少行。敲吧。
spine.js与backbone类似。可以在敲其之前,先看看那本《基于MVC的JavaScript Web富应用开发》。
希望你的简历可以添加这么一笔,“创建过自己的mvc框架”。

其他的,我也敲过一些。包括jq.validate.js,包括一些插件。
如果你愿意的话,bootstrap你可以去敲敲啊。源码挺多的,可以按插件逐个来敲。
分析明白了,轮播、分页、下拉框等等的插件那还不是分分钟随手就写一个了。
最起码看看人家api接口是怎么设计的也是极好的。话说个人在阅读其css代码中,也学到了不少东西。
说到插件,有两个必须提提,一个是表格插件,一个是树。都敲完,简历里可以这么写上,“创建过自己的UI框架”。

当然了,你也可以敲你喜欢的框架代码,重要的是明白其实现原理,最好理解其为啥那么设计,如果对设计模式比较熟悉的话,会经常发现原来是这么回事。。。
照着敲只是分析源码的入门,用途也是为了学习,最后能用在自己的项目中,那是才是正道。
就算没啥用,也是打发时间的好方式,比看电视剧强多了。我闲着无聊时,就背着敲underscore源码。

最后说句,如果你简历上能如期写上那几句话后,必须是大神。加油吧。

后记:写本文的最初目的,正如文章开头说的那样,方便自己回复大家的提问。
本站的任何一篇分享学习经验的文章,基本都会引起共鸣,这确实是一个值得讨论的话题。
这里再说说几个事情。

以上是学习JavaScript的经验之路的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何使用WebSocket和JavaScript实现在线语音识别系统 如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言:随着科技的不断发展,语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统,具备了低延迟、实时性和跨平台的特点,成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

推荐:优秀JS开源人脸检测识别项目 推荐:优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属,在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别,大大缩短了用户等待时间,提高了用户体验;弱势是:受到模型大小限制,其中准确率也有限。如何在web端使用js实现人脸检测呢?为了实现Web端人脸识别,需要熟悉相关的编程语言和技术,如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是,由于Web端的计

WebSocket与JavaScript:实现实时监控系统的关键技术 WebSocket与JavaScript:实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript:实现实时监控系统的关键技术引言:随着互联网技术的快速发展,实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用,并给出代码示例,详细解释其实现原理。一、WebSocket技

股票分析必备工具:学习PHP和JS绘制蜡烛图的步骤 股票分析必备工具:学习PHP和JS绘制蜡烛图的步骤 Dec 17, 2023 pm 06:55 PM

股票分析必备工具:学习PHP和JS绘制蜡烛图的步骤,需要具体代码示例随着互联网和科技的快速发展,股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环,其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息,帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

如何利用JavaScript和WebSocket实现实时在线点餐系统 如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍:随着互联网的普及和技术的进步,越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统,我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议,可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中,当用户选择菜品并下单

如何使用WebSocket和JavaScript实现在线预约系统 如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代,越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统,并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

JavaScript和WebSocket:打造高效的实时天气预报系统 JavaScript和WebSocket:打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket:打造高效的实时天气预报系统引言:如今,天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展,我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中,我们将学习如何使用JavaScript和WebSocket技术,来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

See all articles