javascript学习

tech2023-03-01  107

javascript学习

This article was peer reviewed by Mark Brown. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

本文由Mark Brown同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态!

Learning never stops — especially in web development. Our industry is constantly renewing and improving itself, and so should we! Unfortunately, keeping up can be exhausting, but it doesn’t have to be. In this article I will show you how small experiments can be a fun and effective way to learn new things, and to ensure that learning and keeping up-to-date stays fun.

学习永无止境-特别是在Web开发中。 我们的行业正在不断更新和完善自己,我们也应该如此! 不幸的是,跟上可能会很累,但并非必须如此。 在本文中,我将向您展示小型实验如何成为一种有趣且有效的学习新事物的方式,并确保学习和保持最新状态保持乐趣。

保持实验乐趣 (Keeping Experiments Fun)

Do you do side projects? If you do, I’m sure you did a project once that was a lot of fun at first, but quickly turned into a tangled mess. Getting bogged down in something isn’t a lot of fun and can really damage motivation for both side projects, as well as your job. Major causes of this are often scope creep or pressure, while you should be relaxing in your spare time. By enforcing some rules, we can make sure we don’t bump into unpleasant surprises:

你会做副业吗? 如果您这样做,我敢肯定您曾经做过一个项目,一开始很有趣,但很快就变成了混乱的局面。 陷入困境并不是一件有趣的事情,它确实会破坏双方项目以及工作的动力。 造成这种情况的主要原因通常是示波器蠕变或压力过大,而您应该在业余时间放松身心。 通过执行一些规则,我们可以确保我们不会遇到不愉快的意外:

Prepare your work. Make sure you know exactly how big an experiment is and what it encompasses. If it is too much, split it up into manageable chunks that each have a beginning and end, or pull the plug.

准备工作。 确保您确切知道实验的规模及其涵盖的范围。 如果太多,请将其拆分为可管理的块,每个块都有开头和结尾,或者拔掉插头。

Schedule tasks. Don’t stay up late every night. Just schedule an hour or two, once or twice a week.

安排任务。 不要每天晚上熬夜。 只需安排一两个小时,每周一次或两次即可。

No deadlines. Everyone, you included, needs to relax. Setting targets is okay, and missing them should be too.

没有截止日期。 包括您在内的每个人都需要放松。 设置目标是可以的,丢失目标也应该如此。

Allow yourself some fun time. Although you shouldn’t procrastinate, life is more than a bunch of checks on a to-do list. Take time to enjoy the fruits of your labors.

给自己一些有趣的时间。 尽管您不应该拖延,但生活不只是待办事项清单上的一堆检查。 花一些时间享受劳动成果。

Having small experiments doesn’t mean they can’t be part of something bigger. Take a data visualization project, for example. It can take up some time, but is easy to split up into smaller tasks:

进行小型实验并不意味着它们不能成为更大项目的一部分。 以数据可视化项目为例。 这可能会花费一些时间,但是很容易分解成较小的任务:

Setup a build workflow

设置构建工作流程

Find and obtain interesting data (here’s a cool list of APIs to get you inspired)

查找并获取有趣的数据(以下是一些很酷的API,可帮助您获得启发 )

Fetch and process data with Node.js, utilizing ES2015 features

利用ES2015功能通过Node.js提取和处理数据 Compare and choose a technology (canvas, WebGL, DOM/SVG) or library (d3.js, p5.js, THREE.js) to visualize the data

比较并选择一种技术(画布,WebGL,DOM / SVG)或库(d3.js,p5.js,THREE.js)以可视化数据 Visualize the data using your tool of choice

使用您选择的工具可视化数据

I use a Trello board to keep track of all my experiments. It’s where I list and plan them, and add relevant information until the time comes to start an experiment. For larger projects, I tend to create a new board specifically for that project and add cards for each task. Any alternative will suffice. Documenting things keeps the noise out of my head!

我使用Trello板来跟踪我的所有实验。 在这里,我列出并计划它们,并添加相关信息,直到开始进行实验为止。 对于较大的项目,我倾向于为该项目专门创建一个新板,并为每个任务添加卡片。 任何替代方案都足够。 记录下来的东西可以使我耳目一新!

审核实验 (Reviewing the Experiment)

Besides learning by actually doing new stuff, experiments are also a great opportunity to improve yourself. Look back at your experiment and ask yourself the following questions:

除了通过实际学习新知识来学习之外,实验还是提高自我的绝好机会。 回头看看您的实验,并问自己以下问题:

Could problems during execution have been avoided with better preparation? If yes, how?

是否可以通过更好的准备来避免执行过程中的问题? 如果是,怎么办? What was the quality of the executed work, and what can I do to improve?

所执行工作的质量如何?我该如何改进? Could I have prepared my experiment more effectively?

