首页 web前端 js教程 JavaScript高效学习之路总结篇

JavaScript高效学习之路总结篇

Aug 04, 2017 pm 01:31 PM
javascript js 总结

1.首先我会把Chrome浏览器装好,在dev tools => console里直接练习熟悉基本语法,变量,数据类型,数学运算,字符串运算,条件,循环基本结构,简单函数定义和调用这些,之所以用chrome dev tools,是因为这时候我不想费劲折腾单独的编辑器,也不需要在开文件和文件夹,然后去配一些工具最终才接触到真正的JS编程,我想尽可能直接而少干扰就开始写JS,这是最重要的,我学JS,当然应该尽快写JS

2.熟悉了基本语法以后,我会在devtools => console 里编几个稍微有挑战点的小程序,比如实现fibonaci 数列这种简单的,比如打印一个99乘法表,你也可以自己给自己出几个题,或者网上随机找感兴趣的题目,别人写过没写过不是重点,重点是找点事情做,让自己写代码,别小看这些看起来无聊的程序,在你的熟练度达到可以开始第一个项目之前,这些没有的小程序是最适合练手的,因为它们不牵涉其他方面的知识(比如DOM),所以你不会受到过多干扰,只需要关注用正确的语法写出正确的程序,这个过程会让你更熟悉JS语言本身。

3.我觉得差不多的时候,就可以学习用JS来做web开发了,但是别急,这时候还没准备好新建一个项目,所以我还是会在devtools里,但是侧重是熟悉DOM,我会从简单的window.alert, window.prompt 开始,慢慢地去试验DOM的API如何使用,我会买一本DOM编程的书,放在案头,一章一章往下看,边看边试,慢慢地接触到DOM的常用操作,比如document.getElementById, document.getElementsByClassName, addEventListner, 等等,这些调用里有很重要的概念,比如什么是ID,什么是Class,什么是Event,它们有什么用,JS语言是如何通过API和它们交互的。我会选几个网站的页面,随便对页面的元素进行一些修改,比如用JS改变元素的字体,背景色,或者临时增加事件侦听等等。DOM API的行为产生的效果你能在网页上直接看出来,很直观,也比较有趣,比之前写纯JS程序这些更生动,能激发学习的好奇心,并且DOM是JS程序员的核心知识。

4.通常看完一本DOM编程的书以后,大概地了解了JS在web编程中的用处了。这时候我会给自己选一个项目,比如留言版这种,以HTML5 Boilerplate为模板,开始第一个web前端项目的开发。数据的存储可以直接存放在IndexDB里,所以这时候不需要关心后台操作。我会大概的考虑好要做什么功能,然后用之前学到的JS和DOM操作的知识,好好地实现这些功能。这个项目会花去我大量的时间,所以我告诉自己要保持耐心。碰到问题我就去用搜索引擎找答案,或者去书里找到相应的章节。

5.写完第一个项目以后,我会第一次觉得很有成就感,虽然项目很小,也不复杂。我会找一个老师帮我review一下,听听他的意见和建议,也可以准备一些问题,让他帮忙看接下去可以怎么迭代。这时候我会去学习git的基本操作,github的基本使用,然后把项目push上去,把需要的改动commit进git。

6.在这之前我写的都是原生JS,没有用到库,没有用到框架,这样的好处是我不需要过早地去纠结库和框架本身的概念,因为现在真正重要的是JS语言本身,其实我的编程领域比起最开始已经有了很大的拓展,你看我已经用JS,配合DOM,写出来一些很实际的功能,完成了一个前端项目。

7.这时候我的选择比较多,我可以:继续用原生JS完成一两个类似的项目,比如注册登陆,动态图片展示等等;也可以:尝试改进当前项目的程序设计,做一些代码的改进,这时候可以去看看JS模式这样的书,因为第一个项目的代码结构通常没有特别的程序设计,却章法,这样的书能告诉你更好的JS程序可以如何;我还可以乘势把手上的项目重构成基于jQuery的代码,这样就在对比中学会了jQuery的基础,理解了jQuery的好处;我甚至可以把当前项目代码重构成ES6语法,这样就能在对比中ES6语法的好处。

8.接下来我就会去写更复杂的项目,比如TODOLIST,自己从头到尾实现一个这样的应用,同样以原生JS(ES5)写第一个版本,然后选择是否重构到jQuery或者ES6,如果有兴趣,甚至是TypeScript。继续看JS程序设计方面的书,注意力应该是在程序“设计”,而不是语法细节,大多数时候语法的问题都是可以搜索到的。程序“设计”是分析应用的需求,什么功能,是否需要分模块,模块好不好分,不好分怎么渐进地找出架构的方案,什么样的模块化是比较自然的,如何处理错误,是否需要模板支持,复杂的用例是自己实现还是找第三方的库来集成,等等这些和实际开发零距离的问题。

