整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

「JavaScript基础」一份详尽的 async/await 使用指南

家好,前几篇文章我们一起学习了「JavaScript基础」Promise使用指南, 明白了ES6增加的新特性——Promise让我们能够更加优雅的书写回调函数,清楚了Promise有哪些状态,以及如何编写Promise的相关代码。本篇文章,小编将和大家一起学习异步编程的未来——async/await,它会打破你对上篇文章Promise的认知,竟然异步代码还能这么写! 但是别太得意,你需要深入理解Promise后,才能更好的的驾驭async/await,因为async/await是基于Promise的,没有理解Promise,小编强烈建议各位再看看「JavaScript基础」Promise使用指南。如果你一旦掌握了如何使用async/await,就没必要使用Promise了(除非你需要将回调类型的API转换为async/await,你需要使用到Promise)。

关于async / await

  1. 用于编写异步程序
  2. 代码书写方式和同步编码十分相似,因此代码十分简洁易读
  3. 基于Promise
  4. 您可以使用try和catch常规的方法捕获异常
  5. ES8中引入了async/await,目前几乎所有浏览器都已支持这个特性(除了IE和Opera不支持)
  6. 你可以轻松设置断点,调试更容易。

从async开始学起

让我们从async关键字开始吧,这个关键词可以放在函数之前,如下所示:

async function f() { 
 return 1; 
}

在函数之间加上async意味着:函数将返回一个Promise,虽然你的代码里没有显示的生命返回一个Promise,但是编译器会自动将其转换成一个Promise中,不信你可以使用Promisethen语法试试:

async function f() { 
 return 1; 
} 
f().then(alert); // 1

…如果你不放心的话,你可以再代码里明确返回一个Promise,输出结果是相同的。

async function f() { 
 return Promise.resolve(1); 
} 
f().then(alert); // 1

很简单吧,小编之所以说 async/await 是基于Promise是没毛病的,async确保函数返回一个Promise,很简单吧,不仅如此,还有一个关键字await,await只能在async中运行。

等待——await

await的基本语法:

let value=await promise;

该关键字的await的意思就是让JS编译器等待Promise并返回结果。接下来我们看一段简单的示例:

async function f() { 
 let promise = new Promise((resolve, reject) => { 
 setTimeout(() => resolve("done!"), 1000) 
 }); 
 let result = await promise; // wait till the promise resolves (*) 
 alert(result); // "done!" 
} 
f();

函数执行将会在 let result = await promise 这一行暂停,直到Promise返回结果,因此上述代码将会1秒后,在浏览器弹出“done”的提示框。

小编在此强调下:

  • await的字面意思就是让JavaScript等到Promise结束,然后输出结果。这里并不会占用CPU资源,因为引擎可以同时执行其他任务:其他脚本或处理事件。
  • 不能单独使用await,必须在async函数作用域下使用,否则将会报出异常“Error: await is only valid in async function”,比如以下代码:
function f() { 
 let promise = Promise.resolve(1); 
 let result = await promise; // Syntax error 
}

接下来,小编将和大家一起来亲自动手实践以下内容:

  • async与Promise.then的结合使用,依次处理多个执行结果
  • 使用await替代Promise.then,依次处理多个执行结果
  • 同时等待多个执行结果
  • 使用Promise.all收集多个结果
  • 使用try-catch捕获异常
  • 如何处理Promise.all中抛出的错误
  • 使用finally确保函数执行

一起动手之前,确保你安装了Node,NPM相关工具,谷歌浏览器,为了预览代码效果,小编使用 npm install http-server -g 命令快速部署了web服务环境,方便我们运行代码。接下来,我们写一个火箭发射场景的小例子。

async与Promise.then的结合使用,依次处理多个执行结果

  • 通过控制台命令切换至工作区
  • 创建一个async-function-Promise-chain的文件夹
  • 在main.js中用创建第一个返回随机函数的async函数getRandomNumber:
async function getRandomNumber() { 
 console.log('Getting random number.'); 
 return Math.random(); 
}
  • 在创建一个async函数determinReadyToLaunch:如果传入参数大于0.5将返回True
async function deteremineReadyToLaunch(percentage) { 
 console.log('Determining Ready to launch.'); 
 return percentage>0.5; 
}
  • 创建第三个async函数reportResults,如果传入参数为True将进入倒计时发射
async function reportResults(isReadyToLaunch) { 
 if (isReadyToLaunch) { 
 console.log('Rocket ready to launch. Initiate countdown: '); 
 } else { 
 console.error('Rocket not ready. Abort mission: '); 
 } 
}
  • 创建一个main函数,调用getRandomNumber函数,并且通过Promise.then方法相机调用determineReadyToLaunch和reportResults函数
export function main() { 
 console.log('Before Promise created'); 
 getRandomNumber() 
 .then(deteremineReadyToLaunch) 
 .then(reportResults) 
 console.log('After Promise created'); 
}
  • 新建一个html文件引入main.js
<html> 
<script type="module"> 
 import {main} from './main10.js'; 
 main(); 
</script> 
<body> 
</body> 
</html>
  • 在工作区域运行 http-server 命令,你将会看到如下输出

使用await替代Promise.then,依次处理多个执行结果

上一节,我们使用Promise.then依次处理了多个执行结果,本小节,小编将使用await实现同样的功能,具体操作如下:

  • 通过控制台命令切换至工作区
  • 创建一个async-function-Promise-chain的文件夹
  • 在main.js中用创建第一个返回随机函数的async函数getRandomNumber:
