分类：JavaScript

使用puppeteer爬取网页数据实践小结

简单介绍Puppeteer

Puppeteer是一个Node库，它通过DevTools协议提供高级API来控制Chrome或Chromium。Puppeteer默认以无头方式运行，但可以配置为有头方式运行。Puppeteer中文”木偶”，很贴切，它可以使用node程序来模拟人操作浏览器的行为，比如点击某个按钮等。

Puppeteer可以做什么

在浏览器中手动执行的大多数操作都可以使用Puppeteer完成！例如：

  • 生成页面的屏幕截图和PDF。
  • 抓取SPA（单页面应用程序）并生成预渲染内容（即“SSR”（服务器端渲染））。
  • 自动化表单提交，UI测试，键盘输入等。
  • 创建最新的自动化测试环境。使用最新的JavaScript和浏览器功能直接在最新版本的Chrome中运行测试。
  • 捕获时间线跟踪 您的网站，以帮助诊断性能问题。
  • 测试Chrome扩展程序。

继续阅读“使用puppeteer爬取网页数据实践小结”

ECMAScript6新特性及ES5对比整理

这里整理ES6新特性以及跟ES5的对比用法

1.const 常量定义

const URL="https://zhangxuefei.site";

定义的常量不能被直接赋值修改，但是如果a=URL,那么a的值是可以修改的，如果PI是一个引用类型，那么对a的修改也会影响到URL

ES5定义如下：

Object.defineProperty(typeof global==="object"?global:window,"URL",{
 value:"https://zhangxuefei.site",
 enumerable:true,
 writable:false, //不能赋值
 configurable:false //不能delete
 });

 URL=2;
 console.log(URL);//https://zhangxuefei.site

继续阅读“ECMAScript6新特性及ES5对比整理”

写好js代码DOM和浏览器模式

写高效js代码的一些最佳实践：分解关注点。HTML:内容构建  CSS:样式呈现  JavaScript:行为交互。DOM操作是非常耗性能的，尽量遵循以下原则：

DOM访问遵循：①避免在循环里面访问DOM  ②把DOM元素引用赋值给一个局部变量来使用  ③使用选择器API()  ④缓存HTML元素的length

DOM操作遵循：DOM增删改操作会触发浏览器重绘（渲染）和回流（布局），尽量批量操作，构建大的DOM树，先在内存构建好了在添加。 继续阅读“写好js代码DOM和浏览器模式”

写好js代码重用及常见设计模式

谈到代码重用，首先想到的就是继承，GoF有这样的建议：对象组合优于继承。js继承通过原型来实现，基本实现如：function inherit(C,P){C.prototype=new P();}

或function inherit(C,P){var F=function(){};F.prototype=P.prototype;C.prototype=new F();} 继续阅读“写好js代码重用及常见设计模式”

正则小贴士（匹配URL，中文等）

匹配中文：[\u4E00-\u9FD5] 点击这里获取官网中文编码表

 

匹配一段文本中的URL

这个是群里面有人提的问题，我也试试。确实写这个花了两天时间琢磨。需求大概是这样的：

待匹配的文本如：“匹配URLhttps://zhangxuefei.site以及zhangxuefei.tophttp://www.zhangxuefei.top以及zhangxuefei.top/a以及zhangxuefei.top/a/b.html以及zhangxuefei以及https://zhangxuefei.site/a以及https://zhangxuefei.site/a/b.html以及//zhangxuefei.top/a/b.htmlhttps://zhangxuefei.top/等等” 继续阅读“正则小贴士（匹配URL，中文等）”

通过嵌套形式的闭包保持对象状态以及对象扩展

javascript中的基础类型（primitive）和字面值（literal）的区别

基础类型有这5种：Number，String，Boolean，null，undefined

字面值：一个可以代表具体类型的值（基础类型中的一种）

创建字面值：var str1=”Hello World”; var num1=123; var flag1=true;

创建基础类型：var str2=String(“Hello World”); var num2=Number(123); var flag2=Boolean(true); 继续阅读“通过嵌套形式的闭包保持对象状态以及对象扩展”

JavaScript基础之十三（DOM）

Document Object Model（DOM）

window对象下有一个document属性来指向Document对象，这个对象是API集合（DOM）的核心对象。所以常常说的DOM指的就是一堆API的集合，用来呈现和操作document的内容。有一个需要理解并记住的部分：HTML里面的所有元素对应DOM里面的DOM节点树结构。与节点层级相关的重要属性如下：

parentNode,childNodes,firstChild,lastChild,nextSibling, previousSibling,nodeType,nodeValue,nodeName

注意一点，这里所有的对象都包含元素和文本节点，有一个例外就是parentNode（只指向元素节点或null），实际使用中往往只需要获取元素节点。 继续阅读“JavaScript基础之十三（DOM）”

JavaScript基础之十二（window对象）

window对象在浏览器端JavaScript程序中扮演了核心角色，window对象有些重要的属性和方法需要熟悉。

setTimeout/setInterval

过一段时间执行一次或重复执行，如果设置setTimeout（fun1，0），并不表示fun1会马上执行，仍然会先把fun1放入调用的队列，在当前事件处理函数执行完毕，经过0秒调用。代码说明： 继续阅读“JavaScript基础之十二（window对象）”

JavaScript基础之十一（浏览器中的JavaScript）

JavaScript的执行

分为2个阶段：①document加载完毕，javascript代码会至上而下执行  ②第一个阶段完成以后进入第二个阶段——事件驱动的异步阶段：这个阶段浏览器会调用事件处理函数（当然这些函数都是在第一个阶段里面的），响应发生的事件（例如点击等）。

 

浏览器中的JavaScript线程模型

JavaScript核心语言并不包含任何线程机制，线程机制是浏览器提供的，浏览器会分配一个线程给JavaScript程序。JavaScript是一个单线程的，单线程意味着更加简单：例如两个事件处理函数不能同时被触发执行，在一个document里面操作dom不会有并发问题，不用考虑锁啥的。 继续阅读“JavaScript基础之十一（浏览器中的JavaScript）”