专栏首页京程一灯三十天写三十个网站后,我学到的东西[每日前端夜话0x3C]

三十天写三十个网站后,我学到的东西[每日前端夜话0x3C]

每日前端夜话0x3C

每日前端夜话,陪你聊前端。

每天晚上18:00准时推送。

正文共:3602 字 1 图

预计阅读时间: 10 分钟

三十天写三十个网站的挑战来自JavaScript30【https://javascript30.com/】,连续三十天每天用原生的 JavaScript 写一个小网站或是一个特定主题的练习。*

上个学期用 JavaScript 写了一些好玩的网站,但开始用 React 或其他框架的时候,总觉得有点不踏实,应该要对原生的 JavaScript(或称 Vanilla JS【http://vanilla-js.com/】)下更多功夫才行。而也刚好看到 JS30 这个挑战,就决定回过头来练习用纯粹的 JS 写网页,顺便学习别人的代码。

这三十天的每个网站都有提供视频教学,关于视频的学习笔记我都放在 Github【https://github.com/HcwXd/JavaScript30】 上,欢迎在上面跟我交流。

以下分享三个自己在这三十天的想法。

1、学习“不知道自己不知道”的东西

JS30 的挑战是每天都会实现一个网站的功能,而这些功能很多都是在开始挑战前,从来都没有想过可以用纯 JS 实现的。

这样的学习体验跟一般线上学习”为了实现某个功能才去查要如何实现“很不一样,因为你不知道自己不知道这种功能是可以简单的用 JS 完成。换句话说,这些功能我们一般是不会主动去学的,而这些功能又可以分为两种:

没有尝试过的领域

没有尝试过的领域如:电脑的 Webcam 摄像头、网页原生的语音识别、 网页原生的地图定位等等。

这些领域的网页功能在没有做相关的项目时,通常比较难碰到。但透过别人指定给你功能的挑战,才会去研究发现这些功能原来都可以用原生的 JS 实现。

举例来说,想到地理定位也许很多人跟我一样,直觉就想到也许可以用 Google Map 的Api,但其实 JavaScript 可以简单使用一行代码:

1navigator.geolocation.watchPosition();

就能取得地理定位,再搭配简单的判断就可以显示使用者移动的速度跟方位等。甚至还可以透过Xcode 内建的 Simulator,模拟使用者的各种运动方式,如:跑步、骑单车等,以方便Debug。

Nice-to-have 的功能

Nice-to-have 的功能则是一些非必要的,但能够发现可以额外附加的功能。虽然这些功能大部分炫酷成分居多,但用的好也许也能优化用户体验。

这些 Nice-to-have 的功能如搜索框的 Autocomplete、实现定制化的视频播放器、帮 Webcam 影像做色彩处理、在网页里埋彩蛋等。

而其中有一个自己还很喜欢的例子是实现 Stripe 【https://stripe.com/】官网上那个别出心裁的导航条。当然一般的导航条可以很简单用像网页书签资料夹的方式实现(鼠标移到资料夹上就把里面的网页书签吐出来),但用 Stripe 这样让导航条内容像是随着鼠标移动的方式显然是酷多了。

2、多看别人的代码

网页的功能通常都有不只一种实现的方式,而同一种实现的方式也可以用不同写法的代码完成。

举例来说:假设我们要在一个自制的视频播放器内提供一些参数让用户调整视频设定,例如在这个播放器中【https://hcwxd.github.io/JavaScript30/11%20-%20Custom%20Video%20Player/index.html】可以让使用者调整视频音量跟播放速度这两个参数。

要运用这两个参数去调整视频,直觉上当然可以直接实现两个 function 去分别处理 input 的变化。但这样其实让代码有部分重复又减少 function 复用的能力。

此时,如果我们在 input 的HTML 标签上把 name 属性好好对应到视频的 property 时,一个 function 就可以处理所有 input 的变化了。我们的HTML 写成:

1<input type="range" name="volume" class="player__slider"> 
2<input type="range" name="playbackRate" class="player__slider">

而 JS 监听每个input 的事件就只要一个function 处理即可:

1function handleRangeUpdate() { 
2    video[this.name] = this.value; 
3}

在举另外一个简单的例子,同样的“在判断语句后执行一个 function 的逻辑” 可以用简单的 if statement 写,但也可以用更简洁但可能会降低一些可读性的方式,如:

1isTrue && doSomething();

在实现三十个网站的过程中,可以发现有很多功能的写法跟自己原本想的不一样。虽然都可以达到目的,但多看别人的代码一方面可以比较不同写法在效率或是可读性上的差别,另一方面也可以学习别人的逻辑,方便训练自己在 trace 别人代码时能够更快适应。

3、找到自己舒服和不舒服的学习方式

先找自己舒服的学习方式

不管学习什么,找到属于自己的学习方式都是很重要的事情,而且自己的同一套学习方式也不一定适合每一个要学习的东西。所以在刚接触一个课程时,我觉得先从自己容易上手的内容开始是比较适合的。

举例来说,我刚开始在进行挑战的前几天,完成每天学习的方式通常是用 2 倍速看完视频,然后打开 VS code,把网站的功能一个个实现出来。如果有不熟的地方再回去看视频或 Google,最后把学到的东西纪录下来。

对我来说,这样的步骤就是舒服的学习方式,但很显然这样学花很多的时间,且遇到不熟再回去看视频的学习效果没那么好(毕竟平常写代码时也不会用这样的方式开发)。

强迫自己不舒服一点学习

所以找到自己舒服的学习方式后,下一步就是去找自己没那么舒服,但可以学得更快或更好的方法。而对我来说,用 2 倍速看完视频并不是那么不舒服,也跟自己平常喜欢边听课边记笔记的习惯不太一样。

所以我认为对自己比较好的方式反而是用1.5 倍速看视频,然后边看边把学习的笔记写完。看完视频就可以把网页关掉。接下来完全依靠自己的脑袋跟笔记,把网页写完。

因为 2 倍速实在手速跟不上(太不舒服有反效果),所以退而求其次让视频放慢一点,但强迫自己“有点不舒服地”边看视频边把笔记做完,这样不仅可以强迫自己完全专心看视频,也比较符合自己平常要写代码时,遇到学过但不熟东西时先查自己的笔记再上网查的习惯。

4、小结

以上就是关于这三十天挑战的一些想法,我觉得这个挑战下来最大的成长是:能够有自信可以用纯粹的 JavaScript 就快速实现出各种在别的网站上看到的各种功能。

但值得注意的是,在课程中其实对于底层 JS 的涉及不多(Closure、Prototype等),大多是对于写网页的功能还有 DOM、Window 的运用。

5、无用的题外话

在课程中了学到定制视频播放器的概念,最近在看其他课程时也刚好想到可以用来操作别的网页中的视频。例如大部分线上课程的视频播放速度上线通常都设在2 倍,但有时候课程的速度实在是太慢的时候,可以通过 dev tool 去调整视频速度。

叫出Chrome dev tool 中console 的方法为:

1对网页按右键> 检查> 点选console

接下来在console 中贴上这段代码搭配你想要的速度就可以突破限制了!

1document.querySelector('video').playbackRate = 数字倍数;

例如:三倍速

1document.querySelector('video').playbackRate = 3;

但如果网页中的视频不只一个,可能就要先知道视频的 class name 才能做选取啰,祝学习愉快!

原文链接:https://medium.com/unorthodox-paranoid/takeaways-from-js30-challenge-b571c8db862

本文分享自微信公众号 - 京程一灯(jingchengyideng),作者:京程一灯

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 29个前端工程师和设计师必备的Chrome插件

    Google Chrome是最好用的几个浏览器之一,自从2011年11月份赶超Firefox之后,已成为当今互联网的主流浏览器。今天,我来分享下自己收集的一系列...

    疯狂的技术宅
  • Mozilla发布WebVR创建工具

    很高兴地向大家介绍我们通过Mozilla发布的最新工具Unity WebVR Assets。 目前已经可以在Unity资源商店中免费下载并使用了。 该工具允许创...

    疯狂的技术宅
  • Facebook的DevOps案例研究与相关工具[每日前端夜话0x6E]

    了解什么是 DevOps 的关键在于搞清楚 DevOps 的意图,即创建高质量的软件,同时在团队之间进行更快速、更可靠的沟通和协作。至于团队,我们可以参考这两个...

    疯狂的技术宅
  • HTML-head标签学习

    葆宁
  • 论号召大家宅家抗疫功效,Pornhub远大于R语言

    而且目前看来,中国疫情控制成果令人瞩目!不过这一点我是不敢居功的,虽然说大家的确宅家了,但是生信技能树B站的超50万学习量的免费视频教程合辑:https://s...

    生信技能树
  • 我们请来了2017 NIPS大会发文数全球前3的华人教授,讲解网络数据的表征学习(视频+PPT)

    大数据文摘
  • servlet实现文件下载功能

    第一步:首先在你的项目新建一个文件夹存放一些可以下载的文件(本教程一一张图片为例子) ? ---- 第二步:写servlet(DownloadServlet....

    Java学习
  • Servlet是如何实现MVC的?

    Servlet是一种服务器端的编程语言,是J2EE中比较关键的组成部分,Servlet技术的推出,扩展了Java语言在服务器端开发的功能,巩固了Java语言在服...

    MonroeCode
  • 深入浅出mongodb(一)

    在大数据的驱使下,我们要实现数据持久化存储,数据共享,数据集中管理数据库是不二之选,小编在这里要阐述的是 mongodb 数据库,mongodb[1]是一个基于...

    小丑同学
  • 2018 最新机器学习 API 推荐清单,快给 APP 加点智能

    本篇基于 2017 年的推荐清单做了一些改进——去除了一些不再进行维护的 API,并且更新了一些新的 API。主要覆盖如下方向:

    AI研习社

扫码关注云+社区

领取腾讯云代金券