首页 > 产品 > 关键词 > Chrome最新资讯 > 正文

使用Chrome的开发者工具来学习JavaScript

2013-01-09 11:05 · 稿源:阮一峰的网络日志

你可能知道,Javascript语言的执行环境是“单线程”(single thread)。

所谓“单线程”,就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。

这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行。

为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous)。

“同步模式”就是上一段的模式,后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的、同步的;“异步模式”则完全不同,每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

“异步模式”非常重要。在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。在服务器端,“异步模式”甚至是唯一的模式,因为执行环境是单线程的,如果允许同步执行所有http请求,服务器性能会急剧下降,很快就会失去响应。

本文总结了“异步模式”编程的4种方法,理解它们可以让你写出结构更合理、性能更出色、维护更方便的Javascript程序。

一、回调函数

这是异步编程最基本的方法。

假定有两个函数f1和f2,后者等待前者的执行结果。

f1(); f2();

如果f1是一个很耗时的任务,可以考虑改写f1,把f2写成f1的回调函数。

function f1(callback){ setTimeout(function () { // f1的任务代码 callback(); }, 1000); }

执行代码就变成下面这样:

f1(f2);

采用这种方式,我们把同步操作变成了异步操作,f1不会堵塞程序运行,相当于先执行程序的主要逻辑,将耗时的操作推迟执行。

回调函数的优点是简单、容易理解和部署,缺点是不利于代码的阅读和维护,各个部分之间高度耦合(Coupling),流程会很混乱,而且每个任务只能指定一个回调函数。

二、事件监听

另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序,而取决于某个事件是否发生。

还是以f1和f2为例。首先,为f1绑定一个事件(这里采用的jQuery的写法)。

f1.on(‘done’, f2);

上面这行代码的意思是,当f1发生done事件,就执行f2。然后,对f1进行改写:

function f1(){ setTimeout(function () { // f1的任务代码 f1.trigger(‘done’); }, 1000); }

f1.trigger(‘done’)表示,执行完成后,立即触发done事件,从而开始执行f2。

这种方法的优点是比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以“去耦合”(Decoupling),有利于实现模块化。缺点是整个程序都要变成事件驱动型,运行流程会变得很不清晰。

三、发布/订阅

上一节的“事件”,完全可以理解成“信号”。

我们假定,存在一个“信号中心”,某个任务执行完成,就向信号中心“发布”(publish)一个信号,其他任务可以向信号中心“订阅”(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做“发布/订阅模式”(publish-subscribe pattern),又称“观察者模式”(observer pattern)。

这个模式有多种实现,下面采用的是Ben Alman的Tiny Pub/Sub,这是jQuery的一个插件。

首先,f2向“信号中心”jQuery订阅“done”信号。

jQuery.subscribe(“done”, f2);

然后,f1进行如下改写:

function f1(){ setTimeout(function () { // f1的任务代码 jQuery.publish(“done”); }, 1000); }

jQuery.publish(“done”)的意思是,f1执行完成后,向“信号中心”jQuery发布“done”信号,从而引发f2的执行。

此外,f2完成执行后,也可以取消订阅(unsubscribe)。

jQuery.unsubscribe(“done”, f2);

这种方法的性质与“事件监听”类似,但是明显优于后者。因为我们可以通过查看“消息中心”,了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行。

四、Promises对象

Promises对象是CommonJS工作组提出的一种规范,目的是为异步编程提供统一接口。

简单说,它的思想是,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。比如,f1的回调函数f2,可以写成:

f1().then(f2);

f1要进行如下改写(这里使用的是jQuery的实现):

function f1(){ var dfd = $.Deferred(); setTimeout(function () { // f1的任务代码 dfd.resolve(); }, 500); return dfd.promise; }

这样写的优点在于,回调函数变成了链式写法,程序的流程可以看得很清楚,而且有一整套的配套方法,可以实现许多强大的功能。

比如,指定多个回调函数:

f1().then(f2).then(f3);

再比如,指定发生错误时的回调函数:

f1().then(f2).fail(f3);

而且,它还有一个前面三种方法都没有的好处:如果一个任务已经完成,再添加回调函数,该回调函数会立即执行。所以,你不用担心是否错过了某个事件或信号。这种方法的缺点就是编写和理解,都相对比较难。

文末:由阮一峰的网络日志提供,转载请注明来源。

  • 相关推荐
  • 大家在看
  • 微软正努力让Chrome和Edge的滚动更加流畅

    尽管 Chrome 浏览器是全球最受欢迎的桌面浏览器,但这并不意味着它就是完美的浏览器而没有任何问题。其中一个设计缺陷就是在 Windows 10 平台上会影响用户在浏览长页面时候的滚动体验。 微软已承诺修复 Chromium 浏览器中滚动问题,而基于 Chromium 的 Edge 86 还对大尺寸的 PDF 文件的滚动效果进行了优化。

  • 谷歌:Chrome应用商店永久禁用付费扩展

    Chrome网上应用商店已经推出了11年,为了用户的安全,今年3月份的时候,谷歌曾宣布暂时禁用新的付费扩展。但是现在,这一禁令变成了永久性的。谷歌表示,自2020年9月21日起,你将无法再创建新

  • Chrome正在启用HTTP/3,支持IETF QUIC

    QUIC(Quick UDP Internet Connections)是 Google 推出的一个项目,旨在降低基于 TCP 通讯的 Web 延迟。QUIC 非常类似 TCP+TLS+SPDY ,但是基于 UDP 实现的。它是 HTTP/3 的基础协议。

  • Chrome 87 Beta加速放弃FTP 改进Cookie存储API

    继上周发布Chrome86之后,谷歌也同步上线了Chrome87Beta。考虑到视频会议应用的蓬勃发展,该公司为Chrome87Beta引入了新的界面,支持通过媒体控件来固定、旋转和放大摄像头画面。不过只有在获得用户的授权之后,网站才能启用这些功能。

  • Google Chrome 改变缓存机制 阻止此前广告商对其滥用

    Google改变了Chrome浏览器的一个核心组件的工作方式,以便为用户增加额外的隐私保护。这个Chrome浏览器组件被称为HTTP缓存或共享缓存,它的工作原理是保存网页上加载的资源副本,如图片、CSS文件和JavaScript文件。

  • Chrome浏览器份额全球第一给谷歌惹上垄断麻烦:或被迫出售

    在桌面浏览器市场,谷歌Chrome的份额达到了7成左右,是当之无愧的大哥。然而,这么优异的表现却让美国司法部认为谷歌涉嫌垄断在线市场。在司法部与美国一些州检察官发起的发垄断调查中,探讨了

  • Chrome Web Store支付系统停用 谷歌推荐开发者尽快迁移

    Chrome Web Store 支付系统现已被谷歌放弃,并将会在未来几个月内关闭。对于目前仍使用该支付系统的开发者,谷歌已为其提供了多种替代支付方案,并推荐近期内迁移到其他支付系统中。

  • 云安全日报200923:谷歌Chrome浏览器发现执行任意代码高危漏洞,需要尽快升级

    谷歌在本周二的公告中披露了Chrome浏览器五个高度严重的漏洞。根据与应用程序相关的特权,攻击者可以查看,更改或删除数据 。据谷歌称,成功利用其中最严重的漏洞可能使攻击者能够在浏览器的上下文中执行任意代码。以下是漏洞详情:漏洞详情1. CVE-2020-15960 严重程度:高该堆缓冲区溢出(越界读取)漏洞可能允许远程攻击者通过精心制作的HTML页面执行超出范围的内存访问。成功利用漏洞可能使攻击者能够在浏览器的上下文中执行任

  • 原神语言交流Odomu成就任务攻略 丘丘人语言交流怎么触发

    ​原神中是有一个语言交流的成就可以完成,叫做“...odomu”,成就的需求是在语言交流中与丘丘人交谈成功,很多玩家还不清楚这个语言交流的任务怎么做,下面就来为大家详细的介绍一下。

  • 当美食成为社交语言,品牌可以擦出火花么?

    十一期间,国内旅游超6亿人次,如此海量的人群跨越山水,去往不同的城市和地域,把所见所闻的体验,又全部生成海量的社交内容。据抖音发布的「2020国庆中秋假期数据报告」显示,上海问鼎今年抖音热门旅游城市榜首,相关的旅游视频点赞数超4515万,累计播放次数超14.5亿,重庆和深圳分别位列二三。除此外还有新上榜的黑马城市苏州和东莞。两个城市相关的旅游视频点赞量也分别高达2761万和1784万,播放量分别突破10亿和6亿。可见每一

  • 云电脑彻底改变传统PC形态,联发科布局Chromebook芯片

    Google在2009年全球同步发布了Chrome OS,这是一款基于Chrome浏览器打造的云操作系统,用户的应用程序、文件等数据都在云端,只需要打开浏览器进行登录即可进行操作。Chrome OS在发布当时十分符合上网本和轻薄型笔记本电脑的PC市场趋势,助推了上网本的流行,在当下互联网时代也仍然是重要应用趋势之一,与“云电脑““云手机”等概念如出一辙。因为Chrome OS基于云计算,所有数据都在服务器端,因此可以降低本地硬件设备的计算和?

  • 中国听力语言康复研究中心联合北大医疗脑健康开展《儿童言语语言治疗师专业技能培训》

    语言康复行业发展的关键标志之一,就是言语治疗师数量与专业化水平的提升。为共同推进国内语言康复专业人员的在职培训,近期,中国听力语言康复研究中心(简称:中语康)联合北大医疗脑健康开展了关于儿童言语语言治疗师的专业技能培训,旨在借助双方专业力量,夯实语言康复的专业建设,探讨并建立国内言语治疗师的认证和考核标准。我国言语治疗师人才极度匮乏。近年来,我国言语障碍患者数量日趋增长。据今年国际聋人日发布的数据

  • 十年后可能消失的五种编程语言

    随着时间的流逝,程序员们发现了更新、更简单的工作方式,新的编程语言如雨后春笋般出现,但只有少数编程语言能成为社区的新宠。这种进步的一个副作用是一些古老的编程语言必然会跟历史一样被人们遗忘。如果一个编程语言无法随着时间的推移提升其价值,那么它的用户群终将会流失,并逐渐淡出人们的视线,或者成为更新一代编程语言的基础。

  • Google宣布了新的云功能:更多的语言支持、增强安全性等

    谷歌在其云平台上提供的功能即服务(FaaS)是云功能,允许开发者构建与第三方服务和api或物联网后端集成的无服务器解决方案。最近,这家公共云供应商宣布了一些云功能的新功能,如更多的语言支持、改进的开发体验、每个功能标识的增强安全性以及更多地区的可用性。谷歌在2018年的下一届云大会上宣布,自其全面可用以来,谷歌继续通过新的更新来增强云功能。这些更新包括对Java、Go、Node.js、还有python。现在,公司进一步扩展了?

  • 为什么Java、Python会成为程序员最害怕的编程语言?

    最不受欢迎 / 最令人畏惧的编程语言有哪些?这些编程语言为什么令人畏惧?对它们的评价是否公正?在 StackOverflow 的 2020 年度开发者调查中,有一张表格,显示的是“最受欢迎、最令人畏惧和最想要的编程语言”。最受欢迎的和最想要的编程语言,嗯,是有点无聊。倒是那个最令人畏惧的就有意思多了。正如托尔斯泰(Tolstoy)所说的:“幸福的家庭都是相似的,而不幸的家庭则各有各的不幸。”

  • 增长新动能 行业新趋势 经营新模式 三维家HOMETALK启动家居行业数智化

    引言2020 年,疫情的挑战,消费习惯转变,市场迭代进一步加速,倒逼出全新的工作方式和发展模式,对于家居同仁而言,是危机和机遇并存的。家居产业数字化成为热门话题,智能化升级转型刻不容缓,后疫情时代,该如何用技术武装自己?紧抓新赛道上的发展机遇?家居产业的效率重构如何实现?HOMETALK作为三维家的年度行业洞见分享会,将为家居产业带来创新理念与行业发展新趋势。9 月 21 日,"HOMETALK数智者说——家居行业增长赋能专

  • 华为方舟编译器正式支持C语言:完全开源

    2019年8月底,华为方舟编译器(OpenArkCompiler)正式开源,迈出了跨越性的一步。一年多来,方舟编程体系陆续实现了编译器、引擎、调试器的开源,其中编译器的重点功能主要集中在Java应用程序静

  • realme Q2系列参数大曝光:Q2 Pro独占素皮版本和65W快充

    上个月,realme副总裁徐起测发布预告称realme将于下月(10月)发布realme Q系列新品,并且强调“realme Q系列新品绝对是爆款,绝对会现货管够。”随后这款命名为realme Q2的新机正式得到官宣,其神秘面纱也逐渐被层层揭开。现在有最新消息,近日有知名数码博主进一步晒出了该系列新机的更多细节。根据知名数码博主最新发布得到消息显示,与此前曝光的消息基本一致,全新的realme Q2系列将包含realme Q2和realme Q2 Pro?

  • 距发布会不到四小时,疑似 iPhone 12 mini/Pro 和 HomePod mini 渲染图流出

    距离苹果发布会还有不到四小时的时间,爆料人 Evan Blass 分享了几幅渲染图,展示了 iPhone 12 mini、iPhone 12 Pro 和 iPhone 12 Pro Max 以及 HomePod mini 的外观。从图中可以看出 iPhone 12 mini 的蓝色、红色、绿色、黑色和白色五种颜色。iPhone 12 Pro 和 iPhone 12 Pro Max 则是蓝色、灰色、金色和银色。除此之外,Evan Blass 还分享了一组 HomePod mini 的图片,材质似乎与 HomePod 相?

  • Python有望超越Java排第二?风变编程解析编程语言新趋势

    随着人工智能时代的来临,编程语言的热度居高不下,随着智能机器人的出现,在2020年更是迎来一波新的高峰。在这样的大环境下,关于谁是人工智能最流行编程语言的讨论也十分热烈,C、C++、Java、Python等编程语言不断被拿出来做比较。那么接下来,风变编程来解析一波当下编程语言的新趋势。Python受欢迎度有望超越Java?近日,TIOBE编程语言社区公布了2020年10月编程语言排行榜。榜单数据显示,Python的受欢迎程度十分逼近排在第二?

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签