9.这个项目我还是会放进github,写完以后我就找一个老师(免费付费都没关系),review一下我的实现,让他指出我理解错误的地方,这是宝贵的学习机会。和第一个项目一样,我还是会根据老师的反馈和自己的思考,决定是否继续迭代,以及如何继续改善。到这个时候,我也许会把市面上所有的Javascript的必读书都买来看,看第一书很慢,第二本书不快,但看到第四五本书的时候,就可以很快了,挑选其中自己不了解的章节专门阅读,然后把书里提到的知识,技巧,实践用到之前写过的项目中去。

10我现在已经有了JS(ES5)比较全面的基础,也比较熟练了,至少碰到问题我大概知道方向是什么。我也接触了jQuery,甚至可能已经比较熟悉;ES6也是。我对语言的基本生态有了比较全面而深刻的映像。现在我想来学一个框架,我会去做一点功课,看看自己喜欢哪个框架,选定了以后,我就先做完官方的tutorial,同时清楚一些基本的概念问题。

11.然后我做的,就是把之前的项目(如TODOLIST),用框架重新写一遍,这时候我不会再有觉得很深涩的地方了,因为我有了JS的基础,已经有了一些自己找答案,debug的经验,哪怕框架本身有不清楚的地方,我都能自己通过搜索,或者研究,把答案找出来。哪怕找不出来,也至少有了基本的开发思维,虽然不知道答案,但也有大概的方向,如果我要问别人问题,也能问出更有回答价值的问题来,我已经走上了专业开发的路,不是因为我知道框架的这和那,而是我有了做开发的基本习惯和素养。

12.也许这时候我找到了第一份前端的工作,一段时间以后我发现自己对node后台开发和electron产生了兴趣,我阅读了基本的文档以后,发现其实并不需要怎么学习就可以用这些东西了。因为JS程序的架构,常见结构,模式,主要概念,我已经熟稔于胸,所以只要是在JS这个生态内,不管新出了什么技术,无论是库,框架还是模式,我都能在第一时间找到理解他们的路径,我已经学会了怎么学习,那些东西在JS程序里是重要的,概念是如何组合的,变迁的,所以对我来说,学JS和用JS已经没有什么区别了。

13.然后呢,通常真正循序渐进学过来,语言基础扎实的,到这时候已经不需要人来教了。

我认为有一些观念和操作是和循序渐进相悖的。

1.过早追求“系统”学习,好高骛远,眼高很容易手低,人的精力是有限的,要尊重学习规律,承认自己是普通人,告诫自己不要取巧,不要贪婪,慢慢来

2.觉得读源码是最“本质”的学习,结果是掉进细节的深坑不能自拔

3.过早埋头进“最新”技术,比如框架,在没有良好的语言基础之前学,事倍功半,”最新“技术和核心技术很多时候不是一回事,有了基础和核心,学新技术才是最有效率的,反过来却不成立

4.把编程学习等同于看书积累“知识”,但编程最终是一种技能,不动手什么也学不会,“知道”什么和“会”什么是两回事

5.具体的东西不学,却一开始就试图找到“最佳”学习路径,可能是最大的浪费了,有意义的目标是告诉自己明天干什么,而不是假设自己明天“应该”学会什么

6.过分堆砌学习资料,以为找到的资料越多,罗列越完整,自己学得越快越好,事实恰恰相反,越是罗列,噪声越大,心理压力和挫败感越强,越容易放弃,在一个阶段,一本书,配合少量网络资料足够了,”收藏“是一个不怎么好的习惯,学习的人应该追求知识的消化,而不是堆砌

以上是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绘制蜡烛图将为投资者提供更多直观的信息,帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

总结Linux系统中system()函数的用法 总结Linux系统中system()函数的用法 Feb 23, 2024 pm 06:45 PM

Linux下system()函数的总结在Linux系统中,system()函数是一个非常常用的函数,它可以用于执行命令行命令。本文将对system()函数进行详细的介绍,并提供一些具体的代码示例。一、system()函数的基本用法system()函数的声明如下:intsystem(constchar*command);其中,command参数是一个字符

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

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

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

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

PHP与JS开发技巧:掌握绘制股票蜡烛图的方法 PHP与JS开发技巧:掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展,股票投资已经成为了越来越多人的选择。而在股票交易中,蜡烛图是一种常用的技术分析方法,它能够显示股票价格的变化趋势,帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧,带领读者了解如何绘制股票蜡烛图,并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前,我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

See all articles