《JavaScript权威指南》 原书第7版
Javascript经典之作，中文版犀牛书，在很多工程师心目中有着至高无上的地位。
一、作者简介
David Flanagan从1995起就开始使用JavaScript并写作本书的第1版。他拥有麻省理工学院计算机科学与工程学位，目前是VMware的一名软件工程师。
二、内容简介
JavaScript是Web编程语言，也是很多软件开发者使用的编程语言。近25年来，这本畅销书一直是几十万JavaScript程序员必读的技术著作，本版已经更新到涵盖JavaScript的2020版。书中令人深思、富有启发性的示例随处可见。
这本“犀牛书”在很多工程师心目中有着至高无上的地位。如果你由于种种原因错过了它之前的版本，那一定不要再错过这一版了！
本书介绍JavaScript语言和由浏览器与Node实现的JavaScript API。本书适合有一定编程经验、想学习JavaScript读者，也适合已经在使用JavaScript但希望更深入地理解进而真正掌握这门语言的程序员。
本书的目标是全面地讲解JavaScript语言，对JavaScript程序中可能用到的重要的客户端API和服务器端API提供深入的介绍。本书篇幅较长，内容非常详尽，相信认真研究本书的读者都能获益良多。
三、学习目标
太经典不用多少，学就是了，学完还的时常复习。
四、知识导图
===================================
本人系列原创经典技术书单合集：
Java系列书单合集（5）：Java系列书单
Python系列书单合集（3）：Python系列书单
算法系列书单合集（4）：算法系列书单人工智能系列书单合集（9）：人工智能系列书单系统架构系列书单合集（6）：系统架构系列书单元宇宙系列书单合集（4）：元宇宙系列书单大数据系列书单合集（6）：大数据系列书单
持续更新中。
宝藏开源推荐：PDF.js – 无需下载和插件实现网页端PDF预览
在 Web 开发中，如何在网页中无缝展示 PDF 文件一直是个难题。传统方法往往要求用户下载文件或依赖浏览器插件，操作繁琐且用户体验不佳。而 Mozilla 的 PDF.js 项目提供了一个纯 JavaScript 的开源解决方案，使网页端 PDF 文件的直接预览成为可能，让用户无需下载、无需插件即可查看 PDF 文件。
本文将介绍 PDF.js 如何解决 PDF 文件在线预览的痛点，并带你快速掌握其使用方法。
网页中展示 PDF 文件的传统方法包括下载文件或依赖插件（如 Adobe Reader）。这些方法虽可行，但用户体验往往较差。例如：
- 下载 PDF：用户点击后必须先下载文件，再用本地应用打开。
- 依赖浏览器插件：虽然一些现代浏览器自带 PDF 查看功能，但不统一，且部分浏览器缺乏支持。
PDF.js 则完全基于 JavaScript 和 HTML5 Canvas 实现，可以在网页端直接渲染 PDF 文件，无需下载和插件，让用户获得更顺畅的浏览体验。
- 无需插件，跨平台兼容：PDF.js 是纯 JavaScript 实现，只要支持 HTML5 Canvas 的现代浏览器都能使用。
- 高渲染质量：支持 PDF 格式中的文本、图片和矢量图形，渲染效果清晰流畅。
- 模块化结构：开发者可以按需加载功能模块，减小体积，提高页面性能。
- 支持多页和交互功能：PDF.js 支持 PDF 文件的多页浏览、放大缩小等交互，提供出色的用户体验。
以下是快速集成 PDF.js 的步骤，帮助你轻松实现无插件的网页 PDF 预览。
PDF.js 提供了便捷的 CDN 资源，你可以直接在项目中引入：
在 HTML 中添加一个 <canvas> 元素，作为 PDF 渲染的目标容器。
使用 PDF.js 提供的 API 加载 PDF 文件并渲染到 Canvas 上。以下是一个简单的代码示例，将 PDF 文件的第一页渲染到指定的 Canvas 容器中：
以上代码示例会加载 PDF 文件的第一页并渲染到 HTML5 Canvas 上。你可以根据需求调整 scale 值来控制渲染清晰度。
PDF.js 提供了更丰富的功能模块，例如文本层（用于支持文本选择）、注释、缩略图和书签等。可以根据项目需求深入使用这些 API，详细文档请参考 PDF.js 官方文档。
PDF.js 的工作原理主要分为两个阶段：
- PDF 解析：使用 JavaScript 将 PDF 文件解析为 DOM 树结构，包含文本、图像、矢量图形等内容。解析后的数据被格式化，以便接下来的渲染操作。
- Canvas 渲染：解析完成后，利用 HTML5 Canvas API 将内容绘制到 Canvas 元素上。Canvas 支持丰富的图形绘制功能，能很好地展示 PDF 的复杂内容。
通过这种方式，PDF.js 可以高效地将 PDF 内容呈现在浏览器中，带来媲美本地应用的 PDF 查看效果。
PDF.js 是一个强大的网页 PDF 查看工具，让开发者无需下载文件或依赖插件，即可在网页中提供原生的 PDF 预览体验。通过快速集成 PDF.js，你的用户可以直接在浏览器中查看 PDF 文件，享受流畅的在线预览体验。如果你的项目中有 PDF 文件展示需求，不妨试试这个宝藏开源工具！
使用reveal.js制作精美的网页版PPT
作者： 徐小夕
转发链接：https://mp.weixin.qq.com/s/XHwOHf498t6ZNfDLiwZ6Xg
最近在做季度总结和技术分享,所以需要做个PPT, 来回顾这半年来的技术贡献. 但苦于mac上运行PPT那感人的流畅度, 成功的激起了笔者的强迫症, 所以索性想办法通过技术的手段来做个网页版PPT, 这个时候笔者发现了reveal.js: 一个使用 HTML 语言制作演示文稿的 Web 框架，支持插入多种格式的内容，并以类似 PPT 的形式呈现. 花了15分钟系统的调研了一下, 觉得基本满足技术分享类PPT的要求, 所以决定采用该方案来实现我的网页版PPT. 这里列一下笔者的技术调研方法论, 供大家参考:
所以笔者接下来大致按照以上几个衡量标准, 来带大家一起感受一下如何快速通过reveal.js实现一个极具动感的PPT.
首先笔者先来谈谈PPT的不足(非专业角度, 技术视角):
- PPT虽然强大，但占据了磁盘的大量空间，运行时内存占用也不小；而且在 mac上跑 PPT 来就像乘上了印度的绿皮小火车。随着 mac 的普及和动画技术的发展，诸如Keynote、Prezi 等新秀陆续出现，它们不仅轻量且可以实现各种炫目的动画效果.
- 制作需要花费大量时间, 受平台限制
所以对于不熟悉PPT套路的技术工作者来说, 往往很难快速制作出精美的PPT.
接下来我们再看看reveal.js的优势.
- reveal.js可以把 Markdown 文件转为类似 PPT 的演示文稿，轻快省力，减少排版上的时间，让演讲者更专于文字内容；同时，也获得 PPT 所不具有的灵活性
- 制作发布灵活、不限应用，不限平台, 只需修改或打开 HTML 文件
- 丰富的特性，支持过渡动画、代码高亮、视频背景、Markdown 语法、导出 PDF 等
- 极度轻量，占用空间和内存少
说了这么多revealjs的优点,接下来我们就来学习如何使用它吧.
作为一名前端工程师, 我们很容易把reveal.js集成到我们的vue或者react项目中, 但是作为演讲类型的项目,我们直接用最原始的方式实现即可,首先我们需要引入相关的文件,具体可参考官网所说的步骤去做: revealjs.com/. 最简单的使用方式如下:
这样通过短短几行代码, 我们就能实现一个两页的PPT.
当然我们还能实现更加自由的演示动画, 父子嵌套结构, 专场动画等. 接下来我们介绍几个核心API.
父子嵌套主要是一个PPT主题可能包含很多子主题, 要想实现父子主题分明的演示文档, 在reveal.js也很好实现, 只需要在section内部再包裹section标签即可. 代码如下:
效果如下图所示:
我们都知道技术类PPT肯定离不开代码, 我们在reveal.js中可以很容易的展示我们的代码,并且支持多种语言, 其框架底层集成了 业界比较有名的highlight.js. 使用方式如下:
Markdown是技术工作者常用的编写文档的工具, revealjs同样也支持使用Markdown的方式来编写PPT, 是不是很贴切? 具体方式如下:
revealjs支持对每一页幻灯片使用自定义背景(包括视频).我们只需要在section标签中使用data-background即可, 并且支持背景透明. 具体demo如下:
Backgrounnds一共有如下属性可以使用:
- data-background-image 当前页的背景图片地址
- data-background-size 背景的大小
- data-background-position 背景位置
- data-background-repeat 背景的重复方式
- data-background-opacity 背景透明度
- data-background-video 视频背景的地址
- data-background-video-loop 视频背景的循环模式
- data-background-iframe 背景为iframe的url地址
- data-background-interactive 是否能与iframe的内容交互
Fragments用来高亮或者渐进式的展现元素.每一个包含fragment类名的元素都被视为渐进的元素, 它们会通过点击下一步来依次呈现在幻灯片中.
reveal.js提供了很多种不同风格的主题, 我们只需要引入不同的css即可. 包括黑色(black), 白色(white), league, beige, 天空(sky), 夜晚(night)等主题.大家可以自行感受一下.
不同幻灯片进入页面的动画方式我们可以使用Transitions来设定. 以下是提供的几种默认转场动画:
- fade 淡出
- slide 滑出
- convex 凸面旋转
- concave 凹面旋转
- zoom 放大
具体demo实现如下:
导出PDF作为一个附加功能也算是比较贴心了,如果想了解使用方式可以参考
https://revealjs.com/pdf-export/
接下来我们就来实现一个动态的PPT demo, 供大家学习参考.
代码如下:
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
作者： 徐小夕
转发链接：https://mp.weixin.qq.com/s/XHwOHf498t6ZNfDLiwZ6Xg
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
