您不知道JavaScript可以做的10件事

作者: Randy Alexander
创建日期: 2 四月 2021
更新日期: 14 可能 2024
Anonim
【前端速成】JavaScript JS 快速入門|Tiktok工程師帶你入門前端|布魯斯前端
视频: 【前端速成】JavaScript JS 快速入門|Tiktok工程師帶你入門前端|布魯斯前端

内容

自1995年诞生以来,JavaScript已经走了很长一段路。毫无疑问,这是一条艰难的路,充满了误解,误用和无知。但是时代已经改变,自最近五年以来,JavaScript越来越受到关注。随着更多的关注,实际上更多的开发人员正在使用JavaScript,将其用于许多不同的目的并享受其美感。如果您问我,经典的“丑小鸭”故事。

在下面的文章中,我们将发现10个JavaScript的用例,它们与您习惯的“浏览器”中的用例不同。

01.是时候进行视频群聊了

您还记得80年代类似Facetime的视频通信的愿景吗?

由于几乎所有可用的宽带互联网以及大量使用名为Skype的小软件,仅花了20年时间,它才成为主流。

借助Adobe Flash的功能以及Google尝试建立社交网络的能力,我们已经在浏览器中具有视频通信功能。如果不使用Flash等第三方插件,拥有这些功能就不会很酷吗?


幸运的是,浏览器供应商也是如此,并在其软件中实现了“ getUserMedia” API。这是第一步,可以直接从浏览器访问相机或麦克风等设备。

通过将Node.js用作此类应用程序背后的服务器,可以非常轻松地将视频信号通过空中传输到一个或多个客户端。不幸的是,在撰写本文时,只有Chrome和Opera支持该API,但其他将很快赶上。

双向通讯的更清洁方法目前仅适用于Chrome,称为WebRTC。由于使用WebRTC,使客户端能够打开对等通信通道,从而直接将客户端与客户端连接。

为了娱乐起见,请查看Sindre Sorhus的Photo Booth实现(以121个字节为单位)!

var video = document.getElementsByTagName(’video’)[0],
navigator.getUserMedia('video',successCallback,errorCallback);

函数successCallback(stream){
video.src =流;
}

函数errorCallback(error){
console.log(错误);
}


02. $('light')。fadeIn();

Arduino微控制器平台是“开箱即用” JavaScript用例的A级示例。对于那些不熟悉Arduino平台的人,以下是其网站上的一个超有名的报价:

“ Arduino是一个基于灵活,易于使用的硬件和软件的开源电子原型平台,适用于艺术家,设计师,业余爱好者以及对创建交互式对象或环境感兴趣的任何人。”

Arduino本身仅支持用C编写的代码,这仍然没什么大不了的。使用几行C(除了其他人为您完成的工作),Arduino可以通过串行端口协议通过其USB端口接收命令。

但是如何通过JavaScript访问串行端口呢?显然不是来自浏览器。
Node.js可以解救!


由于社区倡导者Chris Williams的努力,我们有了Node串行端口库,我们可以在其中通过旧的SP协议发送数据。这是最初的突破,基于其他人的库,他们为Arduino的功能提出了一种更抽象的方法。例如,node-arduino和duino库。

到目前为止,用于JS驱动的Arduino编程的代码块中最热门,最酷的库是jonny-five。请访问Bocoup的博客,了解他们使用Arduino平台和大量插件所做的一些热门事情。另外,来自Nicolai Onken和JörnZaefferer的JSConf视频可能会带给您一些如今很少用的代码的可能。

03.您的双手专为浏览器而设计

《少数群体报告》的未来愿景(即人们可以用手而不是难看的汽车来控制计算机的愿景)每天都越来越近。朝这个方向迈出的一大步是微软减少了控制器的尝试,Kinect。您可能会想到惊人的游戏玩法,但这与JavaScript有什么关系呢?

在Microsoft的Kinect SDK版本中,许多人跨过浏览器使用Kinect的桥梁。首先,ChildNodes的家伙们已经建立了完整的kinect.js库,可以在您的浏览器中使用Microsoft的Kinect。

