随笔分类 - JavaScript
摘要：pdf.js 主要用于在网页上展示 pdf 文档，是一个用户解析和渲染 pdf 文件的开源库。本文主要介绍如何在 react 中使用 pdf.js 解析 pdf 文件，并最终转换成图片形式。 一、 安装 pdf.js 库文件 要在 react 中使用 pdf.js，首先需要安装对应的依赖。对此 pd
阅读全文
摘要：html2pdf 是基于 html2canvas 和 jsPDF 开发的将 html 页面导出成 pdf 文件的插件，通过配置 opt 相关选项，可以自定义导出的选项，最近在使用 html2pdf 的时候，发现页面中的 img 图片导出的图案是空白的，查阅了相应的 issue 发现可以通过相关配置解
阅读全文
摘要：之前写文章介绍了使用 js-xlsx 实现导入 excel 的功能，现在再介绍一下如何使用 js-xlsx 进行 excel 导出。 【实现步骤】 1. 首先安装依赖 2. 在组件中导入 xlsx 3. 提供导出按钮，编写导出方法 注：要导出数据的 json 格式应该是这样的（每个对象代表表格中的一
阅读全文
摘要：介绍 SheetJS js-xlsx 是一款能够读写多种格式表格的插件，浏览器支持良好，并且能在多个语言平台上使用，目前在 github 上有 12602 个 star， 刚好项目中遇到了前端解析 excel 的需求，所以就尝试使用了一下，这里将使用方法和遇到的问题简单记录一下。 插件地址：http
阅读全文
摘要：最简单的结构 数据流图 [https://dvajs.com/guide/introduce-class.html#数据流图-1] Model 对象的属性 call 和 put Dva 提供多个 effect 函数内部的处理函数，比较常用的是 call 和 put。 call：执行异步函数 put：
阅读全文
摘要：1. 生命周期和相关函数 2. this.setDate setDate会更新 this.data 中对应的值（同步的过程）并且把数据从逻辑层传递给渲染层，从而达到更新页面的目的（异步的过程）回调函数在setDate 对界面渲染完成后触发 不要直接修改 this.data （注意和 vue 中修改数
阅读全文
摘要：【简介】 遍历器/迭代器。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。这种数据结构是“可遍历的”（iterable）。 如何判断是否可遍历? 【作用】 1. 为各种数据结构，提供一个统一的、简便的访问接口； 2. 使得数据结构的成员能够按某种次序排列； 3. ES6 创造了一种
阅读全文
摘要：第一部分： 作用域和闭包 一、作用域 1. 作用域：存储并查找变量的规则 2. 源代码在执行之前（编译）会经历三个步骤： 分词/此法分析：将代码字符串分解成有意义的代码块（词法单元） 解析/语法分析：将词法单元流转换成抽象语法树（AST） 代码生成：将抽象语法树转换成可执行代码 3. LHS查询:
阅读全文
摘要：【要求】 一个div，配合 css3 或者 js 实现红绿灯切换的效果。 【思路】 使用 css3，要实现红绿灯颜色的变换必然要用到 animation 动画，通过 keyframes 控制颜色的渐变效果。 使用 js，则需要使用定时器，在定时器的方法中改变 div 的类名或者直接修改样式，来控制颜
阅读全文
摘要：看到一道笔试题: 这道题目中涉及到 map 和 parseInt 函数的运用，如果对这两个函数的理解不充分的话，是很难思考出正确的结果的。 下面就通过这道题目对 map 和 parseInt 函数作一个简单的理解和分析： 【参数解析】 item: callback 的第一个参数，数组中正在处理的当前
阅读全文
摘要：highlight 是一款简单易用的 web 代码高亮插件，可以自动检测编程语言并高亮，兼容各种框架，可以说是十分强大了。下面就简单介绍一下如何使用这款插件。 两种使用方式： 1. 手动选择主题，官网下载highlight 库文件，并在页面中分别引用 js 和 css 文件。 2. 使用 cdn 链
阅读全文
摘要：看了知乎上的话题 如何才能通俗易懂的解释javascript里面的‘闭包’？，受到一些启发，因此结合实例将回答中几个精要的答案做一个简单的分析以便加深理解。 1. "闭包就是跨作用域访问变量。" 【示例一】 在 getName 函数中获取 name，首先在 getName 函数的作用域中查找 nam
阅读全文
摘要：在全局作用域中声明变量加 var 关键字和不加 var ，js 引擎都会将这个变量声明为全局变量，在实际代码运行时，两种声明方式的变量的行为也几乎是一致的。但是在全局作用域下是否声明一个变量的时候加 var 和不加 var，js 引擎具体执行了哪些操作呢，其效果又是否完全一致？ 首先我们看在一个函数
阅读全文
摘要：浏览器扩展允许我们编写程序来实现对浏览器元素（书签、导航等）以及对网页元素的交互， 甚至从 web 服务器获取数据，以 Chrome 浏览器扩展为例，扩展文件包括： 一个manifest文件(主文件,json格式) 至少一个HTML文件(主题可以没有HTML文件) JavaScript文件 (可选，
阅读全文
摘要：最简单的 webpack 配置 webpack 命令配置 在 package.json 中添加代码 *package.json中的script会按照一定顺序寻找命令对应位置，本地的 node_modules/.bin 路径就在这个寻找清单中，所以无论是全局还是局部安装的Webpack，都不需要在前面
阅读全文
摘要：1. 块级作用域 let 取代 var —— let 只在声明的代码块内有效，而且不存在变量提升的效用 const 取代 let —— const 比较符合函数式编程的思想，运算不改变值，只是新建值；JS 编译器会对 const 进行优化，使用 const 有利于提高程序的运行效率 所有的函数都应该
阅读全文
摘要：await 是 async wait 的简写, 是 generator 函数的语法糖。 async 函数的特点： async 声明一个方法是异步的，await 则等待这个异步方法执行的完成 await 只能出现在 async 函数中, 用在 async 外或者普通函数内都会报错 async函数返回一
阅读全文
摘要：SetES6提供的数据结构，类似于数组，但是成员的值都是唯一的。(提供了一种数组去重的方法) Set 内部判断两个值是否相同使用的是 'Same-value equality'，类似于 但是 NaN 等于自身 Set 实例的属性和方法 Set.prototype.constructor: 构造函数，
阅读全文
摘要：扩展运算符 ... 将数组转化成用逗号分隔的参数序列 * 扩展运算符背后调用的是遍历器接口（Symbol.iterator），如果一个对象没有部署这个接口，就无法转换。 应用 1. 合并数组 2. 将字符串转化成数组 3. 与解构赋值结合(如果用于数组赋值，只能放在参数的最后一位，否则报错) Arr
阅读全文
摘要：Promise 是 ES6 提供的一种异步编程的解决方案: 将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数（解决异步函数回调地狱的问题）。Promise 对象保存着异步操作的结果。 首先看异步的概念，这在《ECMAScript6入门》中介绍的很好： 所谓"异步"，简单说就是一个任务不是
阅读全文