1、入门 Demo 屏幕截图#

1
const puppeteer = require('puppeteer');
2
async function getPic() {
3
    // 启动 puppeteer
4
    const browser = await puppeteer.launch({ headless: false });
5
    // 在浏览器中创建一个新的页面
6
    const page = await browser.newPage();
7
    // 使用 goto 打开指定网页
8
    await page.goto("https://www.baidu.com");
9
    // 调整页面配置大小，截图更好看
10
    await page.setViewport({ width: 1400, height: 900 });
11
    // 使用 screenshot 函数对网页进行截屏
12
    await page.screenshot({ path: 'baidu.png' })
13
    // 关闭浏览器
14
    await browser.close();
15
}
16
getPic();

2、基础使用属性#

1、获取元素#

Page 对象提供了2个API来获取页面元素： (1). Page.$(selector) 获取单个元素，底层是调用的是 document.querySelector() , 所以选择器的 selector 格式遵循 css 选择器规范;

1
let inputElement = await page.$('#search');

(2). Page.$$(selector) 获取一组元素，底层调用的是 document.querySelectorAll(). 返回 Promise(Array(ElemetHandle)) 元素数组.

1
const links = await page.$$("a");

2、获取元素属性#

(1). Page.$eval(selector, pageFunction[, …args]), 获取单个元素的属性

1
    const value = await page.$eval('input[name=search]', input => input.value);