我强烈建议您查看他们的演示和视频,这是一个爆炸。但是,kinect.js库的一个主要缺点是,客户端背后必须运行一个WebSocket服务器程序(实际上是Kinect-> C#-> JS胶水)。

麻省理工学院的一些学生正在研究一种名为DepthJS的解决方案,以拆除这堵墙,
一个内置浏览器插件,使Kinect可以在Chrome和Safari上使用,甚至适用于未针对任何形式的基于Kinect的使用进行了优化的网站。 DepthJS目前处于早期开发阶段,但绝对值得跟踪。

04.用游戏手柄控制3D游戏

您是否曾经尝试过玩非Flash浏览器游戏?图形功能非常出色,尤其是当您看到类似Quake的游戏副本时。

但是,在播放这些内容时,您始终会与键盘和(通常是)笨拙的鼠标联系在一起。这是一个主要的缺点,特别是对于动作游戏,它实际上使它们无法从浏览器中获取。

如果您可以将Xbox控制器插入PC并开始玩自己喜欢的浏览器游戏,那不是很酷吗?跟Gamepad API打招呼吧,这不再是未来的愿景!

如果您的桌子周围有一个游戏手柄,请立即将其插入并享受一些已经使用Gamepad API的游戏。对输入控件进行编程也很轻松,请查看以下代码片段甚至更好的方法,自己运行:

div id =“ gamepads”> / div>
脚本>
函数gamepadConnected(event){
var gamepads = document.getElementById(“ gamepads”),
gamepadId = event.gamepad.id;

gamepads.innerHTML + =“已连接游戏板(id =” + gamepadId +“)”;
}

window.addEventListener(“ MozGamepadConnected”,gamepadConnected,false);
/脚本>

如果您想进一步了解浏览器的3D功能,请查看Three.js和Jens Arps在其之上构建的开源3D仿真器引擎Ascent。马克·哈米尔(Mark Hammil)要当心,我们可能需要您另外一部《翼司令》续集!

05.在iPad上运行Flash

作为开放标准爱好者和苹果迷,我不得不承认,我真的要感谢苹果没有将Flash应用于iPad和iPod,这确实开始了拥抱HTML5,CSS3和JavaScript等开放技术的运动。

作为代理机构的员工,我不得不说,对于我们的客户而言,这是一个非常糟糕的情况。
他们中的大多数人都必须为启动的简单广告或广告系列支付两次费用,才能使交互式内容通过Flash在现代的IE7或IE8中以及在现代浏览器以及通过HTML5的iDevices上运行。

多填充旧浏览器的功能有其边界,主要是性能。那么,在这些无Flash iDevice上没有运行Flash的功能吗?

当然有一个,当然它是用JavaScript内置的。

一段历史:2010年,Tobias Schneider发布了一个名为Gordon的小图书馆
允许SWF文件直接在浏览器中运行。这对于较小的Flash文件(例如广告)仅使用Flash 2版之前的功能非常有效,但根本不包含更高级别的功能。

当Tobias加入ueberJS公司UXEBU时,他们想出了一个新主意。
因此,比克谢德(Bikeshed)诞生了。 Bikeshed本身是一种JavaScript动画框架,但它也是从JavaScript到Flash的对象,都是您希望将其编译的对象(它是基于适配器的,因此您可以为任何所需的对象编写适配器,尽管标准行为是将Flash编译为JavaScript)。 。它与Flash 10和ActionScript 3兼容。请访问其网页,以了解有关除编译器之外的众多功能的更多信息。

06.为您的智能手机编写应用程序

为手机环境编写本机应用程序是一条坎rock的路。首先要确定您要支持的平台。如果您的应用程序可以在iPhone和iPad,运行Android的移动设备,Windows Mobile,Blackberry设备,基于webOS的平台等上运行。

每个平台都有其自己的API,并且大多使用不同的编程语言。
如果您在浏览器大战中幸免于难,请告诉我,这是一种打拼的方法。对于开发人员而言,在时间和预算上为所有这些平台构建应用程序几乎是不可能的。

那么该怎么办?雇用更多开发人员?为应用程式收取更多费用?还是找到一种更好的方法来确保您的代码库可以在每台设备上运行?作为你们中的大多数人,我更喜欢最后一种方法。

但是,这些应用程序应以什么形式构建?所有这些平台有什么共同点?您可能知道答案,这是一个网络浏览器,因此是一个JavaScript引擎。

这就是Apache Cordova背后的想法,而Apache Cordova的前名是PhoneGap。
Cordova是一个JavaScript框架,它抽象了每个移动环境的API,并公开了一个纯净的JavaScript API来控制所有这些API。这使您可以维护单个代码库,然后在不同的移动设备上构建和部署该代码库。

在此处查看资源,以了解如何使用Cordova来构建一次构建并且将在所有地方运行的kick ass移动应用程序。

07.在浏览器中运行Ruby和Python

毫无疑问,著名的Firefox浏览器背后的公司Mozilla雇用了很多极客。其中一位是Mozilla研究小组的工程师Alon Zakai,他开发了一种名为Emscripten的怪异工具。

Emscripten使您可以将LLVM位代码(可以从基于C / C ++的库中生成)转换为JavaScript。它通过将库编译为位代码,然后将位代码转换为JavaScript来实现。整洁,但是您可能会问自己,我该怎么办?

我有一个反问题:您是否听说过“使用CoffeeScript和Prototype是在浏览器中运行Ruby所能获得的最接近的短语”?不?不用担心,因为这不再适用。

使用Emscripten,您可以简单地获取Ruby源代码,将其转换为JavaScript,然后在浏览器中运行真正的Ruby!但这并不只适用于Ruby,例如Python也已实现。

或者查看浏览器中的h.264解码器Broadway。那实际上是一个经过脚本化的C ++库!

转到repl.it,以查看浏览器中正在运行的几种编程语言(包括Ruby和Python)!

08.编写与操作系统无关的桌面程序

之前,我们曾讨论过在Apache Cordova的帮助下将多个移动平台作为目标。毫不奇怪,JavaScript不仅可以用于移动平台,我们的老朋友台式机也可以解决。

第一个解决方案来自带有Titanium桌面套件的Appcelerator团队,以及来自广泛使用的Air平台的Adobe。

但是,作为我们所有人都是开放源代码爱好者,我们正在寻找一种更加开放和基于Node.js的技术。认识app.js! app.js是一个开放的Web技术和基于Node.js的桌面程序构建器,它使我们能够编写具有文件系统访问权限,窗口控件等内容的真实桌面程序。我们可以依靠Node稳定的跨平台API,并使用HTML和CSS构建我们的软件UI。就像此列表中最热门的新东西一样。

app.js是一个非常年轻的项目,因此目前仅支持Windows和Linux,但是根据邮件列表,Mac支持正在发展。

09.运行一个网络服务器

如今,当您告诉他们您的网站由基于JavaScript的网络服务器提供服务时,您不会感到震惊。如果您在两三年前回想一下,并告诉网络开发人员完全一样的话,他们可能会嘲笑您,甚至更嘲笑您。

但是幸运的是,Node.js取得了令人难以置信的成功。由于Node.js具有异步特性,因此它不仅使人们感到惊讶,而且在性能上也非常出色,尤其是当它面临大量并行连接的问题时。不仅其性能令人赞叹,真正简单的API也吸引了许多开发人员。让我们从Node world中查看“ Hello World”示例,它不仅是屏幕示例中的打印“ Hello World”,还是http网络服务器!

var http = require(’http’);
http.createServer(function(req,res){
res.writeHead(200,{’Content-Type':‘text / plain’});
res.end(‘Hello World n’);
})。listen(1337,‘127.0.0.1’);

如果您不被这种简单性所震撼,那么,我也无法帮助您。

Node受欢迎程度(或炒作)的最好方面之一是,像Microsoft这样的大公司实际上正在支持它,即在其Azure云服务中!

10.网页抓取和屏幕截图

因此,最后但并非最不重要的一点,让我们看一个我个人喜欢的项目,该项目让我可以在命令行上无头运行QUnit测试。 PhantomJS是基于WebKit的无头浏览器,具有基于纯JavaScript(或Cof​​feScript)的API。

但是,测试您的JavaScript和DOM并不是Phantom的唯一用例。真正令我着迷的是它具有抓取网站并允许您截取其屏幕截图的功能!
是的,您没看错,借助Phantom,您可以以不同的图形格式输出网页,当然,这就像从婴儿那里偷糖果一样容易。

让我们看一看执行此操作的脚本:

var page = new WebPage();
page.open(“ http://google.com”,功能(状态){
page.render('google.png');
phantom.exit();
});

截屏就是您所需要的,并且因为它基于JavaScript,所以您还可以使用jQuery并在截屏之前对页面内容进行操作!

等待!还有更多...

因此,当我发现这些工具中的每一个时,我都希望您像我一样惊奇。本文只是介绍了当今JavaScript所能实现的功能。诸如此类的东西完全是用JS Cloud9完全编写的IDE或使用它完成的高安全性的东西(您的信用卡是用JavaScript制作的)。

我希望您能从中得到启发,花一些时间来处理这里提到的一些项目,或者最好使用其中的一些工具并围绕它们构建新的东西。这里的大多数内容都是开源的,并且有开发人员在寻找您帮助他们改善工作的方法,即使只是使用工具,发现错误并报告它们也是如此。

选址
将您的小型企业带入移动
阅读更多

将您的小型企业带入移动

在网络营销的世界中,每年约有10年被誉为“移动年”。2011年,随着令人难以置信的新数字逐月出现,这一说法终于得以实现。我们中的三分之一现在正在使用智能手机访问网络。 (实际上,到2014年,通过移动设备访问网络的行为将主导台式机和笔记本电脑)。在过去三年中,Google上的移动搜索查询增长了3,000%。有超过500,000个移动应用程序。大型企业迫切希望在新平台上为消费者提供服务。互联网上的知...
3D打印能否挽救灾区的生命?
阅读更多

3D打印能否挽救灾区的生命?

随着人们对3D打印的兴趣不断提高,将物理设计变为现实的过程变得越来越容易,而不必进行批量生产。尽管国际知名慈善机构乐施会(Oxfam)认为3D打印具有头的用途,但它也有可能对发展中国家产生巨大影响。因此,它与3D打印机公司iMakr合作,帮助设计,测试和制造产品,这些产品将有助于在遭受危机的地区保持人们的健康。通过使用My Mini Factory(一个用于3D打印设计的共享站点),iMakr呼吁...
为善而设计:8种发挥创造力的方法
阅读更多

为善而设计:8种发挥创造力的方法

为善而设计不仅是一个“嗡嗡”的短语。如今,设计师比以往任何时候都更加认识到将手变成真正的永久力量的重要性。付诸实践,以这种方式进行创建可以丰富您的代理机构和所做的工作。真正的情感投资通常是核心–与慈善机构合作可以通过商业工作无法实现的方式来实现和回报。各种规模的创意工作室都可以努力将慈善工作纳入自己的职权范围,而做得很好的工作室则对此颇有话语权。商业机构 将始终只关注底线,并且可能很难确定哪些慈善...