我可以更有效地准备实验吗?

Reviewing and improving what we do gives us experience — something which is very valuable in our industry. Communication and documenting is, too. Many experiment reviews make great blog posts.

回顾和改进我们的工作可以给我们带来经验-这在我们的行业中非常有价值。 沟通和文档编制也是如此。 许多实验评论都是很棒的博客文章。

Although not very JavaScript related, one particularly fun experiment of mine was creating Vector Graphics in Sass, where I converted a map of coordinates into a path and rasterized it into a single-pixel box-shadow. Not only did I learn Sass functionality I wasn’t too familiar with before, I also had to research some algorithms.

尽管与JavaScript无关,但我的一个特别有趣的实验是在Sass中创建Vector Graphics ,我在其中将坐标图转换为路径并将其栅格化为单像素的盒子阴影。 我不仅学习了以前不太熟悉的Sass功能,还不得不研究一些算法。

寻找灵感 (Finding Inspiration)

If you’re not sure what to learn next, it’s always good to have a few resources at hand for inspiration.

如果您不确定接下来要学什么,总是可以从中获得一些灵感的资源。

If you enjoy visuals and art, CodePen is a great place to start. The picks are often full of amazing pens worth pulling apart to see how they work. If you’re feeling more adventurous, try Dribbble or Behance.

如果您喜欢视觉和艺术, CodePen是一个不错的起点。 拨片通常充满了惊人的笔,值得一看,以了解它们的工作原理。 如果您喜欢冒险,请尝试Dribbble或Behance 。

SitePoint is powered by many authors from diverse backgrounds. Because of that, the JavaScript Channel is full of all kinds of JavaScript goodness.

SitePoint由来自不同背景的许多作者提供支持。 因此, JavaScript Channel充满了各种JavaScript优点。

运行环境 (Runtime Environments)

You probably already knew that JavaScript works in browsers, but did you know you can run JavaScript outside of browsers too?

您可能已经知道JavaScript可在浏览器中使用,但您是否知道也可以在浏览器之外运行JavaScript?

Node.js is by far the most popular non-browser JavaScript runtime. With it, you can write scripts, command-line interface or desktop applications and more. It runs on Windows, OS X and Linux.

到目前为止, Node.js是最流行的非浏览器JavaScript运行时。 使用它,您可以编写脚本,命令行界面或桌面应用程序等。 它可以在Windows,OS X和Linux上运行。

Electron allows you to build cross-platform desktop applications using good old HTML, CSS and JavaScript.

Electron允许您使用良好的旧HTML,CSS和JavaScript构建跨平台的桌面应用程序。

Cordova allows you to build mobile apps with HTML, CSS and JavaScript.

Cordova允许您使用HTML,CSS和JavaScript来构建移动应用程序。

React Native allows you to build mobile apps using the React framework.

React Native允许您使用React框架构建移动应用程序。

浏览器API (Browser APIs)

Over the past few years, many new APIs have been introduced to the browser allowing you to do all sorts of fun things.

在过去的几年中,浏览器引入了许多新的API,使您可以做各种有趣的事情。

Service Worker API is a large API that allows us to do various things, such as providing offline support.

Service Worker API是一个大型API,允许我们执行各种操作,例如提供离线支持 。

WebRTC is an API that allows us to create real-time connections with another computer and pass through audio and video data.

WebRTC是一种API,可让我们与另一台计算机建立实时连接并传递音频和视频数据。

Some APIs allows us to use device hardware, to do things like reading out sensors or making the device do things (such as vibrate).

一些API允许我们使用设备硬件,做一些事情,例如读出传感器或使设备做事(例如振动)。

The Ambient Light Sensor provides information about how bright the ambient light is, which we can use to adapt our site or app.

环境光传感器提供有关环境光的亮度的信息,我们可以使用它来适应我们的站点或应用程序。

Battery Status is rather self-explanatory; we can request the battery status. Heavier applications can use this to enable a power-saving mode.

电池状态相当不言自明; 我们可以请求电池状态。 较重的应用程序可以使用它来启用节能模式 。

Geolocation grants us information about the user’s location.

地理位置授予我们有关用户位置的信息。

We can utilize Network Information to serve smaller files to the client.

我们可以利用网络信息将较小的文件提供给客户端。

Notifications are quite useful for many applications, such as chat apps.

通知对于许多应用程序(例如聊天应用程序)非常有用。

Are you building a game which uses the mouse for input? Pointer Lock is your friend.

您是否正在构建使用鼠标进行输入的游戏? 指针锁是您的朋友。

Proximity lets you find out how close the user is to the device. Perhaps this could be used to detect hugs?

邻近可让您找出用户与设备的距离。 也许这可以用来检测拥抱?

Device Orientation allows us to detect when orientation changes.