2
    const href = await page.$eval('#a", ele => ele.href);
3
    const content = await page.$eval('.content', ele => ele.outerHTML);

(2). Page.$$eval(selector, pageFunction[, …args]), 获取元素数组的属性

3、键盘和鼠标事件#

键盘和鼠标的API比较简单，键盘的几个API如下：

• keyboard.down(key[, options]) 触发 keydown 事件
• keyboard.press(key[, options]) 按下某个键，key 表示键的名称
• keyboard.sendCharacter(char) 输入一个字符
• keyboard.type(text, options) 输入一个字符串
• keyboard.up(key) 触发 keyup 事件
• page.keyboard.press(“Shift”); //按下 Shift 键
• page.keyboard.sendCharacter(‘嗨’);
• page.keyboard.type(‘Hello’); // 一次输入完成
• page.keyboard.type(‘World’, {delay: 100}); // 像用户一样慢慢输入 鼠标Api如下:
• mouse.click(x, y, [options]) 移动鼠标指针到指定的位置，然后按下鼠标，这个其实 mouse.move 和 mouse.down 或 mouse.up 的快捷操作 > * mouse.down([options]) 触发 mousedown 事件，options 可配置: > * options.button 按下了哪个键，可选值为[left, right, middle], 默认是 left, 表示鼠标左键 > * options.clickCount 按下的次数，单击，双击或者其他次数 > * delay 按键延时时间 > * mouse.move(x, y, [options]) 移动鼠标到指定位置， options.steps 表示移动的步长 > * mouse.up([options]) 触发 mouseup 事件

4、其他实用API#

1
page.waitForSelector(selector[, options]) 等待某个选择器的元素加载之后，这个元素可以是异步加载的，这个 API 非常有用，比如我想获取某个通过 js 异步加载的元素，那么直接获取肯定是获取不到的。这个时候就可以使用 page.waitForSelector 来解决。

5、实现代码#

1
const puppeteer = require('puppeteer');
2
const fs = require('fs');
3
const path = require('path');
4

5
async function getShopDetail() {
6
    // 启动 puppeteer
7
    const browser = await puppeteer.launch({ headless: false, ignoreHTTPSErrors: true });
8
    let page = await browser.newPage();
9
    // 启用Javascript,允许执行js脚本
10
    await page.setJavaScriptEnabled(true);
11
    // 打开京东网页
12
    await page.goto("https://www.jd.com/");
13
    // 获取搜索框元素
14
    const searchInput = await page.$("#key");
15
    // 定位到搜索框
16
    await searchInput.focus();
17
    // 输入搜索内容
18
    await page.keyboard.type("手机");
19
    // 获取搜索按钮
20
    const searchBtn = await page.$(".button");
21
    // 执行点击事件
22
    await searchBtn.click();
23
    // 等待元素加载之后，否则获取不异步加载的元素
24
    await page.waitForSelector('.gl-item');
25
    // 获取搜索结果
26
    const links = await page.$$eval('.gl-item > .gl-i-wrap > .p-img > a', links => {
27
        return links.map(a => {
28
            return {
29
                href: a.href.trim(),
30
                title: a.title
31
            }
32
        });
33
    });
34
    const content = JSON.stringify(links);
35
    const file = path.join(__dirname, 'resource/index.json');
36
    fs.writeFile(file, content, ()=> {});
37
    await browser.close();
38
}
39

40
getShopDetail();

1、客户端发送带有SYN标识（SYN=1，seq=x）的请求报文段，然后进入SYN_SEND状态，等待服务端确认;#

2、服务端接收到客户端SYN报文段后，需要发送ACK信息对这个SYN进行确认，同时还要发送自己的SYN信息(SYN=1，ACK=1,seq=y，ack=x+1)服务端把这些信息放在一个报文段中((SYN+ACK报文段），一并发给客户端，此时客户端进入SYN_RECV状态;#

3、客户端接收到服务端的SYN+ACK报文段后会向服务端发送ACK（ACK=1，seq=x+，ack=y+1）确认报文段，这个报文段发送后， 客户端和服务端都进入ESTABLISHED状态，完成三次握手。#

为什么会三次握手？这块咋一看会感觉比较复杂，其实这个大家稍微思考一下就能明白，如果两个人需要互相确定可以通讯，步骤其实就是三次，类似于:

浏览器：在吗？ 服务器：在的 浏览器: 好的，我找你是为了诚挚的邀请你，晚上请我吃饭。

这个过程多了或者少了都不能保证确保互相通信，实际信号就是:

浏览器：syn 服务器：syn + ack 浏览器: ack

1、第一次挥手(FIN=1，seq=x)#

假设客户端想要关闭连接，客户端发送一个 FIN 标志位置为1的包，表示自己已经没有数据可以发送了，但是仍然可以接受数据。发送完毕后，客户端进入 FIN_WAIT_1 状态。

2、第二次挥手(ACK=1，ACKnum=x+1)#

服务器端确认客户端的 FIN 包，发送一个确认包，表明自己接受到了客户端关闭连接的请求，但还没有准备好关闭连接。 发送完毕后，服务器端进入 CLOSE_WAIT 状态，客户端接收到这个确认包之后，进入 FIN_WAIT_2 状态，等待服务器端关闭连接。

3、第三次挥手(FIN=1，seq=y)#

服务器端准备好关闭连接时，向客户端发送结束连接请求，FIN 置为1。 发送完毕后，服务器端进入 LAST_ACK 状态，等待来自客户端的最后一个ACK。

4、第四次挥手(ACK=1，ACKnum=y+1)#

客户端接收到来自服务器端的关闭请求，发送一个确认包，并进入 TIME_WAIT状态，等待可能出现的要求重传的 ACK 包。

服务器端接收到这个确认包之后，关闭连接，进入 CLOSED 状态。

客户端等待了某个固定时间（两个最大段生命周期，2MSL，2 Maximum Segment Lifetime）之后，没有收到服务器端的 ACK ，认为服务器端已经正常关闭连接，于是自己也关闭连接，进入 CLOSED 状态。

当然4次挥手主要就是为了保证数据互相完成发送，例如：

1
浏览器：吃饱了，我要走了。
2
服务器：干饭人等一下，我看一下晚上吃饭钱你转给我没有。
3
服务器：钱收到了，那我也走了。
4
浏览器：好的。

当然大家可能想问，其实三次也是可以关闭，为什么非要分四次，这是因为服务端在LISTEN状态下，收到关闭连接的报文时，仅仅表示对方不在发送数据，但是还是可以接受数据的，服务端是否现在关闭数据通道可以理解为上层应用是否还有其他事情要做，因此服务端的ACK和FIN一般都是分开发送。

从头搭建一个基于react + ts + webpack + Hooks 的开发环境#

1
  // 初始化文件夹文件和 package.json
2

3
  $  mkdir React-Typescript-Hooks
4

5
  $  touch webpack.config.js index.html
6

7
  $  npm init -y

打开 webpack.config.js文件，初始化简单的 webpack 配置#

1
const path = require("path");
2

3
module.exports = {
4
entry: "./src/index.tsx",
5
    output: {
6
        path: path.resolve(__dirname, "build"),
7
        filename: "bundle.js"
8
    },
9
    module: {},
10
    plugins: []
11
};

然后新增一个入口文件index.tsx#

1
import * as React from "react";
2
import * as ReactDOM from "react-dom";
3

4
const ROOT = document.querySelector(".container");
5

6
ReactDOM.render(<h1>Hello</h1>, ROOT);

接着需要安装react，webpack依赖模块#

1
  // 注：webpack4.0后，webpack 命令行相关的内容都迁移到 webpack-cli，除了 webpack 外，我们还需要安装 webpack-cli
2

3
  $  npm i react react-dom
4

5
  $  npm i webpack webpack-dev-server webpack-cli -D

我们现在已经有了ts的文件，但是webpack并不能解析，所以需要安装ts解析器 awesome-typescript-loader，为什么不用ts-loader，而选择用 awesome-typescript-loader，你可以点击这里查看。#

1
  $  npm i typescript awesome-typescript-loader -D

更新webpack.config，新建对tsx的规则处理#

1
  module: {
2
  rules: [
3
    {
4
      test: /\.tsx?$/,
5
      loader: "awesome-typescript-loader"
6
    }
7
  ]
8
},

我们还需要在根路径创建一个 tsconfig.json 文件，来告诉 webpack 如何去处理TS的文件#

1
  {
2
  "compilerOptions": {
3
    "allowSyntheticDefaultImports": true,
4
    "jsx": "react",
5
    "module": "commonjs",
6
    "outDir": "./build/",
7
    "preserveConstEnums": true,
8
    "removeComments": true,
9
    "sourceMap": true,
10
    "noImplicitAny": true,
11
    "target": "es5"
12
  },
13
  "include": [
14
    "./src/**/*"
15
  ]
16
}

接下来我们需要安装react的声明文件，由于 React 和 React-dom 并不是使用 TS 进行开发的，所以 TS 不知道 React、 React-dom 的类型，以及该模块导出了什么，此时需要引入 .d.ts 的声明文件。#

1
  $  npm i @types/react @types/react-dom -D

接下来就只要将webpack.config中的test命令更改成下面，就可以直接启动项目了,然后在浏览器中输入localhost<8080> 就可以直接查看。#

1
  "start": "webpack-dev-server"

1、安装#

TypeScript相关的工具一般都是通过npm进行安装，安装命令如下：

1
    npm install -g typescript@3.6.0

安装完成后可以来编写第一个TypeScript程序，类似于新建一个hello.ts，加入代码 console.log('Hello TypeScript!')，然后通过tsc编译器来编译ts文件，生成相对应的javascript文件，编译代码如下：编译过后的文件可以直接在浏览器中运行

1
    tsc hello.ts

2、基本类型#

在Ts中，提供了一下基本类型：

• 布尔类型（boolean） eg : let isDone: boolean = false;
• 数字类型 (number) eg: let decLiteral: number = 6; 支持二、八、十、十六进制
• 字符串类型 (string) eg: let name: string = "bob"; 支持模板字符串
• 数组类型 (array) eg: let list: number[] = [1, 2, 3]; 或者泛型数组，Array<元素类型>
• 元祖类型 (trup) eg: let x: [string, number]; 表示一个已知元素数量和类型的数组，各元素的类型不必相同
• 枚举类型（enum） eg : enum Color {Red, Green, Blue} let c: Color = Color.Green;
• 任意值类型（any） eg : let notSure: any = 4; 一般用于忽略类型检查
• 空值（void） eg: (): void 一般用于函数没有返回值的情况，像是和any类型相反
• Null 和 Undefined 是所有类型的子类型，只有当指定了--strictNullChecks标记，才会严格检查
• Never 类型 表示永不存在的值，一般用于抛出错误时使用

3、类#

    ES6中已经支持了基于类的面向对象编程，在Ts中，同样也是使用extends关键字实现继承，封装，继承，多态，是面向对象的三大特性。类必须拥有一个构造函数，如果类扩展了其他类，则创建的任何构造函数都必须要包含对super的调用。这里主要是着重说一下Ts中的类的修饰符。在类中的修饰符可以分为公共(public)、私有(private)、受保护(protected)三种。

     I、Public 修饰符        在TypeScript里，成员都默认为public。可以自由的访问程序里定义的成员。     II、Private 修饰符        当成员被标记成private时，它就不能在声明它的类的外部访问。     III、Protected 修饰符        protected修饰符与private修饰符的行为很相似，但有一点不同，protected成员在派生类中仍然可以访问。     IV、Readonly 修饰符        可以使用readonly关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化。     V、静态属性 static     到目前为止，我们只讨论了类的实例成员，那些仅当类被实例化的时候才会被初始化的属性。 我们也可以创建类的静态成员，这些属性存在于类本身上面而不是类的实例上。

4、接口#

    Ts的接口使用方式类似于Java，同时还增加了更加灵活的接口类型，包括属性、函数、可索引和类等类型。在TypeScript里，接口的作用就是为类型命名和自己的代码或第三方代码定义契约。在Ts中使用Interface关键字来定义接口。

    I、属性接口

1
    interface FullName {
2
        firstName: string;
3
        secondName: string;
4
    }

    属性接口的定义很简单，ts还提供了可选属性，可选属性对可能存在的属性进行预定义，并兼容不传值的情况，用法就是在变量名后加一个？写法示例：secondName？: string。     II、函数类型接口     接口除了描述带有属性的普通对象外，也能描述函数类型，定义函数类型接口时，需要明确定义函数的参数列表，和返回值类型，且参数列表的每个参数都要有参数名和类型，示例：

1
    interface encrypt {
2
        （val: string, salt: string）: string
3
    }

    II、可索引类型接口     可索引类型接口用来描述那些可以通过索引得到的类型，类似于array[1],object[‘name’]等，其实就是通过特定的索引来得到指定类型的返回值。示例：

1
    interface indexArray {
2
        [index: number]: string
3
    }
4
    let userArray: indexArray  = ['A', 'B'];
5
    userArray[0]   // 结果为A

    III、类类型接口     类类型接口主要用来规范一个类的内容，示例：

1
    interface Animal {
2
        name: string;
3
        setName(n: string): void;
4
    }
5

6
    class Dog implements Animal {
7
        constructor(n: string) {}
8
        name: string;
9
        setName(n: string) {
10
            this.name = n;
11
        }
12
    }

    IV、接口拓展     和类一样，接口也可以实现相互拓展，即能将成员从一个接口复制到另一个里面，这样可以更灵活的将接口拆分到可复用的模块里，一个接口可以继承多个接口，创建出多个接口的合成接口，示例：

1
    interface Shape {
2
        color: string;
3
    }
4

5
    interface Square extends Shape {
6
        sideLength: number;
7
    }
8

9
    let square = <Square>{};
10
    square.color = "blue";
11
    square.sideLength = 10;

5、泛型(generic)#

    在实际开发中，我们定义API不仅仅需要考虑功能是否健全，更多的还要考虑到API的复用性，这个时候急需要组件支持不特定的数据类型，而泛型就是用来实现这样的效果。示例：

1
    function identity<T>(arg: T): T {
2
        return arg;
3
    }

    我们给identity方法添加了类型变量T，T帮助我们捕获用户传入的类型，之后我们就可以使用这个类型，例子中就是使用了T作为返回值，这样我们就可以知道参数类型与返回值类型是相同的了。还有就是比较常用的场景就是使用泛型变量，我们改变下之前的例子：

1
    function identity<T>(arg: T): T {
2
        console.log(arg.length); // Error: T doesn't have .length
3
        return arg;
4
    }

    如果直接这样使用的话编译器会报错，这是因为并没有地方指明arg具有这个属性，记住，这些类型变量代表的是任意类型，所以使用这个函数的人有可能传入的是个数字，就会报错。所以我们可以假设我们想操作的是T类型的数组，而不直接是T,所以我们可以这样：

1
    function identity<T>(arg: T[]): T[] {
2
        console.log(arg.length); // // Array has a .length, so no more error
3
        return arg;
4
    }

或者这种写法

1
    function loggingIdentity<T>(arg: Array<T>): Array<T> {
2
        console.log(arg.length);  // Array has a .length, so no more error
3
        return arg;
4
    }

1、文件上传(通过Jenkins自动化构建)#

如果没有配置Jenkins 也可以手动通过命令上传

1
$ scp -r -P 10086 /Users/ronluo/Desktop/h5/gaia-flexi-cms-team/maya-server/dist  devops@47.102.207.109:/home/devops/flexi-fuwu/Maya-server/dist

2、node服务启动#

服务器上传node dist包，使用pm2 启动，因为后台服务和前台放置在同一服务器，所以可以把后台地址配置为内网地址127.0.0.1<8809>，然后node中的public指向前端静态文件。

配置ngnix反向代理到node的端口，可以不使用ngnix去反向代理，也可以联系运维直接将域名指向node端口，但是找别人太麻烦，所以直接通过ngnix反向代理到node端口。

IOS 拍照旋转问题#

主要的代码结构其实已经完成，针对上面提到问题，可以增加适当的兼容代码，例如：IOS 拍照旋转问题，需要引入exif-js插件，做一下处理：

1
/** 获取照片方向角属性 */
2
EXIF.getData(image, function(){
3
   let orientation = EXIF.getTag(this, 'Orientation');
4
    switch (orientation) {
5
        /** 需要顺时针90度旋转 */
6
        case 6:
7
            canvas.width = height;
8
            canvas.height = width;
9
            ctx.save();
10
            ctx.translate(canvas.width / 2, canvas.height / 2);
11
            ctx.rotate(90 * Math.PI / 180);
12
            ctx.drawImage(image, 0 - canvas.height / 2, 0 - canvas.width / 2, canvas.height, canvas.width);
13
            ctx.restore();
14
            break;
15
        /** 需要逆时针90度旋转 */
16
        case 8:
17
            canvas.width = height;
18
            canvas.height = width;
19
            ctx.save();
20
            ctx.translate(canvas.width / 2, canvas.height / 2);
21
            ctx.rotate(-90 * Math.PI / 180);
22
            ctx.drawImage(image, 0 - canvas.height / 2, 0 - canvas.width / 2, canvas.height, canvas.width);
23
            ctx.restore();
24
            break;
25
        /** 需要180度旋转 */
26
        case 3:
27
            ctx.save();
28
            ctx.rotate(180 * Math.PI / 180);
29
            ctx.drawImage(this, -width, -height, canvas.width, canvas.height);
30
            ctx.restore();
31
            break;
32
        default:
33
            ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
34
    }
35
});

IOS10.0版本以下，toBlob方法不存在的兼容方法#

1
// 当canvas对象的原型中没有toBlob方法的时候，手动添加该方法
2
if (!HTMLCanvasElement.prototype.toBlob) {
3
    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
4
        value: function (callback, type, quality) {
5
            var binStr = atob(this.toDataURL(type, quality).split(',')[1]),
6
                len = binStr.length,
7
                arr = new Uint8Array(len);
8
            for (var i = 0; i < len; i++) {
9
                arr[i] = binStr.charCodeAt(i);
10
            }
11
            callback(new Blob([arr], { type: type || 'image/png' }));
12
        }
13
    });
14
}

Canvas图片压缩#

还有就是Canvas图片压缩，图片压缩原理其实很简单，核心API就是使用Canvas的drawImage()方法，API大致如下：

1
context.drawImage(img, dx, dy);
2
context.drawImage(img, dx, dy, dWidth, dHeight);
3
context.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

虽然参数很多，简单总结下其实可以归纳为如下三个参数：     ** img : **   图片对象,也可以是虚拟DOM中的图片对象     ** dx, dy, dWidth, dHeight :   表示在canvas画布上规划处一片区域用来放置图片，dx, dy为canvas元素的左上角坐标，dWidth, dHeight指canvas元素上用在显示图片的区域大小。如果没有指定sx,sy,sWidth,sHeight这4个参数，则图片会被拉伸或缩放在这片区域内。      sx, sy, swidth, sheight : **   这4个坐标是针对图片元素的，表示图片在canvas画布上显示的大小和位置。sx,sy表示图片上sx,sy这个坐标作为左上角，然后往右下角的swidth,sheight尺寸范围图片作为最终在canvas上显示的图片内容。 当然，为了方便我个人一般都是用五个参数的语法，我们举个例子，假如一张图片的尺寸是1024 * 800，我们需要限制为102 * 80，核心代码：

1
    ...
2
    ctx.drawImage(img,0,0,102,80);

其实就这么一句代码就实现了图片压缩，有木有很简单。

Canvas绘图容易失真的问题#

    最后还有一个关于Canvas绘图容易失真的问题，这块内容主要涉及到devicePixelRatio 设备像素比，这块的话，大家可以去看张鑫旭的这篇文章：文章地址 这块对devicePixelRatio属性进行了很详细的介绍，实际我们解决canvas画图模糊就是画一个两倍于实际大小的canvas，简单解释就是devicePixelRatio属性决定了用几个像素点渲染一个像素，假如某个屏幕的devicePixelRatio值为2，一张100 * 100像素的图片会用两个像素点渲染，实际图片其实会占据200 * 200像素空间，所以我们需要直接创建一个两倍实际大小canvas，然后用css样式把canvas限定在实际的大小，具体核心代码如下：

1
...
2
var devicePixelRatio = window.devicePixelRatio || 1;
3
var backingStoreRatio = context.webkitBackingStorePixelRatio ||
4
                    context.mozBackingStorePixelRatio ||
5
                    context.msBackingStorePixelRatio ||
6
                    context.oBackingStorePixelRatio ||
7
                    context.backingStorePixelRatio || 1;
8
    var ratio = devicePixelRatio / backingStoreRatio;
9
    canvas.width = canvas.width * ratio;
10
    canvas.height = canvas.height* ratio;
11
    context.scale(ratio, ratio);
12
...

1、创建对象的多种方式#

• 通过”字面量“方式创建。将成员信息写到{}中，并赋值给一个变量，此时这个变量就是一个对象。
• 通过”构造函数“方式创建。 var obj = new 函数名();
• 通过object方式创建。通过object构造器new一个对象，再往里丰富成员信息。

2、变量提升(hoisting)#

1
JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。变量可以在使用后声明，也就是变量可以先使用再声明。

3、举例说明一个匿名函数的典型用例#

1
自执行函数，用闭包模拟私有变量、特权函数等。

4、DOM事件的绑定的几种方式#

• 在DOM元素中直接绑定。
• 在JavaScript代码中绑定;
• 绑定事件监听函数。

5、DOM事件中target和currentTarget的区别#

• target<触发事件的某个具体对象>，只会出现在事件流的目标阶段；
• currentTarget<绑定事件的对象>，恒等于this，可能出现在事件流的任意一个阶段中。

6、手写Ajax，XMLHttpRequest#

XMLHttpRequest对象的本质：可以发送Http请求，处理Http响应，与服务器之间进行异步交换数据的对象，其核心是Http. 具体实现步骤：1、创建XMLHttpRequest对象。2、指定响应函数。3、打开连接（指定请求）4、发送请求。5、创建响应函数。

1
// 声明一个变量，用来实例化XMLHttpRequest对象
2
var xmlhttp=null;
3
if (window.XMLHttpRequest){
4
    // 新浏览器直接创建XMLHttpRequest对象
5
    xmlhttp = new XMLHttpRequest( );
6
}else if(window.ActiveXObject){
7
    // IE5或IE6没有XMLHttpRequest对象，而是用的ActiveXObject对象
8
    Xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
9
}
10

11
if (xmlhttp !== null) {
12
    // 指定响应函数为state_Change
13
    xmlhttp.onreadystatechange=state_Change;
14
    // 指定请求，这里要访问note.xml文件，true代表的使用的是异步请求
15
    xmlhttp.open("GET","note.xml",true);
16
     xmlhttp.send(null);//发送请求
17
} else{ alert("你得浏览器不支持XMLHTTP."); }
18

19
// 创建具体的响应函数state_Change
20
function state_Change(){
21
    if (xmlhttp.readyState === 4){
22
        if (xmlhttp.status === 200){
23
          // 这里应该是函数具体的逻辑
24
         }else{ alert("Problem retrieving XML data") ;}
25
    }
26
}

7、JS原生对象、内置对象、宿主对象。#

     原生（Naitve）对象： 独立于宿主环境的 ECMAScript实现提供的对象，包含：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError，简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。      内置（Build-in）对象： 由 ECMAScript实现提供的、独立于宿主环境的所有对象，在 ECMAScript程序开始执行时出现，而ECMA-262 只定义了两个内置对象，即 Global 和 Math，内置对象是原生对象的一种。      宿主（host）对象： 所有非本地对象都是宿主对象，所有的BOM和DOM都是宿主对象，ECMAScript官方未定义的对象都属于宿主对象。

8、document load 和 document DOMContentLoaded 两个事件的区别#

1
load是页面所有资源全部加载完成后（DOM文档树，css文件，js文件，图片资源等）;
2
DOMContentLoaded：当页面文档加载并解析完毕之后会马上出发 DOMContentLoaded 事件，而不会等待样式文件、图片文件和子框架页面的加载。

9、什么是“use strict”,好处和坏处#

use strict: 意味着代码按照严格模式解析，这种模式使得Javascript在更严格的条件下运行。 好处: 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为，消除代码运行的一些不安全之处，保证代码运行的安全；提高编译器效率，增加运行速度； 坏处: 同样代码，在”严格模式”中，可能会有不一样的运行结果；一些在”正常模式”下可以运行的语句，在”严格模式”下将不能运行。

10、JS如何实现重载和多态#

• 根据arguments个数实现重载, arguments检测传参个数，执行不同的方式。
• JavaScript中大多是通过子类重写父类方法的方式实现多态。

11、浅拷贝(Shallow Copy)和深拷贝(Deep Copy)#

浅拷贝： 复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。 浅拷贝实现方式： 1、简单地复制语句。 2、Object.assign() (ES6) 深拷贝： 创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。实现方式：

• 1、用 JSON.stringify 把对象转成字符串，再用 JSON.parse 把字符串转成新的对象。
• 2、Object.create()。
• 3、递归拷贝（注意避免互相引用导致死循环）

12、CSSOM视图模式(CSSOM View Module)#

• Window视图属性

• innerWidth 和 innerHeight：window窗体的内部宽度(高度)不包括窗框。
• outerWidth 和 outerHeight: 表示整个浏览器窗体的大小，包括任务栏。
• pageXOffset 和 pageYOffset: 整个页面滚动的像素值(水平方向和垂直方向的)。
• screenX 和 screenY: 浏览器窗口在显示器中的位置(screenX水平screenY垂直)。

• Screen视图属性

• availWidth 和 availHeight: 显示器可用宽高，不包括任务栏等。
• colorDepth: 表示显示器的颜色深度。
• width和height: 表示显示器屏幕的宽高。

• 文档(DocumentView)视图属性

• elementFromPoint: 返回给定坐标处所在的元素。
• getBoundingClientRect: 得到矩形元素的界线，返回的是一个对象，包含 top, left, right, 和 bottom四个属性值，大小都是相对于文档视图左上角计算而来。
• scrollIntoView: 让元素滚动到可视区域。

• 元素(DocumentView)视图属性

• clientLeft 和 clientTop: 表示内容区域的左上角相对于整个元素左上角的位置（包括边框）。
• clientWidth 和 clientHeight: 表示内容区域的高度和宽度，包括padding大小，但是不包括边框和滚动条。
• offsetLeft 和 offsetTop: 表示相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左右偏移值。
• offsetWidth 和 offsetHeight: 整个元素的尺寸（包括边框）。
• scrollLeft 和 scrollTop: 表示元素滚动的像素大小。
• scrollWidth 和 scrollHeight: 表示整个内容区域的宽高，包括隐藏的部分。如果元素没有隐藏的部分，则相关的值应该等用于clientWidth和clientHeight。当你向下滚动滚动条的时候，scrollHeight应该等用于scrollTop + clientHeight。

• 鼠标位置(Mouse position)属性

• clientX 和 clientY: 鼠标相对于window的偏移。
• pageX, pageY: 鼠标相对于document的坐标。
• screenX, screenY: 鼠标相对于显示器屏幕的偏移坐标。

13、常用的数组api，字符串api，Math对象，Date日期对象#

• 数组API

• unshift(): 数组开头增加一个或多个元素，返回数组长度，原数组改变。
• shift(): 删除数组第一个元素，返回被删除内的容，原数组改变。
• push(): 数组末尾增加一个或多个元素，返回数组长度，原数组改变。
• pop(): 删除数组末尾一项，返回被删除的内容，原数组改变。
• concat(): 数组拼接，不改变原数组，返回被连接数组副本。不传参数可实现数组克隆。
• splice(index, howmany, item1, ...itemx): 根据参数实现数组的删除，增加，替换。 例: splice（index,0，item1，item2…)从索引index开始增加，增加的内容插入到索引index前面。
• splice(index, n) 从索引index开始删除n个，如果只有一个参数splice(index)，就是从索引index开始后面的内容全部删除。
• Splice(index,n，item1，item2..）从索引index开始替换n个,替换的内容为item1, item2…。
• slice(n，m): 从索引 n 截取到索引 m 但不包括 m ,原数组不发生改变。
• reverse(): 数组翻转,返回反转后新数组，原数组发生改变。
• sort(): 数组排序,使用方法一般sort（function（a，b）{return a-b }）从小到大排。
• toString(): 把数组转成以逗号分隔的字符串。
• join（拼接形式）: 把数组拼接成以其他形式分割的字符串。

• 字符串API

• charAt(index): 通过索引找到该索引对应字符，包含空格。
• charCodeAt(index): 通过索引找到该索引字符对应的Unicode编码(0-65535的整数）。
• indexOf( ): 从前往后找，找到返回内容的索引，找不到返回-1。
• lastIndexOf( ): 从后往前找，找到返回内容的索引，找不到返回-1。
• slice(n，m): 从索引n 查找到索引m ,但不包括m，slice可以取负值。
• substring(n，m): 从索引n 查找到索引m ，但不包括m， 不可以取负值。
• substr（n，m): 从索引n开始截取m 个
• split（切割形式）: 把一个字符串分割成字符串数组。
• toUpperCase（） <转大写字母>
• toLowerCase（） <转小写字母>

• Math 对象API

• Math.floor( ): 向下取整
• Math.ceil( ): 向上取整
• Math.round( ): 四舍五入
• Math.random( ): 取0-1之间的随机小数
• Math.pow(x,y): x的y次幂
• Math.abs( ): 取绝对值 Math.sqrt( )开平方
• Math.max/min( ): 取最大/小值

• Date日期对象API

• new Date( ): 创建一个日期对象
• getFullYear() 返回年份
• getMonth( ): 返回月份数（0-11）, 想要得到几月，需要加一
• getDay( ): 返回一周的第几天（0-6），想要得到星期几，需要加一。
• getDate( ): 返回日(号)
• getMinutes(): 返回分
• getSeconds(): 返回秒
• getTime( ): 返回从1970年1月1日00：00到现在的毫秒数，也就是时间戳。
• setFullYear(yearInt): 设置年份4位数
• setMonth(monthInt): 设置月份(0-11)
• setDate(dateInt): 设置日(1-31)
• setHours(hourInt): 设置小时数(0-23)
• setMinutes(minInt): 设置分钟数(0-59)
• setSeconds(secInt): 设置秒数(0-59)

14、正则表达式#

• 正则表达式的创建

• 调用RegExp对象的构造函数var reg = new RegExp('^[a-z]+[0-9]$', 'gi')其中第一个参数是匹配模式，第二个参数是可选参数(g, i, m),分别用于指定全局匹配、区分大小写的匹配和多行匹配。
• 使用正则表达式字面值(var reg = /^[a-z]+[0-9]$/gi)

• 正则表达式的组成

• 元字符: .匹配除了换行符(n)以外的所有字符,w匹配字母，数字，或者汉字,W匹配除了字母，数字，汉字以外的其他字符,d匹配数字,D匹配除了数字以外的其他字符, s匹配任意的空白符(f, n, r, t, v), S匹配空白符以外的任意字符, b匹配单词的开始或者结束, B匹配单词的非开始或者结束, ^匹配行首, $匹配行尾。
• 转义字符(\): * + ? | { [ ( ) ] }^ $ . # 和空白需要转义。
• 限定符: *匹配零次至多次，+匹配一次至多次，？匹配零次或一次{2,}至少匹配两次，{10}匹配10次，{2, 8}至少匹配两次至多匹配八次。

• 正则表达式的方法

• test： 检索字符串中的指定子串，返回布尔值。
• exec: 返回一个数组，数组中的第一个条目是第一个匹配。
• search: 返回子串的开始位置
• match: 返回匹配到的子串
• replace: 替换匹配到的子串
• split: 将字符串分割成数组 // 'a12b2334c34'.split(/\d{4}/) ["a12b", "c34"]

15、js 处理异常，调试方法#

处理异常： try catch 调试方法： 1、打印到控制台。2、记录到当前页面。3、抛出错误

1、js的基本类型有哪些？引用类型有哪些？引用类型和基本类型有什么区别？null 和 undefined 的区别。#

    值类型(基本类型)：数值(number)、布尔值(boolean)、null、undefined、string(字符串)、Symbol。    基本类型的值是不可变的，比较是它们的值的比较，数据类型不同也可以进行值比较，因为会进行数据类型的隐式转换。基本类型的变量是存放在栈内存（Stack）里的，栈内存中包括了变量的标识符和变量的值。    引用类型：对象(Object)、数组（Array）、函数(Function)、RegExp、Date 类型。    引用类型的值是可变的，比较是它们引用的比较，引用类型的值是保存在堆内存（Heap）中的对象（Object）。栈内存中保存了变量标识符和指向堆内存中该对象的指针，堆内存中保存了对象的内容。     null 表示”没有对象”，即该处不应该有值。典型用法是：     （1） 作为函数的参数，表示该函数的参数不是对象。     （2） 作为对象原型链的终点。     undefined 表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：     （1） 变量被声明了，但没有赋值时，就等于undefined。     （2） 调用函数时，应该提供的参数没有提供，该参数等于undefined。     （3） 对象没有赋值的属性，该属性的值为undefined。     （4） 函数没有返回值时，默认返回undefined。

2、如何判断对象类型#

• typeof 操作符 适合判断基本类型，不适合判断引用类型（都返回object），比如自定义的对象类型。如果我们想要判断一个变量是否存在，可以使用typeof a != “undefined”
• instanceOf操作符 判断一个实例是否存在于某对象的原型链上
• 用对象的 constructor 来判断对象类型 当检测null或者undefined类型的constructor 属性时，js会报错，不推荐使用
• Object.prototype.toString.call(object) （主流建议方法） 形式 Object.prototype.toString.call(object).slice(8,-1).toLowerCase();

3、JS常见的DOM操作API#

1
基本概念：浏览器为JavaScript提供的一系列接口。Node有一个属性nodeType表示Node的类型，它是一个整数，其数值分别表示相应的Node类型。

• Element类型：提供了对元素标签名，子节点和特性的访问，nodeType为1。
• Attr类型：表示元素的特性，nodeType值为2。
• Text类型：表示文本节点，它包含的是纯文本内容，nodeType为3。
• Comment类型：表示HTML文档中的注释，nodeType为8。
• Document：表示文档，document对象是HTMLDocument的一个实例，nodeType为9。DocumentFragment类型：表示一种轻量级的文档，nodeType为11。

4、解释一下事件捕获和事件冒泡，事件委托，如何阻止冒泡,阻止默认事件。#

1
DOM2级事件规定的事件流的三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段。

事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件，触发顺序为自外向内。 事件冒泡：事件冒泡是自下而上的去触发事件，直到document/window。个人理解，事件冒泡存在的意义，就是在事件运行过程中，避免使用循环遍历的方式去给每个同级元素触发相同的事件，而优化性能。 事件委托：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。（经典取快递例子理解）    addEventListener(event,fn,false)方法用于向指定元素添加事件，事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。 阻止冒泡： event.stopPropagation()（注：IE9+） 阻止默认行为：event.preventDefault()

5、 js 的作用域有几种？函数的作用域是什么？#

    一般说三种：全局、函数 和 eval作用域。作用域又称执行环境，所有变量都存在于一个执行环境（作用域）中，这个执行环境决定了变量的生命周期，以及哪一部分代码可以访问其中的变量，每进入一个执行环境都会创建一个用于搜索变量和函数的作用域链。作用域链本质是一个指向变量对象的指针列表，它只引用但不实际包含变量对象。作用域在函数定义时就已经确定，而不是在函数调用时确定。作用域中变量的值是在执行过程中产生的确定的，而作用域却是在函数创建时就确定了。

6、对闭包的理解？什么时候构成闭包？闭包的优缺点？#

    当在函数内部定义了其他函数时（引用了父作用域变量）就创建了闭包，闭包有权访问包含函数内部的所有变量。在执行环境中，闭包的作用域链包含着它自己的作用域，包含函数的作用域，全局作用域，通常函数的作用域及其变量都会在函数执行结束后被销毁，但当函数返回一个闭包时，这个函数的作用域将会一直在内存中保存到闭包不存在为止。 优点：可以读取函数内部的变量。实现私有作用域（封装插件） 缺点：创建闭包必须维护额外的作用域，过度使用会占用大量内存。

7、显示原型和隐式原型，手绘原型链，原型链是什么#

      创建的每个函数都有prototype（原型）属性，这个属性是个指针，指向一个对象（通过调用构造函数而创建的那个对象实例的原型对象）。 每个对象都有一个__proto__属性，可成为隐式原型.指向创建该对象的函数的prototype。       每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针(constructor)，而实例包含一个指向原型对象内部的指针（__prototype__）。       原型链：访问一个对象的属性时，先在基本属性中查找，如果没有，再沿着__proto__这条链向上找。原型链是实现继承的主要方法。

8、实现继承的多种方式和优缺点#

• 原型链(缺点：包含引用类型值的原型属性会被所有实例共享，创建子类型实例时，不能向超类型的构造函数中传参)
• 借用构造函数（方法都在构造函数中定义，函数无法复用）
• 组合继承（原型链+构造函数）*推荐用法
• 使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现实例属性的继承。
• 原型式继承 Object.creat() IE9+

9、this有哪些使用场景？如何改变this的值（call，apply，bind）？#

      this对象是在运行时基于函数的执行环境绑定的：在全局函数中，this等于window，当函数被作为某个对象的方法掉用时，this等于那个对象，不过匿名函数的执行环境具有全局性，因此其this通常指向window。       唯一的一个不同就是采用了function.call或者function.apply的情况，function的this指向了call的传参，但这恰恰是针对上述this指向调用者的情况的一种补充，专用于调整this指向的。

10、new 一个对象（构造函数）具体做了什么#

• 1.创建一个新对象
• 2.将构造函数的作用域赋给新对象（因此this就指向了这个新对象）
• 3.执行构造函数中的代码（为这个新对象添加属性）
• 4.返回新对象

1、CSS3新特性，伪类，伪元素，锚伪类#

• 动态伪类：（并不存在于HTML中,当用户和网站交互的时候才能体现出来）

• . property a:link { color; } 链接没有被访问时前景色为灰色
• . property a: visited { color: yellow; } 链接被访问过后前景色为黄色
• . property a: hover { color: green; } 鼠标悬浮在链接上时前景色为绿色
• . property a: active { color: blue; } 鼠标点钟激活链接那一下前景色为蓝色 注：先后顺序，遵守爱恨原则LoVe/HAte,也就是Link—visited—hover—active； 对于，，。，这个经常用在表单元素上。

• UI元素状态伪类：

• :enabled,:disabled,:checked IE6-8不支持"","",""这三种选择器。

• CSS3的：

• :first-child 选择某个元素的第一个子元素；
• :last-child 选择某个元素的最后一个子元素；
• :nth-child() 选择某个元素的一个或多个特定的子元素；
• :nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
• :nth-of-type() 选择指定的元素；
• :nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
• :first-of-type 选择一个上级元素下的第一个同类子元素；
• :last-of-type 选择一个上级元素的最后一个同类子元素；
• :only-child 选择的元素是它的父元素的唯一一个了元素；
• :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
• :empty 选择的元素里面没有任何内容

• 否定选择器（：not）

• 否定选择器 :not()，可以让你定位不匹配该选择器的元素。IE6-8浏览器不支持()选择器

• 伪元素（两个“：：”和一个“：”css3中主要用来区分伪类和伪元素）

• ::first-line：选择元素的第一行
• ::first-letter：选择元素的第一个字母
• ::before和::after：这两个主要用来给元素的前面或后面插入内容，这两个常用”content”配合使用，见过最多的就是清除浮动
• ::selection：用来改变浏览网页时选中文字的默认效果

2、css3动画transform，transition和animation的区别#

• transform(2D变换)

• translate(x,y)：沿着 X 和 Y 轴移动元素。
• rotate(angle)：旋转，在参数中规定角度。
• scale(x,y)：缩放转换，改变元素的宽度和高度。
• skew(x-angle,y-angle)：倾斜转换，沿着 X 和 Y 轴。
• matrix(n,n,n,n,n,n)：定义 2D 转换，使用六个值的矩阵。

• transition（过渡） Tip: transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 兼容性：IE10+，Firefox, Opera 和 Chrome transition属性的值包括以下四个：

• transition-property： 指定对HTML元素的哪个css属性进行过渡渐变处理，这个属性可以是color、width、height等各种标准的css属性。
• transition-duration：指定属性过渡的持续时间
• transition-timing-function：指定渐变的速度：
  • ease：（逐渐变慢）默认值
  • linear：（匀速）
  • ease-in：(加速)
  • ease-out：（减速）
  • ease-in-out：（加速然后减速）
  • cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
• transition-delay：指定延迟时间，也就是经过多长时间才开始执行过渡过程。

• animation（动画） 需要配合@keyframes使用，语法规则<命名是由>”@keyframes”开头，后面接着 “动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则。不同关键帧是通过from（相当于0%）、to（相当于100%）或百分比来表示。@keyframes定义好后，须通过animation把它绑定到选择器。animation的属性如下：

• Animation：所有动画属性的简写属性（除了animation-play-state 属性）。
• animation-name：规定 @keyframes 动画的名称。
• animation-duration：规定动画完成一个周期所花费的秒或毫秒,默认是0。
• animation-timing-function：规定动画的速度曲线，默认是”ease”。
• animation-delay：规定动画何时开始，默认是 0
• animation-iteration-count：规定动画被播放的次数，默认是 1（infinite：无限次）
• animation-direction：规定动画是否在下一周期逆向地播放。默认“normal”（reverse：反向播放；alternate：奇数次正向播放，偶数次反向播放；alternate-reverse：奇数次反向播放，偶数次正向播放。）
• animation-play-state：规定动画是否正在运行或暂停，默认是“running”（paused：暂停动画）。

a、Sass基本用法：#

    1、变量（SASS允许使用变量，所有变量以$开头，如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中)。

