随笔分类 - JavaScript
浏览器脚本语言
摘要：前言 由于工作需要，需要做一版在手机上查看的H5的广告页。广告页面基本都是一块内容占满一屏，然后上滑下滑就翻页，所以需要一个这样的翻页功能。 代码实现 废话不多说，直接上代码 /** * 一个放置多个满屏页面的容器，支持上下滑动 */ // ScrollBox.jsx import React, {
阅读全文
摘要：前言 基于前面自己手动搭建的React项目，我把项目分成了四种，一种什么都不带的空项目，一种带多级路由的空项目，一种带状态管理的空项目，一种带多级路由以及状态管理的空项目。这样的话每次用的时候根据需要去获取自己想要的模板，但是往往还要去github上去拷贝，感觉很不方便，所以就想到了要做一个自动生成
阅读全文
摘要：场景 昨天试了一下爬取根据网页查询参数的不同而变化的页面，今天来试试爬取单页面应用，url不发生变化，只是页面内的按钮点击导致数据的重新请求。 主要实现思路 利用Puppeteer可以模拟用户点击操作，等待接口返回等各种优秀的API，可以保证在数据结束后完成页面数据提取。 代码实现，以开源众包的页面
阅读全文
摘要：场景 很多长图大图需要裁剪成多张小图 用到的npm包 jimp，用于Node的图像处理库，完全使用JavaScript编写，零本地依赖项。 代码实现 const Jimp = require('jimp'); /** * url 目标图片，需要裁减的图片 * files 裁剪过后的文件路径，根据文件
阅读全文
摘要：Puppeteer简单介绍 Puppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包,用来模拟 Chrome 浏览器的运行。 它的功能： 网页截图或者生成 PDF 爬取 SPA 或 SSR 网站 UI 自动化测试，模拟表单提交，键盘输入，点击等行为 捕获网站的时间
阅读全文
摘要：起因 偶然间看了一下Angular的服务的依赖注入和rxjs的观察者流的使用，觉得还有点意思，就想在React中实现一下类似的。 准备工作 一个空的React项目。 安装rxjs，npm install rxjs --save; 实现思路 首先是根据业务需求，将需要抽离的全局状态使用不同的服务类进行
阅读全文
摘要：添加redux拢共分几步？ 拢共分四步 新建action 新建reducer 新建store 使用provider包裹 新建action 通常来说，action需要返回一个通用的格式的数据，可以根据自己业务体量的不同，定义不同的数据结构，我这边是这样定义的 // 同步的action const te
阅读全文
摘要：基于 和`mediaDevices`实现的原生js的录音功能
阅读全文
摘要：有时候需要自定义城市选择器的时候，又不想调用别人提供的api来获取城市json的时候就可以自己先预定义好 使用代码块包裹起来就渲染不出来了，数据量太大了，只能将就着这样看了 [ { "label": "北京市", "id": 11, "children": [ { "label": "市辖区", "
阅读全文
摘要：有时候需要防止用户误操作，所以需要在用户关闭页面前进行相关的提示 突然想起来这个场景就记一下
阅读全文
摘要：一些特殊效果 javascript series: [{ ... // 设置折线图下的渐变色 areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(
阅读全文
摘要：添加水印的思路 1. 通过动态添加水印的 ，平铺在页面上，给 的`point event none`，添加一个透明度就可以了，这种实现比较简单，但是效果可能不是很好。 2. 通过 绘制对应的水印图形以及文字，然后转成 编码的地址，附加在需要添加水印的页面的根元素上，作为背景图。 第二种思路的实现如下
阅读全文
摘要：有时候需要在自己的网站上使用第三方搜索引擎来搜索站外资源的时候，这个时候就需要使用到第三方的搜索引擎的API了。 首先是搜索关联关键词的 ，这几个接口通过 的形式可以获取到对应的联想词，可以做搜索提示。 再就是获取搜索结果的接口，必应搜索提供相关的接口，不过只有七天的试用期，后面就要收费了 百度搜索
阅读全文
浙公网安备 33010602011771号