async function getRandomNumber() { 
 console.log('Getting random number.'); 
 return Math.random(); 
}
  • 在创建一个async函数determinReadyToLaunch:如果传入参数大于0.5将返回True
async function deteremineReadyToLaunch(percentage) { 
 console.log('Determining Ready to launch.'); 
 return percentage>0.5; 
}
  • 创建第三个async函数reportResults,如果传入参数为True将进入倒计时发射
async function reportResults(isReadyToLaunch) { 
 if (isReadyToLaunch) { 
 console.log('Rocket ready to launch. Initiate countdown: '); 
 } else { 
 console.error('Rocket not ready. Abort mission: '); 
 } 
}
  • 创建一个main函数,调用getRandomNumber函数,并且通过Promise.then方法相机调用determineReadyToLaunch和reportResults函数
export async function main() { 
 const randomNumber = await getRandomNumber(); 
 const ready = await deteremineReadyToLaunch(randomNumber); 
 await reportResults(ready); 
}
  • 在工作区域运行 http-server 命令,你将会看到如下输出

同时等待多个执行结果

有时候我们需要同时启动多个异步,无需依次等待结果消耗时间,接下来的例子可以使用await 同时启动和等待多个结果。

  • 通过控制台命令切换至工作区
  • 创建一个await-concurrently的文件夹
  • 创建三个函数功能checkEngines,checkFlightPlan,和checkNavigationSystem用来记录信息时,这三个函数都返回一个Promise,示例代码如下:
function checkEngines() { 
 console.log('checking engine'); 
 return new Promise(function (resolve) { 
 setTimeout(function() { 
 console.log('engine check completed'); 
 resolve(Math.random() < 0.9) 
 }, 250) 
 }); 
} 
function checkFlightPlan() { 
 console.log('checking flight plan'); 
 return new Promise(function (resolve) { 
 setTimeout(function() { 
 console.log('flight plan check completed'); 
 resolve(Math.random() < 0.9) 
 }, 350) 
 }); 
} 
function checkNavigationSystem() { 
 console.log('checking navigation system'); 
 return new Promise(function (resolve) { 
 setTimeout(function() { 
 console.log('navigation system check completed'); 
 resolve(Math.random() < 0.9) 
 }, 450) 
 }); 
}
  • 创建一个async 的main函数调用上一步创建函数。将每个返回的值分配给局部变量。然后等待Promise的结果,并输出结果:
 export async function main() { 
 const enginePromise = checkEngines(); 
 const flighPlanPromise = checkFlightPlan(); 
 const navSystemPromise = checkNavigationSystem(); 
 const enginesOk = await enginePromise; 
 const flighPlanOk = await flighPlanPromise; 
 const navigationOk = await navSystemPromise; 
 if (enginesOk && flighPlanOk && navigationOk) { 
 console.log('All systems go, ready to launch: '); 
 } else { 
 console.error('Abort the launch: '); 
 if (!enginesOk) { 
 console.error('engines not ready'); 
 } 
 if (flighPlanOk) { 
 console.error('error found in flight plan'); 
 } 
 if (navigationOk) { 
 console.error('error found in navigation systems'); 
 } 
 } 
}
  • 在工作区域运行 http-server 命令,你将会看到如下输出

使用Promise.all收集多个结果

在上一小节中,我们一起学习了如何触发多个异步并等待多个异步结果。上一节我们只使用了asyc/ await,本节小编和大家一起使用Promise.all来收集多个异步的结果,在某些情况下,尽量使用Promise相关的API,具体的代码如下:

  • 通过控制台命令切换至工作区
  • 创建一个Promise-all-collect-concurrently的文件夹

创建三个函数功能checkEngines,checkFlightPlan,和checkNavigationSystem用来记录信息时,这三个函数都返回一个Promise,示例代码如下:

function checkEngines() { 
 console.log('checking engine'); 
 return new Promise(function (resolve) { 
 setTimeout(function() { 
 console.log('engine check completed'); 
 resolve(Math.random() < 0.9) 
 }, 250) 
 }); 
} 
function checkFlightPlan() { 
 console.log('checking flight plan'); 
 return new Promise(function (resolve) { 
 setTimeout(function() { 
 console.log('flight plan check completed'); 
 resolve(Math.random() < 0.9) 
 }, 350) 
 }); 
} 
function checkNavigationSystem() { 
 console.log('checking navigation system'); 
 return new Promise(function (resolve) { 
 setTimeout(function() { 
 console.log('navigation system check completed'); 
 resolve(Math.random() < 0.9) 
 }, 450) 
 }); 
}
  • 创建一个async 的main函数调用上一步创建函数。使用Promise.all收集多个结果,将结果返回给变量,代码实现如下:
export async function main() { 
 const prelaunchChecks = [ 
 checkEngines(), 
 checkFlightPlan(), 
 checkNavigationSystem() 
 ]; 
 const checkResults = await Promise.all(prelaunchChecks); 
 const readyToLaunch = checkResults.reduce((acc, curr) => acc && 
 curr); 
 if (readyToLaunch) { 
 console.log('All systems go, ready to launch: '); 
 } else { 
 console.error('Something went wrong, abort the launch: '); 
 } } 
}
  • 在工作区域运行 http-server 命令,你将会看到如下输出