1
$blue: #1875e7;
2
div {
3
    color: $blue
4
}

    2、计算功能（SASS允许在代码中使用算式：)。

1
body {
2
    margin: (14px/2);
3
    top: 50px + 100px;
4
}

    3、嵌套（SASS允许选择器嵌套，属性也可以嵌套，在嵌套的代码块内，可以使用&引用父元素（伪类）;)。

b、代码重用：#

     1、继承: SASS允许一个选择器，继承另一个选择器.

1
.class1 {
2
    border: 1px solid #ddd;
3
}
4
/* class2要继承class1，需要使用 @extend 命令*/
5
.class2 {
6
    @extend .class1;
7
    font-size: 120%;
8
}

     2、Mixin: (定义可重用代码块)，mixin的强大之处，在于可以指定参数和缺省值。

1
/* 使用 @mixin 命令，定义一个代码块 */
2
@minxin left {
3
    float: left;
4
    margin-left: 10px;
5
}
6
/* 使用 @include 命令，调用 minxin */
7
div {
8
    @include left;
9
}

     3、颜色函数（SASS提供了一些内置的颜色函数，以便生成系列颜色。）      4、插入文件（@import命令，用来插入外部文件。如果插入的是.css文件，则等同于css的import命令。）

c、高级用法：#

     1、条件语句

1
/* @if 可以用来判断 */
2
p {
3
    @if 1 + 1 == 2 { border: 1px solid; }
4
    @if 5 < 3 { border: 2px detted; }
5
}
6
/* 一起的还有 @else 命令 */
7
@if lightness($color) > 30% {
8
    background-color: #000;
9
} @else {
10
    background-color: #fff;
11
}

     2、循环语句

1
/* sass 支持 for 循环 */
2
@for $i from 1 to 10 {
3
    .border-#{$1} {
4
        border: #{$i}px solid blue;
5
    }
6
}
7
/* while 循环 */
8
$i: 6;
9
@while $i > 0 {
10
    .item-#{#i} {
11
        width: 2em * $i
12
    }
13
    $i: $i - 2
14
}
15
/* each 命令与for类似 */
16
@each $member in a,b,c,d {
17
    .#{$member} {
18
        background=image: url("#{$member}.jpg");
19
    }
20
}