设备方向允许我们检测方向何时更改。

Vibration allows us to vibrate a device, which is great for games.

振动使我们能够振动设备,这对游戏非常有用。

库和框架 (Libraries and Frameworks)

The purpose of most libraries to get things done easily, so it never hurts to have some experience using them. The more popular libraries and frameworks (such as Angular and React) can even be required for a job. An experiment or two can also be a great way to prepare yourself for an interview.

大多数库的目的是使事情轻松完成,因此拥有使用它们的经验永远不会受到损害。 甚至可能需要更流行的库和框架(例如Angular和React)来完成工作。 一两个实验也是准备面试的好方法。

Know that libraries and frameworks only last so long. Although they are helpful, you should be able to understand the problems they solve and be able to solve those problems without them.

知道库和框架只能持续这么长时间。 尽管它们很有帮助,但您应该能够理解它们所解决的问题,并且能够在没有它们的情况下解决这些问题。

建筑 (Architecture)

Angular is an MVC framework still used by many teams.

Angular是许多团队仍在使用的MVC框架。

React is a library used to render views.

React是用于渲染视图的库。

Polymer is a library to create Web Components.

Polymer是用于创建Web组件的库。

Lodash.js, Underscore.js and Ramda.js are all functional programming libraries. Some teams love to use them, but many don’t. Either way, a good understanding of functional programming is a much appreciated skill.

Lodash.js , Underscore.js和Ramda.js都是函数式编程库。 有些团队喜欢使用它们,但很多都不喜欢。 无论哪种方式,对函数式编程的深入理解都是一种很受赞赏的技能。

视觉效果 (Visual)

D3.js is a graphics and DOM manipulation library that works well if you want to render graphics with SVG or HTML.

D3.js是一个图形和DOM操作库,如果您要使用SVG或HTML渲染图形,则可以很好地工作。

p5.js is a library inspired by Processing (a flexible software sketchbook and a language for learning how to code within the context of the visual arts). It has a rich array of functions to draw shapes and do calculations.

p5.j​​s是受Processing (一种灵活的软件素描本和一种用于学习如何在视觉艺术环境中进行编码的语言)启发的库。 它具有丰富的功能,可以绘制形状和进行计算。

Three.js is a high-level 3D API to abstract away the difficult bits of WebGL.

Three.js是一种高级3D API,用于抽象化WebGL的困难之处。

物理世界 (The Physical World)

Personally, I get really excited when I can write software to do something in the physical world. If you do too, consider purchasing a set of any the following:

就个人而言,当我能够编写软件以在现实世界中做某事时,我会感到非常兴奋。 如果您也这样做,请考虑购买以下任何产品:

Raspberry Pi is a credit card-sized single-board computer, ideal for teaching or learning.

Raspberry Pi是信用卡大小的单板计算机,非常适合教学。

Arduino is similar to the Raspberry Pi, but is more focused on the electronics side of things.

Arduino与Raspberry Pi类似,但更侧重于电子方面。

LEGO® MINDSTORMS® is a mini-computer that can control LEGO hardware. What’s not to love?

LEGO®MINDSTORMS®是可以控制LEGO硬件的微型计算机。 不去爱的种种?

Johhny-Five is a JavaScript framework for robotics and Internet of Things and can be installed on Arduino or similar devices.

Johhny-Five是一个用于机器人技术和物联网JavaScript框架,可以安装在Arduino或类似设备上。

All of the above can be programmed with, or is capable of running JavaScript.

以上所有内容都可以使用JavaScript进行编程,或者可以运行JavaScript。

结论 (Conclusion)

Small experiments are a great hands-on approach to learn new things. Another benefit is that they can help you improve the way you work, something that is most valuable in our industry. By enforcing a few rules we can keep experiments fun, motivating yourself to learn more and become better.

小型实验是学习新事物的绝佳动手方法。 另一个好处是,它们可以帮助您改善工作方式,这在我们的行业中最有价值。 通过执行一些规则,我们可以使实验保持乐趣,激发自己学习更多知识并变得更好。

For those of you stuck in a rut, I hope this article has provided you with some motivation to start a new, fun experiment. For those of you unsure what to tackle next, I hope this article has provided you with some inspiration. Or maybe you have some great ideas for experiments? Or maybe I missed something out? Either way, I’d really love to hear from you in the comments below.

对于那些陷入困境的人们,我希望本文能为您提供一些动力,以启动一个新的有趣的实验。 对于那些不确定下一步该如何解决的人,希望本文为您提供了一些启发。 也许您对实验有一些好主意? 还是我错过了一些东西? 无论哪种方式,我都非常希望在下面的评论中收到您的来信。

翻译自: https://www.sitepoint.com/improve-javascript-learning-experiments/

javascript学习

最新回复(0)