Promise.all接收多个promise的数组,并整体返回一个Promise,如果和上一小节的代码进行比较,代码量少了不少,但是也有个问题,不能返回是哪一步失败。

使用try-catch捕获异常

并非所有的async都能成功返回,我们需要能够处理程序的异常,在本小节中,你将会看到如何使用try-catch捕获async函数引发的错误,具体操作的流程如下:

  • 通过控制台命令切换至工作区
  • 创建一个async-errors-try-catch的文件夹
  • 创建一个抛出错误的async函数addBoosters
async function addBoosters() { 
 throw new Error('Unable to add Boosters'); 
}
  • 创建一个async函数,performGuidanceDiagnostic它也会抛出一个错误:
async function performGuidanceDiagnostic (rocket) { 
 throw new Error('Unable to finish guidance diagnostic')); 
}
  • 创建一个async的main函数调用函数addBosters与performGuidanceDiagnostic ,使用try-catch处理错误:
 export async function main() { 
 console.log('Before Check'); 
 try { 
 await addBosters(); 
 await performGuidanceDiagnostic(); 
 } catch (e) { 
 console.error(e); 
 } 
} 
console.log('After Check');
  • 在工作区域运行 http-server 命令,你将会看到如下输出

从输出看出,我们使用我们熟悉的try-catch捕获到了异常,如果第一个发生异常,第二个就不会执行,同时将会记录到发生的异常,并输出到控制台,在下一小节,我们一起将学习到如何使用try-catch捕获同时运行多个异步操作的异常。

如何处理Promise.all中抛出的错误

在上面的小节中,我们使用了Promise.all来收集多个异步的执行结果。在收集错误状态,Promise.all更有趣。通常,我们在处理多个错误时,同时显示多个错误信息,我们必须编写相关的业务逻辑。但是,在这小节,你将会使用Promise.all和try-catch捕获异常,无需编写复杂的布尔逻辑处理业务,具体如何实现示例如下:

  • 通过控制台命令切换至工作区
  • 创建一个Promise-all-collect-concurrently的文件夹
  • 创建三个async功能checkEngines,checkFlightPlan以及checkNavigationSystem函数用来记录信息时,返回Promise,一个成功的值的信息和一个失败值的信息:
function checkEngines() { 
 console.log('checking engine'); 
 return new Promise(function (resolve) { 
 setTimeout(function() { 
 console.log('engine check completed'); 
 resolve(Math.random() < 0.9) 
 }, 250) 
 }); 
} 
function checkFlightPlan() { 
 console.log('checking flight plan'); 
 return new Promise(function (resolve) { 
 setTimeout(function() { 
 console.log('flight plan check completed'); 
 resolve(Math.random() < 0.9) 
 }, 350) 
 }); 
} 
function checkNavigationSystem() { 
 console.log('checking navigation system'); 
 return new Promise(function (resolve) { 
 setTimeout(function() { 
 console.log('navigation system check completed'); 
 resolve(Math.random() < 0.9) 
 }, 450) 
 }); 
}

创建一个async的main函数调用每个在上一步中创建的功能函数。等待结果,捕获并记录引发的任何错误。如果没有抛出错误,则记录成功:

 export async function main() { 
 try { 
 const prelaunchChecks = [ 
 checkEngines, 
 checkFlightPlan, 
 checkNavigationSystem 
 ]; 
 await Promise.all(prelauchCheck.map((check) => check()); 
 console.log('All systems go, ready to launch: '); 
 } catch (e) { 
 console.error('Aborting launch: '); 
 console.error(e); 
 } 
 } 
}
  • 在工作区域运行 http-server 命令,你将会看到如下输出

Promise.all返回一个Promise,当await在错误状态下,会抛出异常。三个异步promise同时执行,如果其中一个或多个错误得到满足,则会抛出一个或多个错误;

你会发现只有一个错误会被记录下来,与同步代码一样,我们的代码可能会抛出多个异常,但只有一会被catch块捕获并记录。

使用finally确保函数执行

错误处理可能会变得相当复杂。有些情况,其中您希望错误继续冒泡调用堆栈以便执行其它更高级别处理。在这些情况下,您可能还需要执行一些清理任务。本小节,你将了解如何使用finally以确保执行某些代码,而不管错误状态如何,具体如何实现示例如下:

  • 通过控制台命令切换至工作区
  • 创建一个Promise-all-collect-concurrently的文件夹
  • 创建三个async功能checkEngines,checkFlightPlan以及checkNavigationSystem函数用来记录信息时,返回Promise,一个成功的值的信息和一个失败值的信息:
function checkEngines() { 
 console.log('checking engine'); 
 return new Promise(function (resolve, reject) { 
 setTimeout(function () { 
 if (Math.random() > 0.5) { 
 reject(new Error('Engine check failed')); 
 } else { 
 console.log('Engine check completed'); 
 resolve(); 
 } 
 }, 250) 
 }); 
} 
function checkFlightPlan() { 
 console.log('checking flight plan'); 
 return new Promise(function (resolve, reject) { 
 setTimeout(function () { 
 if (Math.random() > 0.5) { 
 reject(new Error('Flight plan check failed')); 
 } else { 
 console.log('Flight plan check completed'); 
 resolve(); 
 } 
 }, 350) 
 }); 
} 
function checkNavigationSystem() { 
 console.log('checking navigation system'); 
 return new Promise(function (resolve, reject) { 
 setTimeout(function () { 
 if (Math.random() > 0.5) { 
 reject(new Error('Navigation system check failed')); 
 } else { 
 console.log('Navigation system check completed'); 
 resolve(); 
 } 
 }, 450) 
 }); 
}
  • 创建一个asyncperformCheck函数,调用上一步中创建的每个函数。等待结果,并用于finally记录完整的消息:
async function performChecks() { 
 console.log('Starting Pre-Launch Checks'); 
 try { 
 const prelaunchChecks = [ 
 checkEngines, 
 checkFlightPlan, 
 checkNavigationSystem 
 ]; 
 return Promise.all(prelauchCheck.map((check) => check()); 
 } finally { 
 console.log('Completed Pre-Launch Checks'); 
 } 
 }
  • 创建一个async的main函数调该函数performChecks。等待结果,捕获并记录引发的错误。
export async function main() { 
 try { 
 await performChecks(); 
 console.log('All systems go, ready to launch: '); 
 } catch (e) { 
 console.error('Aborting launch: '); 
 console.error(e); 
 } 
}
  • 在工作区域运行 http-server 命令,你将会看到如下输出

与上一小节一样,错误在main函数中进行捕获,由于finally的存在,让我清楚的知道performChecks确保执行输出已完成。你可以设想,处理错误是一个重要的任务,并且async/await允许我们使用try/catch的相同方式处理异步和同步代码的错误,大大简化了我们处理错误的工作量,让代码更加简洁。

用async/await改写上篇文章Promise的例子

上篇文章「JavaScript基础」Promise使用指南的最后,我们使用Promise的方法改写了基于回调的例子,本文的最后,我们将用今天学到的内容 async/await改写这个例子, 如何实现呢,代码如下:

const fs = require('fs'); 
const path = require('path'); 
const postsUrl = path.join(__dirname, 'db/posts.json'); 
const commentsUrl = path.join(__dirname, 'db/comments.json'); 
//return the data from our file 
function loadCollection(url) { 
 return new Promise(function(resolve, reject) { 
 fs.readFile(url, 'utf8', function(error, data) { 
 if (error) { 
 reject('error'); 
 } else { 
 resolve(JSON.parse(data)); 
 } 
 }); 
 }); 
} 
//return an object by id 
function getRecord(collection, id) { 
 return new Promise(function(resolve, reject) { 
 const data = collection.find(function(element){ 
 return element.id == id; 
 }); 
 resolve(data); 
 }); 
} 
//return an array of comments for a post 
function getCommentsByPost(comments, postId) { 
 return comments.filter(function(comment){ 
 return comment.postId == postId; 
 }); 
} 
async function getPost(){ 
 try { 
 const posts = await loadCollection(postsUrl); 
 const post = await getRecord(posts, "001"); 
 const comments = await loadCollection(commentsUrl); 
 const postComments = await getCommentsByPost(comments, post.id); 
 console.log(post); 
 console.log(postComments); 
 } catch (error) { 
 console.log(error); 
 } 
} 
getPost();

和Promise的方式相比,async/await 的实现方式是不是更直观更容易理解呢,让我几乎能用同步的方式编写异步代码。

结束语

本节内容就介绍到这里,我们学会了如何使用 async/await 的使用,并且学会了如何与Promise相关API进行结合,async/await 让我们以同步的方式更容易的编写异步代码,大大降低了编写异步函数的难度。

更多精彩内容,请微信关注”前端达人”公众号!

一部分:HTML简介

什么是HTML?

HTML代表超文本标记语言(Hypertext Markup Language)。它是一种用于构建网页的标记语言。HTML文件包含一组标签,这些标签用于定义网页的结构和内容。浏览器读取HTML文件,并根据标记中的指示呈现网页内容。

HTML的主要作用是定义文本内容、图像、链接和其他媒体的排列方式,并提供交互元素,例如表单和按钮。

HTML的基本结构

每个HTML文档都应该遵循以下基本结构:

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <!-- 内容在这里 -->
</body>
</html>

让我们逐步解释这个结构:

  • <!DOCTYPE html>:这是文档类型声明,它告诉浏览器正在使用的HTML版本。<!DOCTYPE html>表示使用HTML5。
  • <html>:HTML文档的根元素。所有其他元素都包含在<html>标签内。
  • <head>:包含与文档相关的元信息,如页面标题、字符集声明和外部样式表链接。
  • <title>:定义网页的标题,显示在浏览器标签页上。
  • <body>:包含网页的主要内容,如文本、图像和其他媒体。

HTML标签和元素

HTML标签是由尖括号括起来的名称,例如<p>表示段落,<img>表示图像。标签通常成对出现,有一个开始标签和一个结束标签。例如:

<p>这是一个段落。</p>

<p>是开始标签,</p>是结束标签,文本位于两个标签之间。标签定义了元素的类型和结构。

有些HTML标签是自封闭的,不需要结束标签,例如<img>用于插入图像。

HTML注释

在HTML中,你可以使用注释来添加说明性文字,注释不会在浏览器中显示。HTML注释使用<!--开头和-->结尾,如下所示:

<!-- 这是一个注释 -->

注释通常用于添加文档说明、调试代码或标记未来的修改。

第二部分:HTML基本元素

文本

HTML中的文本通常包含在段落、标题、列表等元素中。以下是一些常见的文本元素:

  • <p>:定义一个段落。
  • <h1><h6>:定义标题,<h1>是最高级别的标题,<h6>是最低级别的标题。
  • <strong>:定义强调文本,通常以粗体显示。
  • <em>:定义强调文本,通常以斜体显示。
  • <a>:定义超链接,允许用户点击跳转到其他页面。

示例:

<p>这是一个段落。</p>
<h1>这是一个标题</h1>
<p><strong>这是强调文本。</strong></p>
<p><em>这是斜体文本。</em></p>
<p>访问<a href="https://www.example.com">示例网站</a></p>

图像

要在网页中插入图像,可以使用<img>标签。它是一个自封闭标签,需要指定图像的src属性来指定图像文件的路径。

示例:

htmlCopy code
<img src="image.jpg" alt="图像描述">
  • src:指定图像文件的路径。
  • alt:提供图像的替代文本,用于无法加载图像时的文字描述。

链接

通过使用<a>标签,可以在网页中创建链接。链接通常包含在文本或图像中,并使用href属性指定目标URL。

示例:

<a href="https://www.example.com">访问示例网站</a>
  • href:指定链接的目标URL。

列表

HTML支持有序列表(<ol>)、无序列表(<ul>)和定义列表(<dl>)。

无序列表

无序列表使用<ul>标签定义,每个列表项使用<li>标签。

示例:

<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
</ul>

有序列表

有序列表使用<ol>标签定义,每个列表项使用<li>标签。

示例:

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

定义列表

定义列表使用<dl>标签定义,每个定义项目使用<dt>标签定义术语,使用<dd>标签定义描述。

示例:

<dl>
    <dt>术语1</dt>
    <dd>描述1</dd>
    <dt>术语2</dt>
    <dd>描述2</dd>
</dl>

第三部分:HTML表单

HTML表单允许用户与网页进行交互,提交数据。以下是HTML表单的基本元素:

<form>元素

<form>元素用于创建表单,可以包含文本字段、复选框、单选按钮、下拉列表等。

示例:

<form action="submit.php" method="post">
    <!-- 表单元素在这里 -->
</form>
  • action:指定表单数据提交的目标URL。
  • method:指定提交方法,通常是"post"或"get"。

输入字段

输入字段用于接收用户输入的数据,常见的输入字段类型包括文本框、密码框、单选按钮、复选框等。

文本框

文本框使用<input>标签,type属性设置为"text"。

示例:

<input type="text" name="username" placeholder="用户名">
  • type:指定字段类型。
  • name:指定字段的名称。
  • placeholder:设置文本框的占位符文本。

密码框

密码框使用<input>标签,type属性设置为"password"。

示例:

htmlCopy code
<input type="password" name="password" placeholder="密码">

单选按钮

单选按钮使用<input>标签,type属性设置为"radio"。

示例:

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
  • name:指定单选按钮组的名称。
  • value:指定每个选项的值。

复选框

复选框使用<input>标签,type属性设置为"checkbox"。

示例:

<input type="checkbox" name="subscribe" value="yes">订阅新闻

下拉列表

下拉列表使用<select><option>标签创建。<select>定义下拉列表,而<option>定义选项。

示例:

<select name="country">
    <option value="us">美国</option>
    <option value="ca">加拿大</option>
    <option value="uk">英国</option>
</select>
  • name:指定下拉列表的名称。
  • 每个<option>标签表示一个选项,使用value属性定义选项的值。

第四部分:HTML样式和CSS

HTML用于定义网页的结构和内容,但要使网页看起来更吸引人,需要使用CSS(层叠样式表)。CSS允许你定义字体、颜色、布局等样式。

内联样式

可以在HTML元素内部使用style属性来定义内联样式。

示例:

<p style="color: blue; font-size: 16px;">这是一个蓝色的段落。</p>

外部样式表

外部样式表将样式规则保存在独立的CSS文件中,并通过<link>标签将其链接到HTML文档。

示例(style.css):

/* style.css */
p {
    color: blue;
    font-size: 16px;
}

在HTML中链接外部样式表:

<link rel="stylesheet" type="text/css" href="style.css">

这使得可以在整个网站上共享相同的样式。

总结

HTML是构建现代网页的基础。通过学习HTML的基本语法和元素,你可以创建吸引人且功能强大的网页。无论是文本、图像、链接还是表单,HTML提供了丰富的工具来呈现内容和实现用户交互。

这篇文章提供了HTML的基础知识,但HTML是一个广泛的主题,还有许多高级特性和技巧等待你探索。希望这篇文章对你入门HTML有所帮助,让你能够开始创建自己的网页。继续学习和实践,你将成为一个熟练的网页开发者。

我们开发系统的时候,可能会接到这样的需求:不要让用户复制页面上的文字或者图片,不要让用户调试我们的页面,更甚至也不要让用户进行打印操作等等。

听起来是不是让人很头大,这咋实现啊?这有必要吗?这能禁住么?

如果你没做过这些,或者没接到过这样的需求,那你也应该看到过某个网站做了一些这样的措施。

既然要做,我们就得想方案,先来看看禁止复制都有哪些方法。

禁止复制

假设我们有这样一段代码:

<div style="padding-left: 56px;">
  <textarea rows="5" cols="33"></textarea>
</div>
<pre>
  海客谈瀛洲,烟涛微茫信难求,

  越人语天姥,云霞明灭或可睹。

  天姥连天向天横,势拔五岳掩赤城。

  天台四万八千丈,对此欲倒东南倾。

  我欲因之梦吴越,一夜飞度镜湖月。

  湖月照我影,送我至剡溪。
  </pre>

接下来就通过这个例子来论述我们的方案:

x效果

  1. 通过user-select:none

这是一个css属性,标识了元素及其子元素的文本不可被选中,因此设定之后,文本将不能够被选中,因此也就不能复制:

<pre style="user-select: none;">
  海客谈瀛洲,烟涛微茫信难求,

  越人语天姥,云霞明灭或可睹。

  天姥连天向天横,势拔五岳掩赤城。

  天台四万八千丈,对此欲倒东南倾。

  我欲因之梦吴越,一夜飞度镜湖月。

  湖月照我影,送我至剡溪。
  </pre>

我们在这段文本上,加上这个样式。

效果

可以看到,文字压根就不能选择,从鼠标形状也能看出来。

  1. 通过拦截copy操作

由于用在进行复制操作的时候,会触发copy事件,我们可以通过监听它来做一些处理,使得复制的行为发生改变:

<div>
  <div style="padding-left: 56px;">
    <textarea rows="5" cols="33"></textarea>
  </div>
  <pre id="content">
    海客谈瀛洲,烟涛微茫信难求,

    越人语天姥,云霞明灭或可睹。

    天姥连天向天横,势拔五岳掩赤城。

    天台四万八千丈,对此欲倒东南倾。

    我欲因之梦吴越,一夜飞度镜湖月。

    湖月照我影,送我至剡溪。
  </pre>
</div>
<script>
  let c = document.getElementById('content')
  c.removeEventListener("copy", copyFilter)
  c.addEventListener("copy", copyFilter)
  function copyFilter(e) {
    let cp = e.clipboardData || window.clipboardData
    if(!cp) {
      return
    }
    let text = window.getSelection().toString()
    if(text) {
      e.preventDefault()
      cp.setData("text/plain", "你复制了一段魔法")
    }
  }
</script>

先获取到我们要禁止复制的元素,然后给它添加一个copy的事件监听,在添加监听之前,要先移除一下,这样是为了避免局部刷新的时候重复添加,然后我们通过copyFilter函数来对这次操作进行处理。

先获取剪贴板对象,如果当前事件对象里不存在,那就从window里面取,然后我们通过getSelection再拿到选取的内容,因为我们对剪贴板对象进行修改,所以要阻止默认行为,然后把剪贴板的内容重新赋值,可以是示例中那样的一段文字,也可以设置为空,甚至是任意其他内容,然后我们就可以看到产生的效果了:

效果

虽然能复制文本,但是由于我们拦截了复制操作,更改了它的行为,因此再粘贴的时候就变成了我们更改的样子,也做到了禁止复制的功能。

这种方式对于使用快捷键或者右键的方式都是有效的。

  1. 通过拦截cut操作

这种情况主要是在可编辑区域,比如文本框、文本域、设置为contenteditable的元素等,用户可以对文字进行剪切操作,虽然上面禁止了复制,但是剪切是另一个操作,不拦截的话还是相当于能复制出来。

copy和cut只是触发的事件不同而已,但是它们都是执行相同的逻辑处理:

<div>
  <div style="padding-left: 56px;">
    <textarea rows="5" cols="33"></textarea>
  </div>
  <pre id="content" contenteditable>
    海客谈瀛洲,烟涛微茫信难求,

    越人语天姥,云霞明灭或可睹。

    天姥连天向天横,势拔五岳掩赤城。

    天台四万八千丈,对此欲倒东南倾。

    我欲因之梦吴越,一夜飞度镜湖月。

    湖月照我影,送我至剡溪。
  </pre>
</div>
<script>
  let c = document.getElementById('content')
  c.removeEventListener("cut", copyFilter)
  c.addEventListener("cut", copyFilter)
  function copyFilter(e) {
    let cp = e.clipboardData || window.clipboardData
    if(!cp) {
      return
    }
    let text = window.getSelection().toString()
    if(text) {
      e.preventDefault()
      cp.setData("text/plain", "你复制了一段魔法")
    }
  }
</script>

这里我为了方便,给元素添加了contenteditable属性,让它变成可编辑的,copyFilter函数没有变化,我们只是添加了一个剪切事件的监听,然后它们的处理函数都是copyFilter。看下效果:

效果

可以看到,首先我们对文字进行剪切,没有出现预期的效果,这时因为我们在代码里面对剪切进行了拦截,并阻止了它的默认行为,然后我们在粘贴的时候,文字也改变成我们设置的了。

  1. 通过媒体查询控制打印

虽然我们可以通过上面的几种方法禁止在页面上复制,但是用户也可能开启打印预览模式,在这种情况下,也是可以进行复制的,我们要想对打印页面进行一些控制,那么就要用到媒体查询,先看下打印的样子:

效果

虽然我们做了限制,但是在打印页面没有生效,现在我们针对这个场景更改一下代码:

@media print {
  html {
    display: none;
  }
}

通过添加上面这个样式规则,我们能够使页面在打印的时候,内容隐藏起来,这样就无法进行复制了:

效果

能够看到,点击打印的时候,预览页面一片空白,,这样就禁止了在打印页面进行复制的操作。当然了,你其实也可以设置其他的样式属性来做些控制,但要记住写在打印的媒体查询里面,只有这样才会在打印页面生效。

  1. 通过伪元素覆盖内容

还有一种方式就是,通过设定一个伪元素,让它全面覆盖文本内容,这样鼠标就不能选到实际的文本,改造一下代码:

.content {
  position: relative;
}
.content::before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
<pre id="content" class="content">
  海客谈瀛洲,烟涛微茫信难求,

  越人语天姥,云霞明灭或可睹。

  天姥连天向天横,势拔五岳掩赤城。

  天台四万八千丈,对此欲倒东南倾。

  我欲因之梦吴越,一夜飞度镜湖月。

  湖月照我影,送我至剡溪。
</pre>

现在就不能在元素上面选中文字了,不过用户也可能还有一些操作,比如在内容区域外面ctrl+a全选,或者在外面拖动鼠标来全选,如果是这种情形,那么我们可以通过监听键盘和鼠标事件来禁止全选等操作。

  1. 通过监听鼠标和键盘事件

由于用户有很多种操作的方式,键盘全选、鼠标全选、键盘右键、鼠标右键等等,我们如果穷举的话,情况太多了,因此我们只监听鼠标按下和抬起事件,以及键盘的按下事件:

document.removeEventListener("mousedown", haveSelect)
document.addEventListener("mousedown", haveSelect)
document.removeEventListener("mouseup", haveSelect)
document.addEventListener("mouseup", haveSelect)
document.removeEventListener("keydown", haveSelect)
document.addEventListener("keydown", haveSelect)
function haveSelect() {
  window.getSelection().removeAllRanges()
}

主要就是在removeAllRanges方法上面,能够在触发上面事件的时候,将所选区域清空,也就是不管你选没选,咋选的,反正就是你只要进行了操作,那我就那可能选择的区域给你清空,这样你就啥也干不了了。

效果

好,这样就可以啦,无论怎么选,即使出现了选区,但是只要你再按了鼠标或者键盘,那么选区就会直接消失,就能达到不能复制的效果,因为你发现啥都做不了。

这里额外说明一下,对于事件的监听,一定要用addEventListener来实现,因为它会将多个绑定的事件都添加上去,当触发的时候就会按照绑定的顺序进行执行,如果是用赋值的方式,那么后面的会覆盖前面的,而且赋值的方式很容易被篡改,可以很轻松的让你的绑定函数不能执行从而失效,而使用addEventListener就不会被人为覆盖,只能通过绑定的函数句柄来手动移除,也就是说要移除的时候,必须使用跟绑定时使用同一个函数才行。

通过CSS的方式禁止复制,可以很容易的被用户解除,只能是设置的稍微复杂一点,增加难度。而通过JS的方式禁止复制,也可以通过禁用页面JavaScript代码来解除,因此我们可以将内容通过js来渲染,这样如果页面禁用了js,那么内容也不会渲染。

禁止调试

对于禁止调试,主要是指用户打开控制台,控制台也就是开发者工具,我为了方便称之为控制台,想要对页面进行调试时,我们做一些处理,阻止这种行为,最大可能的拦截通过控制台对系统的调试。
主要的方法有几种,由于打开控制台是浏览器提供的调试功能,因此我们没法拦截打开操作,即使通过事件监听不允许快捷键这样做,但是也可以通过其他方式进行打开,因此我们的主要关注点就在于打开控制台之后,我们能做哪些事情来限制用户行为。

  1. 禁用快捷键

打开控制台的快捷键主要有F12和ctrl+shift+i,我们先把这俩给禁用了:

document.removeEventListener("keydown", disableDevShortcut)
document.addEventListener("keydown", disableDevShortcut)
function disableDevShortcut(e) {
  console.log(e)
  if(e.keyCode === 123) {
    e.preventDefault()
  }else if(e.keyCode === 73 && e.ctrlKey && e.shiftKey) {
    e.preventDefault()
  }
}

这样在使用这两个快捷键的时候,页面没有任何反应,控制台也不会唤起,因为我们阻止了它们的默认行为。

  1. 禁用右键的检查功能

除了通过快捷键,还可以使用右键的方式,并点击检查也会调出控制台。

效果

这种情景,我们可以通过禁止在页面上使用右键的方式,来阻止打开控制台:

document.removeEventListener("contextmenu", cancelContextmenu)
document.addEventListener("contextmenu", cancelContextmenu)
function cancelContextmenu(e) {
  e.preventDefault()
}

现在就不能通过右键打开控制台了,但是相应的整个右键功能也都不能使用了。

  1. 设置无限断点

如果用户最终打开了控制台,比如通过在浏览器的更多功能中来打开的话,那么我就需要采取其他的措施,其中之一就是给代码设置无限断点,因为断点只在控制台打开的时候才会发生作用,从而不必担心非调试模式下的程序正常运行。

无限断点的主要思路就是利用定时器等手段,频繁的触发断点效果,使得不能轻松的调试程序,先看下代码:

;(() => {
  function breakDebugger() {
    if(new checkDebugger().check) {
      breakDebugger()
    }
  }
  function checkDebugger() {
    const now = new Date();
    eval('(function () {debugger;false;})()')
    const dur = Date.now() - now
    if(dur < 5) {
      return {check: false}
    }else {
      return {check: true}
    }
  }
  setInterval(() => {
    eval('(function () {debugger;true;})()')
    breakDebugger()
  }, 500)
})()

我们利用一个立即执行的自执行函数,来使我们的代码被封装在一个固定块内,不与其他部分有任何影响。

这里主要做了两步:

第一步设置一个重复执行的定时器,其中包括了一个断点和一个函数调用。

第二步通过函数来递归调用断点,主要使用了实例化对象的方式和时间差的判断。

这样做的主要作用就是在设置无限断点的同时,也能够让每次的断点都是被重新生成的,看下效果,一目了然:

效果

发现没有,我们通过这种方式,只要打开了控制台,那么就会进入到无限断点的循环中,使得不能做任何其他事情,而且每个断点的生成都会开辟一个新的虚拟运行环境,这种情况下,只有关闭控制台,才能结束断点。

即使使用右键选择Never parse here,也毫无作用,虽然可以通过Deactive breakpoints按钮来彻底禁用断点,就是下面这个按钮:

按钮

但是,如果这样做的话,那么用户也就同时失去了调试其他代码的能力。

况且,我们接下来还会介绍其他的控制手段,可以配合着使用。

  1. 监测控制台开启

我们如果能有一种手段,可以知道用户开启了控制台,换句话说只要控制台被打开,就通知我们或者被我们监测到,那么我们就可以执行一些控制手段,这种效果肯定是很理想的,遗憾的是还没有这种api暴露给我们去让我们能够这样做。

不过我们可以通过其他的方式,利用既有的一些能力来实现这一点,这里我还是使用循环定时器,来不断的去嗅探用户是否开启了控制台,直接看代码:

;(() => {
  setInterval(function() {
    let foo = document.createElement('a')
    let a1 = +new Date()
    console.table(foo)
    let a2 = +new Date()
    if(a2 - a1 > 1) {
      location.href = 'about:blank'
    }
    console.clear()
  }, 500)
})()

同样,通过一个自执行函数,我们开启了一个循环定时器,然后在回调方法里面,我们就去实现上面的目标,也是分为了两步:

第一步创建一个a元素,然后通过表格的形式将它打印出来,并记录下消耗的时间。

第二步判断耗时的长短来控制是否跳转到空白页,然后清空控制台。

这种方式主要是利用了console.table的特性,它会将元素以表格的形式输出到控制台,大概就像下面的样子:

效果

由于太多了,我就没有全部截下来,如果没有打开控制台的话,使用console.table输出我们创建的a标签是很快的,有多快呢,就是js执行一条语句的速度,所以打印a1和a2的时间间隔非常短,几乎为0,因为他们快到差不多是同时执行的,给大家打印看一下:

效果

我们先不打开控制台,等输出完毕再打开,很清楚的发现,我们没打开控制台的时候,输出的a就是它标签,而且时间间隔是0毫秒。

现在我们打开控制台的时候刷新一下页面,看看控制台的输出:

效果

这次就变成了以table的形式输出a元素,而且它的耗时明显增多,不再是0毫秒,而是耗费了10毫秒,虽然打开控制台的时候多次刷新页面,每次输出的毫秒数是不同的,但是跟关闭控制台的时候输出的耗时差距非常明显,因此我们就可以在这个上面做文章。

我在上面的代码中假定了,只要是大于1毫秒的耗时,那就表示用户打开了控制台,然后我们就把页面给跳转到空白页,当然了你也可以做一些任何你想做的操作,比如弹出一个提示,或者把body内容置空等等等等。

回到我们上面的代码,看一下它实际发生的作用和带给我们的效果:

效果

哈哈,古德古德,平时浏览一切正常,只要刚一打开控制台,瞬间页面就被跳转走了,什么都干不了。这样我们就通过这种方式,达到了限制打开控制台的目的,也就是在当前页没法调试,一打开就跳转。

这种办法由于是绕路实现的,那么你可能会有疑问,它稳定吗?会不会误判,我可以对它绝对放心吗?

理论上来说,通过输出的执行时间是不太能精确掌握的,但是我们可以再做一些其他的措施来逼近真相:

;(() => {
  setInterval(function() {
    let foo = document.createElement('a')
    let a1 = +new Date()
    console.table(foo)
    let a2 = +new Date()
    if(a2 - a1 > 1) {
      let time = 0
      for(let i = 0; i < 10; i++) {
        let a1 = +new Date()
        console.table(foo)
        let a2 = +new Date()
        time += a2 - a1
      }
      if(time > 20) {
        location.href = 'about:blank'
      }
    }
    console.clear()
  }, 500)
})()

我又改造了一下判断的逻辑,当发现输出耗时为2毫秒甚至更多的时候,我立马再进行一次真伪判断,也就是说,万一由于其他的影响,导致我第7行的代码误判了,那么我再同步执行一个循环,连续输出10次,把他们的耗时总和计算出来,然后判断是否大于20毫秒,如果还是耗时过高的话,那么就可以非常肯定的知道用户是打开了控制台,这个时候就可以放心的做一些处理了。

最后

其实限制用户行为的方法有很多很多,上面列出了一些主要的,多种方法还是要结合着使用。你也可以自由发挥,多使用一些其他的手段,也会增加用户复制或者调试的难度,比如防止用户重写console的方法,或者清除所有定时器等。

甚至也可以将你的内容绘制到canvas上面来防止复制,多加一些js的处理工作,防止禁用js的时候,我们的代码不生效,只有在js可用的时候再去渲染内容等。也可以在综合考虑的情况下加上代码混淆、代码加密等措施。

话说回来,大家都是同路人,何必相互为难,哈哈哈,不过提这个需求的人也着实会为难我们,既然提了那就尽力去做,能做到什么程度,只能说是尽量做到极致。

希望上面的内容能够帮助到你,也希望能够对你有所启发。

谢谢