Hilo版小恐龙游戏

2020-02-19

前言
开始准备
小恐龙游戏
小结
参考文章

前言

前段时间突然想尝试下小游戏，经过2天的翻阅各种游戏框架评测和根据自己的情况,决定首先尝试下阿里的HiloJS。因为之前没做过小游戏，看了Hilo的文档也是云里雾里，似懂非懂，真正做起来肯定不是自己想的那样，还是得玩一下才行呐。风靡一时的小恐龙游戏是一个很好的练手小游戏，于是决定实现Hilo版的小恐龙。

开始准备

万事开头难，没有游戏经验的我只能是看着好玩，但又不知如何下手。

我一点也不着急看API文档，因为看了于我也没啥用啊。于是先从教程文档入手。

快速开始

1
2
3

游戏开发过程：

创建舞台 -> 创建定时器 -> 创建可视对象 -> 事件交互

噢！游戏就是这么回事，在一个舞台上，创建一个或多个可视对象，定时的监听可视对象行为来进行事件交互。

嗯～看个栗子来学习下吧～于是来仔细研究Hilo官方提供的Flappy Bird。

勤勤恳恳的学习独立版Flappy Bird【官网传送门】。

通读完Flappy Bird还是有很多收获的（项目目录结构，游戏逻辑实现等，这些官网资料介绍很详细,建议自己结合源码多读几遍），但是由于对HiloJS API还不熟悉，需要一个类似hello world版本的API入门deomo，来熟悉如何使用。

请看下面的栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="hilo/hilo-standalone.js"></script>
</head>

<body>
    <div id="game-container"></div>
    <script>
        // 1.创建舞台
        // 舞台Stage是一个各种图形、精灵动画等的总载体。所以可见的对象都要添加到舞台或其子容器后，才会被渲染出来。
        var stage = new Hilo.Stage({
            renderType: 'canvas',
            container: document.getElementById('game-container'),  //父容器
            width: 320,
            height: 480
        });
       // 2.创建可视对象
       // 舞台上的一切对象都是可视对象，可以是图片、精灵、文字、图形，甚至DOM元素等等。Hilo提供了一些基本的可视类供您使用，比如添加一个图片到舞台上：
        var bird = new Hilo.Bitmap({
            image: 'images/bird.png'
            , rect: [0, 0, 100, 100]
        }).addTo(stage);

        // 3.创建定时器
        // 舞台Stage上的物体的运动等变化，都是通过一个定时器Ticker不断地调用Stage.tick()方法来实现刷新的。      
        var ticker = new Hilo.Ticker(1); // 指定定时器的运行帧率。默认60。
        ticker.addTick(stage);
        ticker.start();

        // 4.事件交互
        // 要想舞台上的图形、精灵动画等对象能响应用户的点击、触碰等交互事件，就必需先为舞台开启DOM事件响应，然后就可以使用View.on()来响应事件。
        stage.enableDOMEvent(Hilo.event.POINTER_START, true);
        bird.on(Hilo.event.POINTER_START, function (e) {
            console.log(e.eventTarget, e.stageX, e.stageY);
        });

        // 5.监听舞台的变化-实际就是定时执行
        // onUpdate:Function
        // 更新可视对象，此方法会在可视对象渲染之前调用。此函数可以返回一个Boolean值。若返回false，则此对象不会渲染。默认值为null。 限制：如果在此函数中改变了可视对象在其父容器中的层级，当前渲染帧并不会正确渲染，而是在下一渲染帧。可在其父容器的onUpdate方法中来实现。
        this.stage.onUpdate = function () {
            console.log("sela"); // 根据定时器情况会定时执行
        }
    </script>
</body>
</html>

小恐龙游戏

小恐龙游戏过程

前期准备就绪，开始你的表演（shou nue）了。

目录结构

参考flappy bird可以把小恐龙游戏也划分几大类：

1.Asset.js 静态资源类，存储各类静态资源-只有一张sprite图
2.Trex.js 小恐龙类，记录小恐龙的行为
3.Holdbacks.js 障碍物类，记录障碍物
4.background.js 地面背景-实际简化在game.js了
5.game.js 记录主游戏过程

游戏状态：
ready 准备开始
playing 进行中
over 结束

起跳运动

小恐龙上跳过程可以看作是一个竖直上抛运动，根据位移公式可以得到上抛的高度。

根据位移公式：

// 飞行时间
var time = (+new Date()) - this.flyStartTime;
// 飞行距离 - 根据竖直上抛运动位移计算公式
var distance = this.initVelocity * time - 0.5 * this.gravity * time * time;
// y轴坐标
var y = this.flyStartY - distance;

地面无缝缓动

通过观察图片，前600px基本直线，通过代码拼接600px形成对称，在循环运动来就可以达到无缝连接。利用HiloJS的Container类，将ground1和ground2合成一个ground，合并运动，这样避免单独设置缓动。

代码实现如下：

  // 地面
 this.ground1 = new Hilo.Bitmap({
    id: 'ground1',
    image: this.asset.trexSprites,
    rect:[0,52, 1200, 68]
}).addTo(this.stage);

this.ground2 = new Hilo.Bitmap({
    id: 'ground2',
    image: this.asset.trexSprites,
    rect:[0,52, 600, 68]
});

this.ground1.x = 0;
this.ground2.x = this.ground1.x+1200;
//设置地面的y轴坐标
this.ground1.y = this.ground2.y = this.height - this.ground1.height;

// 将ground1和ground2合成一个ground，合并运动
this.ground = new Hilo.Container({
}).addTo(this.stage);
// 地面y轴-给小恐龙类和障碍物类作基准
this.ground.groundY = this.ground1.y;
this.ground.addChild(this.ground1,this.ground2);

// 地面缓动        
this.groundTween = Hilo.Tween.to(this.ground, {
    x: -1200
}, {
    time: 5000,
    loop: true
});

效果图：

小恐龙动画

游戏状态：
ready 准备开始
playing 进行中
over 结束

根据游戏状态有3种，小恐龙的变化也有3种，第一个是准备状态，第二个是走路状态，第三个是碰撞时瞳孔睁大状态。如何在Trex类中实现这3种状态的变化呢？

可以使用动画精灵类Sprite。将用到的sprite图放到TextureAtlas（TextureAtlas纹理集是将许多小的纹理图片整合到一起的一张大图。这个类可根据一个纹理集数据读取纹理小图、精灵动画等。）

this.trexAtlas = new Hilo.TextureAtlas({
            image: properties.image,
            frames: [
                [38,0, 44, 47],
                [765, 0, 44, 47],
                [809, 0, 44, 47],
                [853, 0, 44, 47],
                [853, 0, 44, 47],
            ],
            sprites: {
                trexReady: [0], // 准备状态
                trexRuning: [1,2], // 进行中
                trexOver: [3,4]  // 结束状态
            }
        });

然后再根据游戏状态进行添加到游戏场景中

1 2	// 添加trexRuning sprite，从index为0开始添加。 this.addFrame(this.trexAtlas.getSprite('trexRuning'),0);

需要注意的是，添加时如果后面sprite数<前面的，则会在保留后面的帧。如果你想覆盖就再加一帧。

碰撞检测

HiloJS有检测指定对象是否相交的方法，能够很方便用于碰撞检测。

1 2	// 检测object参数指定的对象是否与其相交。 hitTestObject(object:View, usePolyCollision:Boolean)

// 障碍物类中-碰撞检测
checkCollision: function(trex) {
    for (var i = 0, len = this.children.length; i < len; i++) {
        if (trex.hitTestObject(this.children[i], true)) {
            return true;
        }
    }
    return false;
}

监测碰撞时还有个问题需要注意：注意碰撞的区域，可以通过设置boundsArea进行人工描边碰撞体。

1 2	// 可视对象的区域顶点数组。格式为：[{x:10, y:10}, {x:20, y:20}] boundsArea:Array

恐龙动画

游戏声效

恐龙上跳和游戏失败的声效采用Hilo中WebSound实现，Hilo还有HTMLAudio、WebAudio模块，大家可以查看api按需使用。

var audio = WebSound.getAudio({
    src: 'test.mp3',
    loop: false,
    volume: 1
}).on('load', function(e){
    console.log('load');
}).on('end', function(e){
    console.log('end');
}).play();

官方代码传送门

小结

Hilo版小恐龙游戏实现了大部分功能（除了记分和多种障碍物），已经可以简单的玩起来了。因为已经达到我熟悉HiloJS的初衷，所以没有继续再完善。有兴趣的可以自己完善。
游戏规划，思考运动技巧-比如无缝连接的方式，方式有多种，如何实现才简洁明了。
Hilo库的api的使用讲解不太明确，有时需要查看源码来理解用法。

本文的Hilo-trex源码地址：https://github.com/sela0629/Hilo_project

参考文章

Hilo官方教程

Chrome自带恐龙小游戏的源码研究

展开全文 >>

前端异常问题及处理方案

2020-01-27

前端错误处理和调试

为什么要处理异常
js中的错误类型
常用异常处理函数解析
前端常见异常问题
错误上报
总结
参考文章

为什么要处理异常

前端一直是距离用户最近的一层，随着产品的日益完善，我们会更加注重用户体验，而前端异常却如鲠在喉，甚是烦人。

异常是不可控的，会影响最终的呈现结果，但是我们有充分的理由去做这样的事情。

1.增强用户体验；

2.远程定位问题；

3.未雨绸缪，及早发现问题；

4.无法复线问题，尤其是移动端，机型，系统都是问题；

5.完善的前端方案，前端监控系统；

对于 JS 而言，我们面对的仅仅只是异常，异常的出现不会直接导致 JS 引擎崩溃，最多只会使当前执行的任务终止。

js中的错误类型

除了通用的Error构造函数外，JavaScript还有7个其他类型的错误构造函数。更多客户端异常,详见 Exception Handling Statements。

EvalError

创建一个error实例，表示错误的原因：与 eval() 有关。

InternalError

创建一个代表Javascript引擎内部错误的异常抛出的实例。如: “递归太多”.

RangeError

创建一个error实例，表示错误的原因：数值变量或参数超出其有效范围。

ReferenceError

创建一个error实例，表示错误的原因：无效引用。

SyntaxError

创建一个error实例，表示错误的原因：eval()在解析代码的过程中发生的语法错误。

TypeError

创建一个error实例，表示错误的原因：变量或参数不属于有效类型。

URIError

创建一个error实例，表示错误的原因：给 encodeURI()或 decodeURl()传递的参数无效。

参考js错误类型

常用异常处理函数解析

try-catch

使用try-catch能够捕获一些异常，但是try-catch 只能捕获到同步的运行时错误，对语法和异步错误却无能为力，捕获不到。

1.同步运行时错误：

try {
  let name = ‘jartto’;
  console.log(nam);
} catch(e) {
  console.log(‘捕获到异常：’,e);
}

输出：

2.不能捕获到语法错误，我们修改一下代码，删掉一个单引号

try {
  let name = ‘jartto;
  console.log(nam);
} catch(e) {

  console.log(‘捕获到异常：’,e);
}

执行结果：

不过语法错误在我们开发阶段就可以看到，应该不会顺利上到线上环境。

3.异步错误

try {
  setTimeout(() => {
    undefined.map(v => v);
  }, 1000)
} catch(e) {
  console.log(‘捕获到异常：’,e);
}

执行结果：

从上面执行结果来看，并没有捕获到异常，这是需要我们特别注意的地方。

window.onerror

当 JS 运行时错误发生时，window 会触发一个 ErrorEvent 接口的 error 事件，并执行 window.onerror()。

/
 @param {String} message 错误信息
 @param {String} source 出错文件
 @param {Number} lineno 行号
 @param {Number} colno 列号
 @param {Object} error Error对象（对象）
/
window.onerror = function(message, source, lineno, colno, error) {
 console.log(‘捕获到异常：’,{message, source, lineno, colno, error});
}

首先试试同步运行时错误

window.onerror = function(message, source, lineno, colno, error) {
// message：错误信息（字符串）。
// source：发生错误的脚本URL（字符串）
// lineno：发生错误的行号（数字）
// colno：发生错误的列号（数字）
// error：Error对象（对象）
console.log(‘捕获到异常：’,{message, source, lineno, colno, error});
}
Jartto;

执行结果：

再试试语法错误呢？

window.onerror = function(message, source, lineno, colno, error) {
console.log(‘捕获到异常：’,{message, source, lineno, colno, error});
}
let name = ‘Jartto

执行结果：

怀着忐忑的心，我们最后来试试异步运行时错误：

window.onerror = function(message, source, lineno, colno, error) {
 console.log(‘捕获到异常：’,{message, source, lineno, colno, error});
}
setTimeout(() => {
 Jartto;
});

执行结果：

捕获到了异常，但是控制器同时打印了错误。

window.onerror 函数只有在返回 true 的时候，异常才不会向上抛出，否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx

window.onerror = function(message, source, lineno, colno, error) {
 console.log(‘捕获到异常：’,{message, source, lineno, colno, error});
 return true;
}
setTimeout(() => {
 Jartto;
});

执行结果如下，控制台就不会再有这样的错误了：

接着，我们试试网络请求异常的情况：

<script>
window.onerror = function(message, source, lineno, colno, error) {
 console.log(‘捕获到异常：’,{message, source, lineno, colno, error});
 return true;
}
</script>
<img src=“./jartto.png”>

执行结果：并未捕获到网络请求异常

我们发现，不论是静态资源异常，或者接口异常，错误都无法捕获到。

需要注意：

onerror 最好写在所有 JS 脚本的前面，否则有可能捕获不到错误；

onerror 无法捕获语法错误；

到这里基本就清晰了：在实际的使用过程中，onerror 主要是来捕获预料之外的错误，而 try-catch 则是用来在可预见情况下监控特定的错误，两者结合使用更加高效。

window.addEventListener

error 事件

当一项资源（如图片或脚本）加载失败，加载资源的元素会触发一个 Event 接口的 error 事件，并执行该元素上的onerror() 处理函数。这些 error 事件不会向上冒泡到 window ，不过（至少在 Firefox 中）能被单一的window.addEventListener 捕获。

chrome中尝试：

<script>
window.addEventListener(‘error’, (error) => {
 console.log(‘捕获到异常：’, error);
}, true)
</script>
<img src=“./jartto.png”>

由于网络请求异常不会事件冒泡，因此必须在捕获阶段将其捕捉到才行，但是这种方式虽然可以捕捉到网络请求的异常，但是无法判断 HTTP 的状态是 404 还是其他比如 500 等等，所以还需要配合服务端日志才进行排查分析才可以。

需要注意：

1、不同浏览器下返回的 error 对象可能不同，需要注意兼容处理。详情查看：Window: error event

2、需要注意避免 addEventListener 重复监听。

unhandledrejection事件

用来全局监听Uncaught Promise Error。

当Promise 被 reject 且没有 reject 处理器的时候，会触发 unhandledrejection 事件；这可能发生在 window 下，但也可能发生在 Worker 中。这对于调试回退错误处理非常有用。

详情查看：unhandledrejection

前端常见异常问题

对于前端来说，我们可做的异常捕获还真不少。总结一下，大概如下：

JS 语法错误、代码异常

AJAX 请求异常

静态资源加载异常

Promise 异常

Iframe 异常

跨域 Script error

崩溃和卡顿

JS 语法错误、代码异常

结合使用try-catch和window.onerror。在实际的使用过程中，onerror 主要是来捕获预料之外的错误，而 try-catch 则是用来在可预见情况下监控特定的错误，两者结合使用更加高效。

AJAX 请求异常

统一封装ajax对请求异常的进行上报或者相应错误处理。

静态资源加载异常

全局监控静态资源异常 window.addEventListener error 事件。

<script>
window.addEventListener(‘error’, (error) => {
 console.log(‘捕获到异常：’, error);
}, true)
</script>
<img src=“./jartto.png”>

Promise 异常

在 promise 中使用 catch 可以非常方便的捕获到异步 error ，这个很简单。

没有写 catch 的 Promise 中抛出的错误无法被 onerror 或 try-catch 捕获到，所以我们务必要在 Promise 中不要忘记写 catch 处理抛出的异常。

解决方案：为了防止有漏掉的 Promise 异常，建议在全局增加一个对 unhandledrejection 的监听，用来全局监听Uncaught Promise Error。使用方式：

window.addEventListener(“unhandledrejection”, function(e){
 console.log(e);
});

我们继续来尝试一下：

window.addEventListener(“unhandledrejection”, function(e){
 e.preventDefault()
 console.log(‘捕获到异常：’, e);
 return true;
});
Promise.reject(‘promise error’);

输出结果：

那如果对 Promise 不进行 catch 呢？

window.addEventListener(“unhandledrejection”, function(e){
 e.preventDefault()
 console.log(‘捕获到异常：’, e);
 return true;
});
new Promise((resolve, reject) => {
 reject(‘jartto: promise error’);
});

嗯，事实证明，也是会被正常捕获到的。

所以，正如我们上面所说，为了防止有漏掉的 Promise 异常，建议在全局增加一个对 unhandledrejection 的监听，用来全局监听 Uncaught Promise Error。

补充一点：如果去掉控制台的异常显示，需要加上：

event.preventDefault();

VUE errorHandler

Vue.config.errorHandler = (err, vm, info) => {
 console.error(‘通过vue errorHandler捕获的错误’);
 console.error(err);
 console.error(vm);
 console.error(info);
}

React 异常捕获

React 16 提供了一个内置函数 componentDidCatch，使用它可以非常简单的获取到 react 下的错误信息

componentDidCatch(error, info) {
 console.log(error, info);
}

除此之外，我们可以了解一下：error boundary

UI 的某部分引起的 JS 错误不应该破坏整个程序，为了帮 React 的使用者解决这个问题，React 16 介绍了一种关于错误边界（error boundary)的新观念。

需要注意的是： error boundaries 并不会捕捉下面这些错误。

1、事件处理器

2、异步代码

3、服务端的渲染代码

4、在 error boundaries 区域内的错误

我们来举一个小例子，在下面这个 componentDIdCatch(error,info) 里的类会变成一个 error boundary：

class ErrorBoundary extends React.Component {
 constructor(props) {
 super(props);
 this.state = { hasError: false };
 }

 componentDidCatch(error, info) {
 // Display fallback UI
 this.setState({ hasError: true });
 // You can also log the error to an error reporting service
 logErrorToMyService(error, info);
 }

 render() {
 if (this.state.hasError) {
 // You can render any custom fallback UI
 return <h1>Something went wrong.</h1>;
 }
 return this.props.children;
 }
}

然后我们像使用普通组件那样使用它：

<ErrorBoundary>
 <MyWidget />
</ErrorBoundary>

componentDidCatch() 方法像 JS 的 catch{} 模块一样工作，但是对于组件，只有 class 类型的组件(class component )可以成为一个 error boundaries 。

实际上，在react中，大多数情况下我们可以在整个程序中定义一个 error boundary 组件，之后就可以一直使用它了！

Iframe 异常

对于 iframe 的异常捕获，我们还得借力 window.onerror：

window.onerror = function(message, source, lineno, colno, error) {
 console.log(‘捕获到异常：’,{message, source, lineno, colno, error});
}

一个简单的例子可能如下：

<iframe src=“./iframe.html” frameborder=“0”></iframe>
<script>
 window.frames[0].onerror = function (message, source, lineno, colno, error) {
 console.log(‘捕获到 iframe 异常：’,{message, source, lineno, colno, error});
 return true;
 };
</script>

跨域 Script error

一般情况，如果出现 Script error 这样的错误，基本上可以确定是出现了跨域问题。这时候，是不会有其他太多辅助信息的，但是解决思路无非如下：

跨源资源共享机制( CORS )：我们为 script 标签添加 crossOrigin 属性。

<script src=“http://jartto.wang/main.js" crossorigin></script>

或者动态去添加 js 脚本：

const script = document.createElement(‘script’);
script.crossOrigin = ‘anonymous’;
script.src = url;
document.body.appendChild(script);

特别注意，服务器端需要设置：Access-Control-Allow-Origin

此外，我们也可以试试这个-解决 Script Error 的另类思路：

const originAddEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function (type, listener, options) {
 const wrappedListener = function (…args) {
 try {
 return listener.apply(this, args);
 }
 catch (err) {
 throw err;
 }
 }
 return originAddEventListener.call(this, type, wrappedListener, options);
}

简单解释一下：

1、改写了 EventTarget 的 addEventListener 方法；

2、对传入的 listener 进行包装，返回包装过的 listener，对其执行进行 try-catch；

3、浏览器不会对 try-catch 起来的异常进行跨域拦截，所以 catch 到的时候，是有堆栈信息的；

4、重新 throw 出来异常的时候，执行的是同域代码，所以 window.onerror 捕获的时候不会丢失堆栈信息；

利用包装 addEventListener，我们还可以达到「扩展堆栈」的效果：

(() => {
 const originAddEventListener = EventTarget.prototype.addEventListener;
 EventTarget.prototype.addEventListener = function (type, listener, options) {
+ // 捕获添加事件时的堆栈
+ const addStack = new Error(Event (<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">${type}</span>)).stack;
 const wrappedListener = function (…args) {
 try {
 return listener.apply(this, args);
 }
 catch (err) {
+ // 异常发生时，扩展堆栈
+ err.stack += ‘’ + addStack;
 throw err;
 }
 }
 return originAddEventListener.call(this, type, wrappedListener, options);
 }
 })();

崩溃和卡顿

卡顿也就是网页暂时响应比较慢， JS 可能无法及时执行。但崩溃就不一样了，网页都崩溃了，JS 都不运行了，还有什么办法可以监控网页的崩溃，并将网页崩溃上报呢？

崩溃和卡顿也是不可忽视的，也许会导致你的用户流失。

利用 window 对象的 load 和 beforeunload 事件实现了网页崩溃的监控。

不错的文章，推荐阅读：Logging Information on Browser Crashes。

window.addEventListener(‘load’, function () {
 sessionStorage.setItem(‘good_exit’, ‘pending’);
 setInterval(function () {
 sessionStorage.setItem(‘time_before_crash’, new Date().toString());
 }, 1000);
 });
 window.addEventListener(‘beforeunload’, function () {
 sessionStorage.setItem(‘good_exit’, ‘true’);
 });
 if(sessionStorage.getItem(‘good_exit’) &&
 sessionStorage.getItem(‘good_exit’) !== ‘true’) {
 /
 insert crash logging code here
 /
 alert(‘Hey, welcome back from your crash, looks like you crashed on: ‘ + sessionStorage.getItem(‘time_before_crash’));
 }

基于以下原因，我们可以使用 Service Worker 来实现网页崩溃的监控：

1、Service Worker 有自己独立的工作线程，与网页区分开，网页崩溃了，Service Worker一般情况下不会崩溃；

2、Service Worker 生命周期一般要比网页还要长，可以用来监控网页的状态；

3、网页可以通过 navigator.serviceWorker.controller.postMessage API 向掌管自己的 SW发送消息。

错误上报

通过 Ajax 发送数据

因为 Ajax 请求本身也有可能会发生异常，而且有可能会引发跨域问题，一般情况下更推荐使用动态创建 img 标签的形式进行上报。

动态创建 img 标签的形式

function report(error) {
 let reportUrl = ‘http://jartto.wang/report';
 new Image().src = <span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">${reportUrl}</span>?logs=<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">${error}</span>;
}

收集异常信息量太多，怎么办？实际中，我们不得不考虑这样一种情况：如果你的网站访问量很大，那么一个必然的错误发送的信息就有很多条，这时候，我们需要设置采集率，从而减缓服务器的压力：

Reporter.send = function(data) {
 // 只采集 30%
 if(Math.random() < 0.3) {
 send(data) // 上报错误信息
 }
}

采集率应该通过实际情况来设定，随机数，或者某些用户特征都是不错的选择。

总结

回到我们开头提出的那个问题，如何优雅的处理异常呢？

1、可疑区域增加 Try-Catch

2、全局监控 JS 异常 window.onerror

3、全局监控静态资源异常 window.addEventListener

4、捕获没有 Catch 的 Promise 异常：unhandledrejection

5、VUE errorHandler 和 React componentDidCatch

6、监控网页崩溃：window 对象的 load 和 beforeunload

7、跨域 crossOrigin 解决

其实很简单，正如上文所说：采用组合方案，分类型的去捕获异常，这样基本 80%-90% 的问题都化于无形。

参考文章

前端的水平线，错误处理和调试

如何优雅处理前端异常？

展开全文 >>

互联网常用术语汇总

2019-12-23

互联网人员术语：CEO、CTO、COO、CFO、PM、QA、UI、FE、DEV、DBA、OPS等。
互联网行业术语：B2B、B2C、C2C、O2O等

常用术语描述

互联网人员术语：CEO、CTO、COO、CFO、PM、QA、UI、FE、DEV、DBA、OPS等。

CIO（Chief Information Officer 首席信息官）：主要负责制定公司的信息政策、标准、程序的方法，并对全公司的信息资源进行管理和控制。

CEO（Chief Executive Officer 首席执行官）：主要负责企业日常经营管理决策。

CFO（Chief Financial Officer 首席财务官）：全面负责企业财务管理，翻译过来就是财神爷。

COO（Chief Operating Officer 首席运营官）：具体负责公司的日常运营。

CTO（Chief Technology Officer 首席技术官）：企业内负责技术的最高负责人，由于互联网的迅猛发展，有时CT0和CIO是同一个人。

CKO（Chief Knowledge Officer 首席知识官）：主要负责企业内部的知识管理等相关工作。

CPO（Chief Procurement Officer 首席采购官）：负责企业采购方面的全面工作。

CGO（Chief Game Officer 首席游戏官）：这个主要是游戏公司或网吧里设置的岗位或系统，一般企业里没有这样的岗。当然，也不排除一些前卫的公司针对90后特意设置这样的岗位。

CFO(Chief Financial Officer 首席财务官)：指公司首席财政官或财务总监，是现代公司中最重要、最有价值的顶尖管理职位之一，是掌握着企业的神经系统（财务信息）和血液系统（现金资源）灵魂人物。

PM项目经理( Project Manager )项目经理是项目团队的领导者，项目经理首要职责是在预算范围内按时优质地领导项目小组完成全部项目工作内容，并使客户满意。为此项目经理必须在一系列的项目计划、组织和控制活动中做好领导工作，从而实现项目目标。当然在互联网公司这个有着项目经理or产品经理的意思。

RD研发（Research and Development）如：软件RD工程师就是软件研发工程师，诸如PHP程序猿，Java程序猿，无论是爱疯的还是安卓的都是属于这一类别。偏向于后端的技术实现。

FE前端（Front-End）；前端开发（Front-End Development）FE是web前端研发、前端开发的意思！

UE用户体验（User Experience，简称UX或 UE）另外还有有个组合叫法：UED（产品交互设计师，用户体验师）。

UI用户界面（User Interface）UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。

QA测试（QUALITY ASSURANCE，中文意思是“质量保证”）

OP运维（Operations）

DBA数据库管理员（Database Administrator，简称DBA）是一个负责管理和维护数据库服务器的人。数据库管理员负责全面管理和控制数据库系统。这个职位对不同的人意味着不同的意义。另外还有DB，既数据库（Database）。

DEV即开发环境

互联网行业术语：B2B、B2C、C2C、O2O等

B2B（企业对企业的电子商务模式）

概念:B2B(也有写成BTB)是指企业对企业之间的营销关系，它将企业内部网，通过B2B网站与客户紧密结合起来，通过网络的快速反应，为客户提供更好的服务，从而促进企业的业务发展(Business Development)。近年来B2B发展势头迅猛，趋于成熟。
　　B2B是指进行电子商务交易的供需双方都是商家(或企业、公司)，她(他)们使用了互联网的技术或各种商务网络平台，完成商务交易的过程。电子商务是现代B2Bmarketing的一种具体主要的表现形式。

　　含有三要素

　　1.买卖：B2B网站平台为消费者提供质优价廉的商品，吸引消费者购买的同时促使更多商家的入驻。

　　2.合作：与物流公司建立合作关系，为消费者的购买行为提供最终保障，这是B2B平台硬性条件之一。

　　3.服务：物流主要是为消费者提供购买服务，从而实现再一次的交易。

　　代表网站：

　　阿里巴巴
　　阿里巴巴是国内也是全球最大的B2B电子商务网站。是中小企业首选的B2B平台，主要提供“诚信通”服务，但由于所有用户基本上都是“诚信通”客户。所以没有专业的电子商务运营能力和做阿里巴巴的其它推广业务，很难取得显著效果。

　　中国制造网
　　中国制造网是B2B电子商务行业网站后起之秀，干净的网站风格，实用的网站类容，深受用户喜爱。虽然位居中国B2B网站行业第三位，但由于“百销通”付费用户还不算多，听说效果还算不错，推荐做电子商务的企业尝试一下。

　　中国供应商
　　中国供应商是由中国互联网新闻中心主办的B2B贸易平台。提供多种样式的广告服务，但网站以免费普通会员居多，好好运营商铺，效果还可以。反正不要钱，建议多注册一个B2B平台尝试一下。

B2C（Business-to-Customer）

概念:B2C是Business-to-Customer的缩写，而其中文简称为“商对客”。“商对客”是电子商务的一种模式，也就是通常说的商业零售，直接面向消费者销售产品和服务。这种形式的电子商务一般以网络零售业为主，主要借助于互联网开展在线销售活动。B2C即企业通过互联网为消费者提供一个新型的购物环境——网上商店，消费者通过网络在网上购物、在网上支付。

　　网站组成

　　B2C电子商务网站由三个基本部分组成：

　　1、为顾客提供在线购物场所的商场网站;

　　2、负责为客户所购商品进行配送的配送系统;

　　3、负责顾客身份的确认及货款结算的银行及认证系统。

　　代表网站：

　　天猫——为人服务做平台

　　京东——自主经营卖产品

　　凡客——自产自销做品牌

C2C

概念:C2C实际是电子商务的专业用语，是个人与个人之间的电子商务。C2C的意思就是个人与个人之间的电子商务。比如一个消费者有一台电脑，通过网络进行交易，把它出售给另外一个消费者，此种交易类型就称为C2C电子商务。

　　代表网站：淘宝网易趣网拍拍网
　　毫无疑问，淘宝在C2C领域的领先地位暂时还没有人能够撼动。然而，淘宝却也不得不承受这份领先带来的沉甸甸压力。在领先与压力之间，淘宝在奋力往前走

O2O（Online To Offline）

概念:O2O是目前微信二维码营销的超火概念，即Online To Offline，也即将线下商务的机会与互联网结合在了一起，让互联网成为线下交易的前台。
　该模式最重要的特点是：推广效果可查，每笔交易可跟踪。O2O营销模式的核心是在线预付，在线支付不仅是支付本身的完成，是某次消费得以最终形成的唯一标志，更是消费数据唯一可靠的考核标准。

优势:O2O的优势在于把网上和网下的优势完美结合。通过网购导购机，把互联网与地面店完美对接，实现互联网落地。让消费者在享受线上优惠价格的同时，又可享受线下贴身的服务。同时，O2O模式还可实现不同商家的联盟。

P2C（Production to Consumer）

概念:P2C即Production to Consumer简称为商品和顾客，产品从生产企业直接送到消费者手中，中间没有任何的交易环节。是继B2B、B2C、C2C之后的又一个电子商务新概念。在国内叫做：生活服务平台。

　　P2C把老百姓日常生活当中的一切密切相关的服务信息，如房产、餐饮、交友、家政服务、票务、健康、医疗、保健等聚合在平台上，实现服务业的电子商务。

O2O、C2C、B2B、B2C的区别在哪里？

O2O是Online to offline分为四种运营模式：

Online to offline是线上交易到线下消费体验

offline to online是线下营销到线上交易

offline to Online to offline是线下营销到线上交易再到线下消费体验

Online to offline to online是线上交易或营销到线下消费体验再到线上消费体验

　　比如:保险直购O2O,苏宁易购O2O,大众点评O2O等

C2C是Consumer to Consumer就是个人对个人的，比如淘宝的小店铺。

B2C是Business to consumer是商家对个人，这个就很多了卓越、当当、京东等等都是。

B2C、C2C很重要的一点是都运用了物流。

B2B是Business to Business是企业间的，比如阿里巴巴。

举例通俗说明一下就是：

C2C就是我卖东西你来买

B2C就是我成立个公司卖东西，你来买

O2O就是我成立个公司卖东西你来买但是要你自己来拿

B2B就是你也成立了公司买我公司的东西

电子商务模式汇总

B2B(经济组织对经济组织)

B2C(经济组织对消费者)

B2B2C(企业对企业对消费者)

C2C(消费者对消费者)

O2O(网上与网下相结合)

P2C(生活服务平台)

P2P(点对点、渠道对渠道)

参考资料：
终于理解了020、B2B、B2C等这些术语
https://www.jianshu.com/p/f14892651c38

展开全文 >>

micro-Templating源码解析

2019-12-23

formatJson是legos开发模式下很常用的js模板引擎。它其实是jQuery的创始人John Resig 2008年写的Micro-Templating。虽然代码有些旧了，但是其中的思想还是值得借鉴的。

define("formatJson", function(require, exports, module) {
  var _formatJson_cache = {};

  $formatJson = function(str, data) {
    /* 模板替换,str:模板id或者内容，data:数据内容
			\W：匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。
			如果是id,并且cache中有值，直接返回，否则获取innerHTML，再次解析；
			如果不是id，解析并存入cache
		 */
    var fn = !/\W/.test(str)
      ? (_formatJson_cache[str] =
          _formatJson_cache[str] ||
          $formatJson(document.getElementById(str).innerHTML))
      : new Function(
          "obj",
          "var p=[],print=function(){p.push.apply(p,arguments);};" +
            "with(obj){p.push('" +
            str
              .replace(/[\r\t\n]/g, " ")
              .split("<%")
              .join("\t")
              .replace(/((^|%>)[^\t]*)'/g, "$1\r")
              .replace(/\t=(.*?)%>/g, "',$1,'")
              .split("\t")
              .join("');")
              .split("%>")
              .join("p.push('")
              .split("\r")
              .join("\\'") +
            "');}return p.join('');"
        );
    return data ? fn(data) : fn;
  };

  exports.render = $formatJson;
});

稍稍整理下，将字符替换部分提出来·

define("formatJson", function(require, exports, module) {
  var _formatJson_cache = {};

  $formatJson = function(str, data) {
    // \W	匹配非字母、数字、下划线。等价于 '[^A-Za-z0-9_]'。
    var fn = !/\W/.test(str)
      ? // 只有模板才有非字母数字字符，用来判断传入的是模板id还是模板字符串，
        // 如果是id的话，判断是否有缓存，没有缓存的话调用$formatJson
        // 如果是模板的话，就调用new Function()解析编译
        (_formatJson_cache[str] =
          _formatJson_cache[str] ||
          $formatJson(document.getElementById(str).innerHTML))
      : new Function(
          "obj", // 解析成html
          "var p=[],print=function(){p.push.apply(p,arguments);};" +
            // 使用with将数据作为局部变量引入
            "with(obj){p.push('" +
            getStr(str) +
            "');}return p.join('');"
        );
    return data ? fn(data) : fn;
  };

  // 将模板转换为纯JavaScript
  function getStr(str) {
    // 1.删除回车，制表，换行
    str = str.replace(/[\r\t\n]/g, " ");

    // 2.替换 <% 为 \t制表符，两种情况（赋值和js代码）
    // 赋值： 例如 <div id="<%=id%>">  ==>  <div id="\t=id%>">
    // js代码：例如 <% for ( var i = 0; i < items.length; i++ ) { %>  ==>  \t for ( var i = 0; i < items.length; i++ ) { %>
    str = str.split("<%").join("\t");

    // 3.替换'为\r ，最后一步会重新替换回来
    // 节点属性操作赋值使用单引号，如果不替换 ,''>' 是会报错的
    // <div style='background:<%=color%>'><%=id%></div>   ==> p.push(' <div style='background:',color,''>',id,'</div>        ');
    str = str.replace(/((^|%>)[^\t]*)'/g, "$1\r");

    // 4.赋值解析：赋值后部分，拆分为三项，结合with，id就会成为实际的值，然后一直被push  <div id="\t=id%>"> ==>    <div id=" ,id, ">
    // 这里会消费掉 <%=xxx%>，
    // 那么剩下的 %>必然是js语句结尾的, \t必然是js语句的开头
    str = str.replace(/\t=(.*?)%>/g, "',$1,'");

    // 5.js语句开始符号替换： 经过上一步后，还剩余的\t，是js语句的，这里就用 ');来结束 ，js语句会单开p.push,
    str = str.split("\t").join("');");

    // 6.js语句结尾符号替换： %> 替换为 p.push, 这里把js语句内生成的字符串或者变量再push一次
    str = str.split("%>").join("p.push('");

    // 7.替换回车为\' ， 恢复str.replace(/((^|%>)[^\t]*)'/g, "$1\r") 去掉的'
    str = str.split("\r").join("\\'");

    return str;
  }

  exports.render = $formatJson;
});

模板的语法很简单，有三条基本规则

1.用正常的方式书写html

2.用<% %>嵌套JavaScript语句

3.用<%= %>嵌套JavaScript 变量值

应用举例：

// tpl模板
<% for ( var i = 0; i < items.length; i++ ) { %>
        <% if( i%2 == 0) {%>
            <li><%=items[i].id%>:<%=items[i].name%></li>
        <% } %>
    <% } %>
    <% print('数组长度' + items.length ); %>
    <div style='background:<%=color%>'><%=id%></div>


// data数据

let data={
  id: '158015777',
  i: 10,
  profile_image_url: '',
  from_user: 'Tom cCom',
  text: '啊哈哈',
  color: 'red',
  items: [
    {
      id: 1,
      name: 'Order1'
    }, {
      id: 2,
      name: 'Order2'
    },
    {
      id: 3,
      name: 'Order2'
    }
  ]
}

1
2
3

// 通过模板和data解析的html

<li>1:Order1</li>                                                                                    <li>3:Order2</li>                                数组长度3         <div style="background:red">158015777</div>

// 经过 getStr 处理后

'); for ( var i = 0; i < items.length; i++ ) { p.push('
        '); if( i%2 == 0) {p.push('
            <li>',items[i].id,':',items[i].name,'</li>
        '); } p.push('
    '); } p.push('
    '); print('数组长度' + items.length ); p.push('
    <div style=\'background:',color,'\'>',id,'</div>

/*加上头尾
 "var p=[],print=function(){p.push.apply(p,arguments);};" +
            // 使用with将数据作为局部变量引入
            "with(obj){p.push('" +
            getStr(str) +
            "');}return p.join('');"
*/

var p = [],
  print = function() {
      // arguments 是一个对应于传递给函数的参数的类数组对象。
    p.push.apply(p, arguments);
  };
with (obj) {
  p.push("");
  for (var i = 0; i < items.length; i++) {
    p.push("");
    if (i % 2 == 0) {
      p.push("<li>", items[i].id, ":", items[i].name, "</li>");
    }
    p.push("");
  }
  p.push("");
  print("数组长度" + items.length);
  p.push("<div style='background:", color, "'>", id, "</div>");
}
return p.join("");

步骤分解解释：

第一步: replace(/[\r\t\n]/g, “ “)
去掉回车，换行，制表

<% for ( var i = 0; i < items.length; i++ ) { %>                 
    <% if( i%2 == 0) {%>                 
        <li><%=items[i].id%>:<%=items[i].name%></li>             
    <% } %>          
<% } %>         
<% print('数组长度' + items.length ); %>         
<div style='background:<%=color%>'><%=id%></div>

第二步: split(“<%”).join(“\t”)
<%替换为\t

\t for ( var i = 0; i < items.length; i++ ) { %>                 
    \t if( i%2 == 0) {%>                 
        <li>\t=items[i].id%>:\t=items[i].name%></li>             
    \t } %>          
\t } %>         
\t print('数组长度' + items.length ); %>         
<div style='background:\t=color%>'>\t=id%></div>

第三步: replace(/((^|%>)[^\t]*)’/g, “$1\r”)
替换需要保留的’为\r, 主要是节点属性操作

\t for ( var i = 0; i < items.length; i++ ) { %>                 
    \t if( i%2 == 0) {%>                 
        <li>\t=items[i].id%>:\t=items[i].name%></li>             
    \t } %>          
\t } %>         
\t print('数组长度' + items.length ); %>         
<div style=\rbackground:\t=color%>\r>\t=id%></div>

第四步: replace(/\t=(.*?)%>/g, “‘,$1,’”)
赋值部分替换，’,$1,’,实际是把赋值部分独立出来，那么push到这里的时候，就会进行运算

\t for ( var i = 0; i < items.length; i++ ) { %>                 
    \t if( i%2 == 0) {%>                 
    <li>',items[i].id,':',items[i].name,'</li>             
    \t } %>          
\t } %>         
\t print('数组长度' + items.length ); %>         
<div style=\rbackground:',color,'\r>',id,'</div>

第五步: split(“\t”).join(“‘);”)
剩下的\t，代表了js语句开始部分， js语句\t替换为’); ，正是push的结束部分，正好完成push语句

'); for ( var i = 0; i < items.length; i++ ) { %>                 
    '); if( i%2 == 0) {%>                 
        <li>',items[i].id,':',items[i].name,'</li>              
    ');} %>          
'); } %>         
'); print('数组长度' + items.length ); %>         
<div style=\rbackground:',color,'\r>',id,'</div>

第六步: split(“%>”).join(“p.push(‘“);
剩下的%>体表了js语句的结束，替换为p.push(‘“，开启新的环节

'); for ( var i = 0; i < items.length; i++ ) { p.push('                 
    '); if( i%2 == 0) {p.push('                 
        <li>',items[i].id,':',items[i].name,'</li>             
    '); } p.push('          
'); } p.push('         
'); print('数组长度' + items.length ); p.push('         
<div style=\rbackground:',color,'\r>',id,'</div>

第七部： split(“\r”).join(“\’”)
替换\r为’ ，恢复str.replace(/((^|%>)[^\t]*)’/g, “$1\r”) 去掉的’

'); for ( var i = 0; i < items.length; i++ ) { p.push('
    '); if( i%2 == 0) {p.push('                 
        <li>',items[i].id,':',items[i].name,'</li>             
    '); } p.push('          
'); } p.push('         
'); print('数组长度' + items.length ); p.push('         
<div style=\'background:',color,'\'>',id,'</div>

加上头尾

var p=[],print=function(){p.push.apply(p,arguments);};with(obj){p.push('
'); for ( var i = 0; i < items.length; i++ ) { p.push('
    '); if( i%2 == 0) {p.push('                 
        <li>',items[i].id,':',items[i].name,'</li>             
    '); } p.push('          
'); } p.push('         
'); print('数组长度' + items.length ); p.push('         
<div style=\'background:',color,'\'>',id,'</div>  
');}return p.join('');

最后格式化一下

var p = [], print = function () { p.push.apply(p, arguments); }; with (obj) {
    p.push('    '); for (var i = 0; i < items.length; i++) {
        p.push('        '); if (i % 2 == 0) {
            p.push('            < li > ', items[i].id, ': ', items[i].name, '</li >            ');
        }
        p.push('      ');
    }
    p.push('      ');
    print('数组长度' + items.length); p.push('                    < div style =\'background:', color, '\'>', id, '</div>      ');
}
return p.join('');

参考资料：

Micro Templating例子
https://codepen.io/xiangwenhu/pen/dJdGBj/

Micro Templating源码分析
https://www.cnblogs.com/cloud-/p/8253123.html

最简单的JavaScript模板引擎
https://www.cnblogs.com/dolphinX/p/3489269.html

展开全文 >>

Javascript中的this

2019-12-23

作为对象方法调用
作为构造函数调用
使用 apply 或 call,bind 调用
不同环境this的取值
参考资料：

This指代函数当前的运行环境。

JavaScript 中的 this，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript 中函数的调用有以下几种方式：

1.作为对象方法调用

2.作为函数直接调用

3.作为构造函数调用

4.使用 apply 或 call,bind 调用

我们将按照调用方式的不同，分别讨论 this 的含义。

作为对象方法调用

在 JavaScript 中，函数也是对象，因此函数可以作为一个对象的属性，此时该函数被称为该对象的方法，在使用这种调用方式时，this 被自然绑定到该对象

var test = {     
    a:0,     
    b:0,
    get:function(){
        return this.a;     
     } 
}
console.log(test.get()) //0

var prop=30
var O={prop:37}
function independent(){
 return this.prop
}
O.f=independent

console.log(O.f()) //37  作为对象方法调用

console.log(independent()) //30  作为函数直接调用

由此可见this是动态作用域，this的指向关键是看函数怎么调用而不是怎么创建。

作为函数直接调用
函数也可以直接被调用，此时 this 绑定到全局对象（在严格模式下为undefined）。在浏览器中，window 就是该全局对象。

function fn1 (){
　　return this
}
console.log(fn1())  //window

function fn2 (){
    "use strict";//see strict mode
　　return this
}
console.log(fn2 ())  //undefined

作为构造函数调用

当函数作为构造函数调用时,this代表new出来的对象，并且对象的原型会指向构造器的prototype(构造器是Foo、foo.constructor=Foo )
如果没有使用new而是直接调用函数,this===window;

function Foo (name){
　　this.name = name ;
　　console.log(this)
}
var foo = new Foo('Emma');  //Foo {name: "Emma"} 
Foo() //window

使用 apply 或 call,bind 调用

apply 和 call允许切换函数执行的上下文环境（context），即 this 绑定的对象。this取得的是apply() 、call()、 bind()调用时传入的第一个参数（bind是ES5提供的方法，所以只有IE9及以上才支持）

apply()、call()

function add(c,d){
    return this.a + this.b +c + d;
}

var O = {a:1,b:3}
 
add.call(O,5,7); //1+3+5+7

add.apply(O,[10,20]) //1+3+10+20

function bar(){
    console.log(Object.prototype.toString.call(this))
}

bar.call(7) // "[object Number]"

bind()改变this取值

function f(){
    return this.a
}

var g = f.bind({a:"test"})
console.log(g()); //test

var O = {a:37,f:f,g:g};
console.log(O.f(),O.g()) //37,test

bind与new（用new调用bind改变不了this取值）

function foo(){
	this.b=100;
	return this.a
}
var func = foo.bind({a:1})
func(); //1
new func(); //{b:100}

直接调用func()，this会指向bind中的参数，所以返回值为1，由于执行this.b=100,所以this对象会有个b属性，最终this为{a: 1, b: 100}。用new的话return如果不是对象会把this作为返回值，并且this会被初始化为一个默认的空对象，对象的原型是构造器的prototype，所以这里虽然用了bind的方法，但是this仍然会指向没有bind的情况。this指向空对象，空对象的原型指向foo.prototype，空对象的b属性会设置为100，整个对象会作用返回值(return this.a 被忽视）所以结果为{b:100}.

bind与currying(函数柯里化：把一个函数拆成多个单元）

function add(a,b,c){
	return a + b + c
}

var func = add.bind(undefined,100);
func(1,2) //103 (100 + 1 +2)

var func2 = func.bind(undefined,200);
func2(10) //310 (100+ 200 + 10)

有时候不需要一次性把函数都调用完，而是调用一次把前几个参数传完了以后得到了一个函数再去调用，并且每次都传入自己所需要传入的值。

add.bind不需要改变this，那么就传入undefined（null也可），但是我们提供了额外参数100，那么bind方法就会把100赋值给a,再调用的时候1会给b，2就会给c，所以最后答案是103。再func.bind一次a上次绑定了100，b就会绑定为200，再调用func2传入值为10,10赋值为c,所以func2调用结果为310。

function getConfig(color,size,otherOptions){
    console.log(color,size,otherOptions)
}

var defaultConfig=getConfig.bind(null,"#cc0000","1024*768");

defaultConfig("123") //#cc0000","1024*768,123
defaultConfig("456") //#cc0000","1024*768,456

不同环境this的取值

全局作用域中this(浏览器)

全局作用域中的this一般指向全局对象，在浏览器中全局对象就是window

console.log(window.document===document) //true
console.log(this===window) //true
this.a=37
console.log(window.a) //37

对象原型链上的this

var o={ f:function(){ this.a + this.b } }
var p=Object.create(o)
p.a=1
p.b=4
console.log(p.f()) //5

p是空对象并且它的原型会指向o(p.proto===o)，调用原型上的方法（对象本身没有此方法会沿着原型链向上查找，原型链上的this也可以指向Object.create创建的对象，此this的指向与new创建实例对象的指向类似）this.a和this.b仍然能取到对象p上的a和b。即原型链上的this可以指向所在的对象（p对象）

注：p的构造器不为o，为Object（p.constructor===Object），这是用Object.create创建对象与new实例创建对象的不同,如果是new创建的实例对象构造器就是o。

get/set方法与this

此时this的指向与原型链上的this的指向类似

function modules(){
    return Math.sqrt(this.re*this.re + this.im*this.im)
}

var o={
    re:1,
    im:-1,
    get phase(){
        return Math.atan2(this.im,this.re)
   }
}

Object.defineProperty(o,"modules",{
    get:modules,enumerable:true,configurable:true
})

console.log(o.phase,o.modules) //logs -0.781.4142

get、set方法中的this，一般情况下也是会指向get，set方法所在的对象（与一般对象属性作为函数对象类似）。

参考资料：

JavaScript 的 this 原理

http://www.ruanyifeng.com/blog/2018/06/javascript-this.html

展开全文 >>

ES6 常用语法整理

2019-12-23

1 新的变量声明方式
2 解析结构
3 字符串
4 函数默认值
5 箭头函数
6 对象字面量简写
7 Promise
9 export与import
10 assign
参考文章：

1 新的变量声明方式

ES6中，使用let和const代替var定义变量。let用于定义一个变量，const用于定义一个常量,其中const定义的对象只是对象的地址不变，对象的属性是可以增加或者删除的。
使用var定义变量时，会有一些问题，如变量声明提前,ES6中禁止了。

//ES5
console.log(a); //输出undefined
var a=0;

//ES56
console.log(a); //直接报错，取消变量声明提前
var a=0;

var定义变量只存在全局作用域和函数作用域，其他大括号中不存在块级作用域,let&const定义的变量在所有大括号中都存在块级作用域。

//ES5
{
    let b=0;
}
console.log(b);//输出0

//ES6
{
    let b=0;
}
console.log(b);//报错，b未定义,b的作用域在上面的括号内

let&const定义的变量不能再使用window对象调用

var c=0;
console.log(window.c);  //输出0
let d=0;
console.log(window.d);  //输出undefined

使用let&const的特点：

禁止变量声明提前
增加了块级作用域，任何大括号都可以形成块级作用域
const定义的对象属性值依然可以改变，但地址不能改变。
let&const定义的全局变量不作为window的变量

2 解析结构

let [a,b,c]=[
    1,
    2,
    3
];
console.log(a,b,c);//输出1,2,3
let {d,e,f}={
	d:4,
	e:5,
	f:6
};
console.log(d,e,f);//输出4,5,6

解析结构可以让我们快速的将接口返回的数据赋值到变量上。

同时，只要数组的下标对应或对象的键名对应都可以实现解析结构

//数组的下标对应，将第一个跟第三个取出并赋值给a、c变量
let [a,,c]=[
    1,
    2,
    3
];
console.log(a,c);//输出1,3
//对象的键名对应，将键名为d、f的键值赋值给d，f变量
let {d,f}={
	d:4,
	e:5,
	f:6
};
console.log(d,f);//输出4,6

3 字符串

3.1 模板字符串
模板字符串使用反单引号包围，在字符串中可以使用变量,通过${ }的形式插入变量

//ES5
var name="李雷";
var age=21;
console.log('你好'+name+','+'我今年'+age+'岁');//输出 你好李雷，我今年21岁
//ES6
let name="李雷";
let age=21;
console.log(`你好${name},我今年${age}岁`);//输出 你好李雷，我今年21岁


在${}之中，除了能够解析变量以外，还可以解析js表达式,如三元表达式等。

console.log(`${1===1?'true':'false'}`)

3.2与字符串有关的API

ES6中引入了一些新的处理字符串的API

1
2
3

let str='lilei';
console.log(str.startsWith('li'));//输出true
console.log(str.endsWith('lei'));//输出true

startsWith()接收一个字符串，判断调用该方法的字符串是否以接收的字符串参数作为开头，endsWith()接收一个字符串，判断调用该方法的字符串是否以接收的字符串参数作为结尾。

4 函数默认值

函数的参数可以预设默认值

function showNumber(number=0) {
    console.log(number);
}
showNumber();   //输出0

5 箭头函数

实现调用一次obj.addCount方法就使obj.count加一。

//ES5
var obj={
    count:0,
    addCount:function() {
        var that=this;  //定义一个变量暂时保存this指向的obj对象，方便在闭包中使用
        setTimeout(function() { 
            that.count++;
            console.log(that.count);
        },1000);
    }
};
obj.addCount();//输出1
//ES6
const obj={
    count:0,
    addCount:function() {
        setTimeout(()=> {   //使用箭头函数修改this指向的上一作用域变量的上下文对象
            this.count++;
            console.log(this.count);
        },1000);
    }
};
obj.addCount();//输出1

箭头函数就是将function(){}改写为()=>,箭头函数内的this指向外层的this指向的对象，这里是addCount函数的作用域中的this指向的obj对象，这是箭头函数最重要的特性。

箭头函数内只有一条js语句时，可以省略大括号

let fun=()=>{console.log('Hello World')};
//简写为
let fun=()=>console.log('Hello World');
fun();  //输出Hello World

6 对象字面量简写

6.1 对象字面量中赋值简写
对象字面量中相同键名与键值同名的情况可以简写。

//ES5
var name='lilei';
var obj={
    name:name
}
//ES6
let name='lilei';
let obj={
    name
}

6.2 对象字面量中声明函数简写

//ES5
var obj={
    hello:function() {
        console.log('Hello World');
    }
}
//ES6
let obj={
    hello() {
        console.log('Hello World');
    }
}

6.3 动态键名
使用中括号表示动态的键名

let key='name';
const obj={
    [key]:'李雷'
};
console.log(obj.name);  //输出李雷

7 Promise

可能你还没有遇到过回调地狱，但是JS作为一门异步编程的语言，学习Promise十分重要，它可以让我们优雅的编写异步程序

https://juejin.im/post/5d6cc40bf265da03ca1186fd

Promise 对象有三种状态：

1.pending：刚刚创建一个 Promise 实例的时候，表示初始状态;

2.fulfilled：resolve 方法调用的时候，表示操作成功;

3.rejected：reject 方法调用的时候，表示操作失败;

then()函数

Promise实例生成以后，可以用then()方法分别指定resolved状态和rejected状态的回调函数，用于绑定处理操作后的处理程序。

promise.then(function(value) {
  // 操作成功的处理程序
}, function(error) {
  // 操作失败的处理程序
});

then()方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。
说简单点就是参数是两个函数，第一个用于处理操作成功后的业务，第二个用于处理操作异常后的业务。

// 首先用 new 关键字创建一个 `Promise` 实例
const promise = new Promise(function(resolve, reject){
    // 假设 state 的值为 true
    let state = true;
    if( state ){
        // 调用操作成功方法
        resolve('操作成功');
        //状态：从pending 到 fulfilled
    }else{
        // 调用操作异常方法
        reject('操作失败');
        //状态：从pending 到 rejected
    }
});
promise.then(function (res) {
    //操作成功的处理程序
    console.log(res)
}).catch(function (error) {
    //操作失败的处理程序
    console.log(error)
})
// 控制台输出：操作成功

上面示例介绍了从创建实例，状态转换，then方法和catch方法的使用。

如果多个操作之间层层依赖，我们用Promise又是怎么处理的呢？

const promise = new Promise(function(resolve, reject){
  if( true ){
    // 调用操作成功方法
    resolve('操作成功');
    //状态：从pending 到 fulfilled
  }else{
    // 调用操作异常方法
    reject('操作失败');
    //状态：从pending 到 rejected
  }
});
promise.then(a)
       .then(b)
       .then(c)
       .catch(requestError);

function a() {
    console.log('请求A成功');
    return '请求B，下一个是谁';
}
function b(res) {
    console.log('上一步的结果：'+ res);
    console.log('请求B成功');
    return '请求C，下一个是谁';
}
function c(res) {
    console.log('上一步的结果：'+ res);
    console.log('请求C成功');
}
function requestError() {
    console.log('请求失败');
}

输出结果：

上面的代码，先是创建一个实例，还声明了4个函数，其中三个是分别代表着请求A，请求B，请求C；有了then方法，三个请求操作再也不用层层嵌套了。我们使用then方法，按照调用顺序，很直观地完成了三个操作的绑定，并且，如果请求B依赖于请求A的结果，那么，可以在请求A的程序用使用return语句把需要的数据作为参数，传递给下一个请求，示例中我们就是使用return实现传递参数给下一步操作的。

再举个Promise 中微任务顺序的栗子1：

var p = new Promise( (resolve, reject) => {
    setTimeout( () => {
        console.log('1');
    }, 3000);
    resolve(1);
}).then( () => {  // 描述：.then() 1-1
    Promise.resolve().then( () => { // 描述：.then() 2-1
        Promise.resolve().then( () => { // 描述：.then() 3-1
            console.log('2');
        })
    })
}).then( () => { // 描述：.then() 1-2
    console.log('3');
})
// 3
// 2
// 1    (3秒之后执行打印的值)

如上示例解释：
1.先执行new Promise第一层的代码，遇到setTimeout，将其推入宏任务队列中(此时未执行，排在当前script代码块的宏任务之后执行)，然后遇到了resolve，执行Promise后面的代码。

2.遇到.then 1-1，推入微任务队列里（只是推入，并未执行，所以.then 1-2的执行时机还没有到），这个时候发现没有其他的操作需要处理（比如推其他的微任务到队列里），那么就执行当前微任务队列里的函数，也就是执行.then 1-1的回调函数。

3.执行.then 1-1的回调函数的时候，发现了里面有一个完成态的Promise对象，不用管继续走，遇到了.then 2-1，推入微任务队列（只是推入，并未执行），此时.then 1-1回调执行完毕（没有return值，相当于return了一个undefined），然后Promise得以继续往下执行，遇到了.then 1-2，继续推入微任务队列（依然没执行），这时发现没有其他操作，开始顺位执行当前微任务队列里的函数（此时微任务队列里存放了.then 2-1和.then 1-2的回调函数），执行.then 2-1的回调函数时，又遇到了一个完成态的Promise，不用管继续走，遇到了.then 3-1，将其推入微任务队列（未执行），然后执行.then1-2的回调，打印 3 ，此时已经没有了其他的操作，所以继续执行微任务队列里剩余的函数，即.then 3-1的回调函数，打印 2 。

4.至此，微任务队列已经执行完毕，开始执行宏任务队列中的下一个宏任务，打印 1 。

Promise常用类方法

Promise.all( ) 方法:

应用场景：我们执行某个操作，这个操作需要得到需要多个接口请求回来的数据来支持，但是这些接口请求之前互不依赖，不需要层层嵌套。这种情况下就适合使用Promise.all( )方法，因为它会得到所有接口都请求成功了，才会进行操作。
注意：如果传入的 promise 中有一个失败（rejected），Promise.all异步地将失败的那个结果给失败状态的回调函数，而不管其它 promise 是否完成。


var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 3000, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

Promise.finally( ) 方法

finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。这避免了同样的语句需要在then()和catch()中各写一次的情况。

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

Promise.race( ) 方法
Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.race([p1, p2, p3]);

上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p 的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。
Promise.race方法的参数与Promise.all方法一样，如果不是 Promise 实例，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。

Promise.resolve( ) 方法
有时需要将现有对象转为 Promise 对象，Promise.resolve()方法就起到这个作用。
Promise.resolve()等价于下面的写法。
Promise.resolve(‘foo’)
// 等价于new Promise(resolve => resolve(‘foo’))

上面代码将 jQuery 生成的deferred对象，转为一个新的 Promise 对象。
Promise.resolve()等价于下面的写法。
Promise.resolve(‘foo’)
// 等价于new Promise(resolve => resolve(‘foo’))
Promise.resolve方法的参数分成四种情况。
（1）参数是一个 Promise 实例
如果参数是 Promise 实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。
（2）参数是一个thenable对象
thenable对象指的是具有then方法的对象，比如下面这个对象。
let thenable = {
then: function(resolve, reject) {
resolve(42);
}};
Promise.resolve方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then方法。

let thenable = {
  then: function(resolve, reject) {
    resolve(42);
  }};
let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // 42});

上面代码中，thenable对象的then方法执行后，对象p1的状态就变为resolved，从而立即执行最后那个then方法指定的回调函数，输出 42。
（3）参数不是具有then方法的对象，或根本就不是对象
如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的 Promise 对象，状态为resolved。

const p = Promise.resolve('Hello');

p.then(function (s){
  console.log(s)});
// Hello

上面代码生成一个新的 Promise 对象的实例p。由于字符串Hello不属于异步操作（判断方法是字符串对象不具有 then 方法），返回 Promise 实例的状态从一生成就是resolved，所以回调函数会立即执行。Promise.resolve方法的参数，会同时传给回调函数。
（4）不带有任何参数
Promise.resolve()方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象。
所以，如果希望得到一个 Promise 对象，比较方便的方法就是直接调用Promise.resolve()方法。
const p = Promise.resolve();

p.then(function () {
// …});
上面代码的变量p就是一个 Promise 对象。
需要注意的是，立即resolve()的 Promise 对象，是在本轮“事件循环”（event loop）的结束时执行，而不是在下一轮“事件循环”的开始时。

setTimeout(function () {
  console.log('three');}, 0);

Promise.resolve().then(function () {
  console.log('two');});

console.log('one');
// one// two// three

上面代码中，setTimeout(fn, 0)在下一轮“事件循环”开始时执行，Promise.resolve()在本轮“事件循环”结束时执行，console.log(‘one’)则是立即执行，因此最先输出。

Promise.reject( ) 方法
Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。

const p = Promise.reject('出错了');
// 等同于const p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (s) {
  console.log(s)});
// 出错了

上面代码生成一个 Promise 对象的实例p，状态为rejected，回调函数会立即执行。
注意，Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致。

const thenable = {
  then(resolve, reject) {
    reject('出错了');
  }};

Promise.reject(thenable).catch(e => {
  console.log(e === thenable)})
// true

上面代码中，Promise.reject方法的参数是一个thenable对象，执行以后，后面catch方法的参数不是reject抛出的“出错了”这个字符串，而是thenable对象。

8 类与继承 TODO
https://juejin.im/post/5cfc64736fb9a07f0c4674ba

ES6中提供了class关键字与extends关键字让我们方便快捷的书写OOP代码

在Javascript中，有两种属性：
对象.属性（实例属性），属于某个对象的属性
类.属性（静态属性），静态属性是所有对象公有的属性

ES6中提供了一个关键字class允许我们声明一个类，通过关键字extends来实现类的继承，ES6中的类是一个语法糖，本质上还是由ES5的语法实现的，下面我们来详解ES6中的类与继承。

类
1.构造函数
先来看一下ES5中是如何定义一个类的

//ES5
function Person(name,age) {	//构造函数
    this.name=name;
    this.age=age;
    this.showName=function() {	
        console.log(this.name);
    }
}
var person=new Person('李雷',20);
person.showName();   //输出李雷

ES5中，将一个方法写成一个构造函数以此来实现类。

//ES6
class Person {
    constructor (name='李雷',age=20) {	//构造函数
    	this.name=name;
    	this.age=age;
        this.showName = function() {
            console.log(this.name);
        }
    }
}
const person=new Person('李雷',20);
person.showName();   //输出李雷

ES6中，使用关键字class声明一个类，在类中constructor函数是一个构造函数，用法与ES5类似。
注意：class跟let/const一样，是不存在变量声明提前的，调用class必须放在声明class之后。constructor函数若未定义，会自动生成一个方法体为空的constructor函数。

2 公有方法

ES5中的共有方法是定义在原型链上的，ES6则是直接写在类中，但它的原理依然是定义在原型链上的。

//ES5
function Person(name,age) {	//构造函数
    this.name=name;
    this.age=age;
}
Person.prototype.showName=function() {	
    console.log(this.name);
}
var person=new Person('李雷',20);
person.showName();   //输出李雷


//ES6
class Person {
    constructor (name='李雷',age=20) {	//构造函数
    	this.name=name;
    	this.age=age;
    }
    showName() {
        console.log(this.name);
    }
}
const person=new Person('李雷',20);
person.showName();   //输出李雷

3静态方法

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

静态方法只能在静态方法中调用，不能在实例方法中调用。

静态方法是使用类名.方法名调用的，在JS中一切皆对象的思想，方法也不例外，方法也是一个对象，那么定义静态方法的方式就很简单了，下面看例子。

//ES5
function Person() { //构造函数
}
Person._name='人';
Person.show=function() {
    console.log('Hello World');
}
console.log(Person._name);  //输出人
Person.show(); //输出Hello World


//ES6
class Person {
    constructor () {	//构造函数
    }
    static show() {
        console.log('Hello World');
    }
}
Person._name='人';
console.log(Person._name);
Person.show();   //输出Hello World

ES6中class内只允许声明静态方法，不允许声明静态属性。使用关键字static声明静态方法。静态属性的声明方式与ES5的声明方式相同。

继承
ES5中的继承首先要执行父类方法，然后将原型对象指向父类的原型对象，最后修正原型对象的constructor属性，使其指回子类构造函数，比较麻烦，ES6中采用关键字extends实现继承,使用super调用父类的构造函数。

//ES5
function Person(name) { //Person类
	this.name = name;
}
Person.prototype.showName = function() {//原型链上定义方法
	console.log(this.name);
}

function Student(name, age) {   //Student类
	Person.call(this, name);
	this.age = age;
}
Student.prototype=Person.prototype; //修改Student的原型对象
Student.prototype.constructor=Student;//修正Student的原型对象的constructor属性,完成继承
var student = new Student('李雷', 20);
student.showName(); //输出李雷


//ES6
class Person {
    constructor (name) {	//Person类
		this.name=name;
	}
	showName() {
		console.log(this.name);
	}
}
class Student extends Person{ //Student类继承至Person类
	constructor(name,age) {
		super(name);
		this.age=age;
		
	}
}
const student=new Student('李雷',20);
student.showName();

9 export与import

在ES5的时候，在同一个html文件中引入两个js文件来实现js跨文件的引用。
ES6中，将每一个文件视为一个模块，在一个模块中可以通过export关键字设置允许外部文件访问的变量。其他模块通过import关键字将其他js模块导入当前模块中。下面直接看例子：

//a.js
let name='李雷';
let _age=20;
export {name};  //设置外部文件可以访问的变量
//b.js
import {name} from './a.js';    //接收a.js对外暴露的对象
console.log(name);  //输出李雷

a.js中name被设置对外允许访问，而_age没有设置为对外允许访问。

//b.js
import {name,_age} from './a.js';    //接收a.js对外暴露的对象
console.log(name);  //输出李雷
console.log(_age);  //输出undfined，未能接收到_age


export第二种写法是把export写在要对外暴露的变量之前：

//a.js
export let name='李雷'; //设置外部文件可以访问的变量
export let hello=name=> {//设置外部文件可以访问的函数，使用到了5箭头函数
    console.log(`Hello${name}`);    //使用到了3.1模板字符串
}
let _age=20;
//b.js
import {hello,name} from './a.js';    //接收a.js对外暴露的对象
hello(name);  //输出 Hello李雷

export第三种写法是使用export default:

//a.js
export let name='李雷'; 
export let hello=name=> {
    console.log(`Hello${name}`)
}
let _age=20;
export {name,hello}
export default _age;
//b.js
import {hello,name} from './a.js';    //接收a.js对外暴露的对象
import _age from './es6_2.js'; 
hello(name);  //输出 Hello李雷
console.log(_age);  //输出20

前面我们使用的import都是对模块暴露出来的变量一个个接收的，也可以一次接收多个变量

//a.js
export let name='李雷'; 
export let hello=name=> {
    console.log(`Hello${name}`)
}
export {name,hello}
//b.js
import * as obj from './a.js';    //将接收的变量全部赋予obj对象
obj.hello(obj.name);  //输出 Hello李雷

export default语句只能写一句，export语句可以写多句，export default只能输出一个变量，接收的时候不需要包含在大括号内。

注意：export与import在浏览器上还不支持，可以在一些打包工具如webpack中使用。

10 assign

参考文章：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。

Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]]，所以它会调用相关 getter 和 setter。因此，它分配属性，而不仅仅是复制或定义新的属性。如果合并源包含getter，这可能使其不适合将新属性合并到原型中。为了将属性定义（包括其可枚举性）复制到原型，应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。

String类型和 Symbol 类型的属性都会被拷贝。

在出现错误的情况下，例如，如果属性不可写，会引发TypeError，如果在引发错误之前添加了任何属性，则可以更改target对象。

注意，Object.assign 不会在那些source对象值为 null 或 undefined 的时候抛出错误。

参考文章：

ES6快速入门
https://juejin.im/post/5cfb7be76fb9a07eab6872f4

展开全文 >>

前端性能问题总结/资源整理

2018-09-09

本篇主要整理总结前端性能相关资源，方便后面需要使用时查阅～

文章目录

页面性能评估工具
雅虎网站页面性能优化的34条黄金守则
前端性能学习资料整理
参考资料

页面性能评估工具

页面性能的评估与监控有很多成熟优秀的工具，合理利用已有工具能达到事半功倍的效果。下面简单介绍几个常用的工具：

Page Speed

Page Speed 是谷歌开发的分析和优化网页的工具，可以作为浏览器插件使用。工具基于一系列优化规则对网站进行检测，对于未通过的规则会给出详细的建议。与此类似的工具还有 Yslow 等，推荐使用gtmetrix网站同时查看多个分析工具的结果，如下图所示：

WebPagetest

WebPageTest 是一款非常优秀的网页前端性能测试工具,已开源。可以使用在线版，也可以自己搭建。

使用 WebPagetest，你可以详细掌握网站加载过程中的瀑布流、性能得分、元素分布、视图分析等数据。其中比较直观的视图分析功能可以直接看到页面加载各个阶段的截屏:

PhantomJS

PhantomJS轻松地将监控带入了自动化的行列。Phantom JS 是一个服务器端的 JavaScript API 的 WebKit，基于它可以轻松实现 web 自动化测试。PhantomJS 需要一定编程工作，但也更灵活。官方文档中已经有一个完整的获取网页加载 har 文件的示例，具体说明可以查看此文档，国内也有不少关于此工具的介绍。另外新浪@貘吃馍香开发的类似工具berserkJS也挺不错，还贴心的提供了首屏统计的功能，具体文章可以查看此处。

雅虎网站页面性能优化的34条黄金守则

罗列黄金守则，其实有些已经不是很适用了，慢慢整理。。。

1. 尽量减少HTTP请求次数

终端用户响应的时间中，有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。
措施：

合并文件-所有脚本放到一个文件中来减少http请求。(合并js和css脚本)
CSS Sprites-减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分；
内联图像【不推荐】-data URI scheme的好处是会减少http请求，但是，与此同时也在增加了网页文件的大小。且以这种方式载入的图片，不能缓存。仅IE8及以上支持。

data URI scheme允许我们使用内联（inline-code）方式在网页中包含数据，即可实现将一些“小”数据在html中直接嵌入，而不用从外部文件载入。详情查看

图片地图【不推荐】-把多张图片整合到一张图片中。虽然文件的总体大小不会改变，但是可以减少HTTP请求次数。图片地图只有在图片的所有组成部分在页面中是紧挨在一起的时候才能使用，如导航栏。确定图片的坐标和可能会比较繁琐且容易出错，同时使用图片地图导航也不具有可读性，因此不推荐这种方法；

2. 减少DNS查找次数

域名系统（DNS）提供了域名和IP的对应关系，就像电话本中人名和他们的电话号码的关系一样。当你在浏览器地址栏中输入www.dudo.org时，DNS解析服务器就会返回这个域名对应的IP地址。DNS解析的过程同样也是需要时间的。一般情况下返回给定域名对应的IP地址会花费20到120毫秒的时间。而且在这个过程中浏览器什么都不会做直到DNS查找完毕。

缓存DNS查找可以改善页面性能。这种缓存需要一个特定的缓存服务器，这种服务器一般属于用户的ISP提供商或者本地局域网控制，但是它同样会在用户使用的计算机上产生缓存。DNS信息会保留在操作系统的DNS缓存中（微软Windows系统中DNS Client Service）。大多数浏览器有独立于操作系统以外的自己的缓存。由于浏览器有自己的缓存记录，因此在一次请求中它不会受到操作系统的影响。

Internet Explorer默认情况下对DNS查找记录的缓存时间为30分钟，它在注册表中的键值为DnsCacheTimeout。Firefox对DNS的查找记录缓存时间为1分钟，它在配置文件中的选项为network.dnsCacheExpiration（Fasterfox把这个选项改为了1小时）。

当客户端中的DNS缓存都为空时（浏览器和操作系统都为空），DNS查找的次数和页面中主机名的数量相同。这其中包括页面中URL、图片、脚本文件、样式表、Flash对象等包含的主机名。减少主机名的数量可以减少DNS查找次数。

减少主机名的数量还可以减少页面中并行下载的数量。减少DNS查找次数可以节省响应时间，但是减少并行下载却会增加响应时间。我的指导原则是把这些页面中的内容分割成至少两部分但不超过四部分。这种结果就是在减少DNS查找次数和保持较高程度并行下载两者之间的权衡了。

3. 避免跳转

4. 可缓存的AJAX

5. 推迟加载内容

6. 预加载

7. 减少DOM元素数量

8. 根据域名划分页面内容

把页面内容划分成若干部分可以使你最大限度地实现平行下载。由于DNS查找带来的影响你首先要确保你使用的域名数量在2个到4个之间。例如，你可以把用到的HTML内容和动态内容放在www.example.org上，而把页面各种组件（图片、脚本、CSS)分别存放在statics1.example.org和statics.example.org上。
你可在Tenni Theurer和Patty Chi合写的文章Maximizing Parallel Downloads in the Carpool Lane找到更多相关信息。

美的：
图片域名：img.midea.cn / pic.midea.cn
资源域名：g.midea.cn

9. 使iframe的数量最小

10. 不要出现404错误

11. 用内容分发网络

内容分发网络（Content Delivery Network，CDN）是由一系列分散到各个不同地理位置上的Web服务器组成的，它提高了网站内容的传输速度。用于向用户传输内容的服务器主要是根据和用户在网络上的靠近程度来指定的。例如，拥有最少网络跳数（network hops）和响应速度最快的服务器会被选定。

12. 为文件头指定Expires或Cache-Control

13. Gzip压缩文件内容

14. 配置ETag

15. 尽早刷新输出缓冲

16. 使用GET来完成AJAX请求

17. 把样式表置于顶部

18. 避免使用CSS表达式（Expression）

19. 使用外部JavaScript和CSS

20. 削减JavaScript和CSS

21. 用代替@import

22. 避免使用滤镜

23. 把脚本置于页面底部

24. 剔除重复脚本

25. 减少DOM访问

26. 开发智能事件处理程序

27. 减小Cookie体积

28. 对于页面内容使用无coockie域名

29. 优化图像

31. 不要在HTML中缩放图像

32. favicon.ico要小而且可缓存

33. 保持单个内容小于25K

34. 打包组件成复合文本

前端性能学习资料整理

福利——前端性能学习资料整理

性能准则 `★★★★★`

雅虎性能军规、中文文章

谷歌性能优化文章推荐

分析工具 `★★★`

入门

pageSpeed 基于谷歌性能准则的检测，可浏览器安装插件运行

Yslow 基于雅虎性能准则的检测工具，可浏览器安装插件运行

pageCheck 百度内部开发，指标齐全，支持自动运行

进阶

webPageTest 查看页面加载瀑布流等数据，进阶必备工具

Chrome 开发者工具功能强大，值得学习

PhantomJS 功能强大的分析工具，高手必备瑞士军刀

JsPerf JS 执行性能分析网站，谁用谁知道

浏览器与 Html 标准 `★★`

入门

浏览器缓存机制

Navigation Timing、Resource Timing 相关文章请谷歌，必备知识

DNS 解析过程原理

高性能浏览器网络翻译系列

进阶

SPDY 协议基于此的 Http2.0 协议即将发布

浏览器渲染原理比较难懂，但是非常经典

Chrome 实现原理学习指南多益大牛的总结

开发实战 `★★★★`

通用

高性能 JavaScript

writing-fast-memory-efficient-javascript

Understanding and Solving Internet Explorer Leak Patterns

模块化加载 FIS、SeaJS。FIS 有完善的静态资源管理和优化方案，推荐。

前端性能优化最佳实践

动画与渲染

requestAnimationFrame

16ms 的优化

css、JS不要引起 Repaint & Reflow

移动端开发

Improving the Performance of your HTML5 App

Steve Souders

Creating High-Performance Mobile Websites

HTML5 Techniques for Optimizing Mobile Performance

移动 web 站点优化指南

性能监控 `★★★★`

监控指标选取

Complete Web Monitoring - Web Performance at eMetrics

berserkJS 建立前端性能监控平台

NY Web Perf Meetup: Peeling the Web Performance Onion

推荐博客
`★★★`

web performance today

perfplanet

stevesouders.com

site-performance-and-optimization

参考资料

展开全文 >>

微信小程序原理(随记)

2018-09-08

逻辑层 App Service
视图层 View
- WXS 模块
自定义组件
插件
参考资料

简单整理小程序原理，方便后面需要时查阅

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

框架的核心是一个响应的数据绑定系统。

响应的数据绑定
框架的核心是一个响应的数据绑定系统。

整个小程序框架系统分为两部分：视图层（View）和逻辑层（App Service）

框架可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

逻辑层 App Service

小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。

逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。

在 JavaScript 的基础上，我们增加了一些功能，以方便小程序的开发：

增加 App 和 Page 方法，进行程序和页面的注册。
增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
每个页面有独立的作用域，并提供模块化能力。
注意：小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，document 等。

注册程序

小程序 App
App(Object)
App() 函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

Object参数说明：

属性	类型	描述	触发时机
onLaunch	Function	生命周期回调—监听小程序初始化	小程序初始化完成时（全局只触发一次）
onShow	Function	生命周期回调—监听小程序显示	小程序启动，或从后台进入前台显示时
onHide	Function	生命周期回调—监听小程序隐藏	小程序从前台进入后台时
onError	Function	错误监听函数	小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息
onPageNotFound	Function	页面不存在监听函数	小程序要打开的页面不存在时触发，会带上页面信息回调该函数
其他	Any	开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问	——–

前台、后台定义：当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

注册页面

页面 Page
Page(Object)
Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

Object 参数说明：

属性	类型	描述
data	Object	页面的初始数据
onLoad	Function	生命周期回调—监听页面加载
onShow	Function	生命周期回调—监听页面显示
onReady	Function	生命周期回调—监听页面初次渲染完成
onHide	Function	生命周期回调—监听页面隐藏
onUnload	Function	生命周期回调—监听页面卸载
onPullDownRefresh	Function	监听用户下拉动作
onReachBottom	Function	页面上拉触底事件的处理函数
onShareAppMessage	Function	用户点击右上角转发
onPageScroll	Function	页面滚动触发事件的处理函数
onTabItemTap	Function	当前是 tab 页时，点击 tab 时触发
其他	Any	开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问

生命周期

下图说明了 Page 实例的生命周期。

路由

页面栈

框架以栈的形式维护了当前的所有页面。当发生路由切换的时候，页面栈的表现如下：

路由方式	页面栈表现
初始化	新页面入栈
打开新页面	新页面入栈
页面重定向	当前页面出栈，新页面入栈
页面返回	页面不断出栈，直到目标返回页
Tab 切换	页面全部出栈，只留下新的 Tab 页面
重加载	页面全部出栈，只留下新的页面

Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）：

当前页面	路由后页面	触发的生命周期（按顺序）
A	A	Nothing happend
A	B	A.onHide(), B.onLoad(), B.onShow()
A	B （再次打开）	A.onHide(), B.onShow()
C	A	C.onUnload(), A.onShow()
C	B	C.onUnload(), B.onLoad(), B.onShow()
D	B	D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D (从转发进入）	A	D.onUnload(), A.onLoad(), A.onShow()
D（从转发进入）	B	D.onUnload(), B.onLoad(), B.onShow()

Tips:

navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取。

文件作用域

通过全局函数 getApp() 可以获取全局的应用实例，如果需要全局的数据可以在 App() 中设置，如：

// app.js
App({
  globalData: 1
})

模块化

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

在需要使用这些模块的文件中，使用 require(path) 将公共代码引入

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

Tips

tip: require 暂时不支持绝对路径

视图层 View

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language) 用于描述页面的结构。

WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXSS(WeiXin Style Sheet) 用于描述页面的样式。

组件(Component)是视图的基本组成单元。

WXS 模块

WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。

模块:
每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。

注意:<wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时， <wxs> 模块不会被引入到对应的 WXML 文件中。 <template> 标签中，只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。

自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）：

1
2
3

{
  "component": true
}

同时，还要在 wxml 文件中编写组件模版，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项参见组件模版和样式。

插件

插件的开发和使用自小程序基础库版本 1.9.6 开始支持。

插件是对一组 js 接口、自定义组件或页面的封装，用于嵌入到小程序中使用。插件不能独立运行，必须嵌入在其他小程序中才能被用户使用；而第三方小程序在使用插件时，也无法看到插件的代码。因此，插件适合用来封装自己的功能或服务，提供给第三方小程序进行展示和使用。

插件开发者可以像开发小程序一样编写一个插件并上传代码，在插件发布之后，其他小程序方可调用。小程序平台会托管插件代码，其他小程序调用时，上传的插件代码会随小程序一起下载运行。

相对于普通 js 文件或自定义组件，插件拥有更强的独立性，拥有独立的 API 接口、域名列表等，但同时会受到一些限制，如一些 API 无法调用或功能受限。对于一些特殊的接口，如 wx.login 和 wx.requestPayment ，虽然插件不能直接调用，但可以使用插件功能页来间接实现。

对于插件开发者，请阅读开发插件章节；对于插件使用者，请阅读使用插件章节。

参考资料

小程序开发-框架

展开全文 >>

移动端真机远程调试工具spy-debugger

2018-09-08

真机远程调试工具spy-debugger（推荐）
特性
安装spy-debugger
启动spy-debugger
设置外部代理（默认使用AnyProxy）
遇到的问题
- 严格模式报错
自定义选项
参考文章

真机远程调试工具spy-debugger（推荐）

十分方便的手机远程调试工具，集成weinre+AnyProxy+node-mitmproxy，支持HTTP/HTTPS，无需USB连接设备。一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybirdApp等）。
spy-debugger 原理是集成了 weinre ，简化了 weinre 需要给每个调试的页面添加js代码。 spy-debugger 原理是拦截所有html页面请求注入 weinre 所需要的js代码。让页面调试更加方便。

weinre : weinre 简单易用，但是需要每个调试页面添加相应的js代码，并且只能调试http页面，想调试https页面时需结合ngrok反向代理工具，这个工具虽然安装容易，但是使用并不是很方便（可能由于国内被墙，一直未能成功访问页面）

特性

1.h5页面调试+抓包

2.操作简单

3.支持https（单独使用weinre只能访问http）

4.spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。

5.自动忽略原生 App 发起的 https 请求，只拦截 webview 发起的 https 请求。对使用了 SSL pinning 技术的原生 App 不造成任何影响。

6.可以配合其它代理工具一起使用(默认使用AnyProxy) (设置外部代理)

安装spy-debugger

Windows 下
npm install spy-debugger -g

Mac 下
sudo npm install spy-debugger -g

启动spy-debugger

spy-debugger -p 8888

启动成功后会浏览器会自动打开下面页面，则说明spy-debugeer初步完成

接下来，设置手机的HTTP代理，代理IP地址为PC的IP地址，端口为spy-debugger的启动端口(默认端口：9888)。

Android设置代理步骤：设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动
iOS设置代理步骤：设置 - 无线局域网 - 选中网络 - HTTP代理手动

手机安装证书注：手机必须先设置完代理后再通过(非微信)手机浏览器访问http://spydebugger.com/cert(地址二维码)安装证书（手机首次调试需要安装证书，已安装了证书的手机无需重复安装)。

有时会出现设置代理之后所有页面都不能访问，证书也安装不上，此时只要将电脑的防火墙关闭就好了。(问题： https://github.com/wuchangming/spy-debugger/issues/12 )

安装成功后，就可以手机访问h5页面啦，浏览器也可以很方便的审查元素和转包

审查元素

修改元素属性

抓包

设置外部代理（默认使用AnyProxy）

通常我们使用fiddler抓包工具，并且需要切换各种环境，所以自己设置外部代理就比较方便。

spy-debugger内置AnyProxy提供抓包功能，但是也可通过设置外部代理和其它抓包代理工具一起使用，如：Charles、Fiddler。

1	spy-debugger -e http://127.0.0.1:8888

需要注意的是手机设置代理的端口为node-mitmproxy启动端口号。

这样就方便调试各个环境的页面了。

遇到的问题

严格模式报错

解决方法：
1.npm install strict-mode
2.’use strict’;

在报错的文件头部加一个’use strict’就ok了。

自定义选项

端口

(默认端口：9888)

spy-debugger -p 8888

设置外部代理（默认使用AnyProxy）

spy-debugger -e http://127.0.0.1:8888
spy-debugger内置AnyProxy提供抓包功能，但是也可通过设置外部代理和其它抓包代理工具一起使用，如：Charles、Fiddler。

设置页面内容为可编辑模式

该功能使页面内容修改更加直观方便。 (默认： false)

spy-debugger -w true
内部实现原理：在需要调试的页面内注入代码：document.body.contentEditable=true。暂不支持使用了iscroll框架的页面。

是否允许weinre监控iframe加载的页面

(默认： false)

spy-debugger -i true

是否只拦截浏览器发起的https请求

(默认： true)

spy-debugger -b false
有些浏览器发出的connect请求没有正确的携带userAgent，这个判断有时候会出错，如UC浏览器。这个时候需要设置为false。大多数情况建议启用默认配置：true，由于目前大量App应用自身（非WebView）发出的请求会使用到SSL pinning技术，自定义的证书将不能通过app的证书校验。

是否允许HTTP缓存

(默认： false)

spy-debugger -c true

修复weinre在node.js V7版本会崩溃的bug
对weinre在页面document ready事件前，无法打印console.log日志进行了增强修复。
增强weinre打印未捕获异常(Uncaught Exceptions)功能。
spy-debugger原理是集成了weinre，简化了weinre需要给每个调试的页面添加js代码。spy-debugger原理是拦截所有html页面请求注入weinre所需要的js代码。让页面调试更加方便。

参考文章

真机远程页面调试工具spy-debugger 3.x：集成weinre+AnyProxy，页面调试+抓包。调试生产HTTPS页面。

展开全文 >>

hexo主题yilia自定义添加valine评论系统

2018-09-05

寻寻觅觅-hexo好用的评论系统

Hexo的评论系统有很多，常见的有以下几个

多说，网易云跟帖，畅言，来必力（LiveRe），Disqus，Hypercomments，valine

多说和网易云已经倒下了，其次畅言需要备案，Disqus，Hypercomments和LiveRe都是国外的，加载速度贼慢，甚至有被墙的可能，寻觅了很久之后，终于找到口碑比较好的valine - 一款快速、简洁且高效的无后端评论系统。

valine特性

快速
安全
Emoji 😉
无后端实现
MarkDown 全语法支持
轻量易用(~15kb gzipped)
文章阅读量统计 v1.2.0+

Valine 诞生于2017年8月7日，是一款基于Leancloud的快速、简洁且高效的无后端评论系统。
理论上支持但不限于静态博客，目前已有Hexo、Jekyll、Typecho、Hugo 等博客程序在使用Valine。
但是我喜欢的yilia主题不支持，所以想着如何自定义valine评论系统。

yilia主题如何支持valine评论系统

google搜啊搜，果然还是搜到相关轮子。

新增对Valine评论系统的支持
 加个Valine评论系统

下面整理下实践步骤：

修改主题模板

新增配置项 /themes/yilia/_config.yml

新增下面代码

#6、Valine https://valine.js.org
valine: 
 appid:  #Leancloud应用的appId
 appkey:  #Leancloud应用的appKey
 verify: false #验证码
 notify: false #评论回复提醒
 avatar: '' #评论列表头像样式：''/mm/identicon/monsterid/wavatar/retro/hide
 avatar_cdn: 'https://sdn.geekzu.org/avatar/' #头像CDN
 placeholder: '瞎白话' #评论框占位符
 pageSize: 15 #评论分页

其中verify和notify一定要是false，不要打开，不要手贱
avatar参数详见https://valine.js.org/avatar
在这里设置头像https://cn.gravatar.com/

新增模板和局部样式 /themes/yilia/layout/_partial/article.ejs

<% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
      <section id="comments" class="comments">
        <style>
          .comments{margin:30px;padding:10px;background:#fff}
          @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
        </style>
        <%- partial('post/valine', {
          key: post.slug,
          title: post.title,
          url: config.url+url_for(post.path)
          }) %>
      </section>
    <% } %>

新增 /themes/yilia/layout/_partial/post/valine.ejs

<div id="vcomment" class="comment"></div>
<script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/leancloud-storage@latest/dist/av-min.js"></script>
<script src='//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'></script>
<script>
   var notify = '<%= theme.valine.notify %>' == true ? true : false;
   var verify = '<%= theme.valine.verify %>' == true ? true : false;
   new Valine({
            av: AV,
            el: '#vcomment',
            notify: notify,
            verify: verify,
            app_id: "<%= theme.valine.appid %>",
            app_key: "<%= theme.valine.appkey %>",
            placeholder: "<%= theme.valine.placeholder %>",
            avatar: "<%= theme.valine.avatar %>",
            avatar_cdn: "<%= theme.valine.avatar_cdn %>",
            pageSize: "<%= theme.valine.pageSize %>"
    });
</script>

听说有坑=》这里要注意一下el参数，el参数要和上面的id一致。
具体有哪些参数可以自己定义，可以看这里https://valine.js.org/configuration

注册LeanCloud应用-数据存储

注册链接：
https://leancloud.cn/

注册好后创建应用，选择开发版本。

appid和appkey写到上面主题配置项中。

添加的安全域名，即可直接预览实际效果了。

实际效果如下：可访问体验=>sela博客

想了解更详细的配置可看基于leancloud的文章阅读量与评论系统 valine

参考资料：

展开全文 >>

前言

开始准备

小恐龙游戏

目录结构

起跳运动

地面无缝缓动

小恐龙动画

碰撞检测

恐龙动画

游戏声效

小结

参考文章

为什么要处理异常

js中的错误类型

常用异常处理函数解析

try-catch

window.onerror

window.addEventListener

error 事件

unhandledrejection事件

前端常见异常问题

JS 语法错误、代码异常

AJAX 请求异常

静态资源加载异常

Promise 异常

VUE errorHandler

React 异常捕获

Iframe 异常

跨域 Script error

崩溃和卡顿

错误上报

总结

参考文章

互联网人员术语：CEO、CTO、COO、CFO、PM、QA、UI、FE、DEV、DBA、OPS等。

互联网行业术语：B2B、B2C、C2C、O2O等

B2B（企业对企业的电子商务模式）

B2C（Business-to-Customer）

C2C

O2O（Online To Offline）

P2C（Production to Consumer）

O2O、C2C、B2B、B2C的区别在哪里？

电子商务模式汇总

作为对象方法调用

作为构造函数调用

使用 apply 或 call,bind 调用

不同环境this的取值

全局作用域中this(浏览器)

对象原型链上的this

get/set方法与this

参考资料：

1 新的变量声明方式

2 解析结构

3 字符串

4 函数默认值

5 箭头函数

6 对象字面量简写

7 Promise

9 export与import

10 assign

参考文章：

文章目录

页面性能评估工具

Page Speed

WebPagetest

PhantomJS

雅虎网站页面性能优化的34条黄金守则

1. 尽量减少HTTP请求次数

2. 减少DNS查找次数

3. 避免跳转

4. 可缓存的AJAX

5. 推迟加载内容

6. 预加载

7. 减少DOM元素数量

8. 根据域名划分页面内容

9. 使iframe的数量最小

10. 不要出现404错误

11. 用内容分发网络

12. 为文件头指定Expires或Cache-Control

13. Gzip压缩文件内容

14. 配置ETag

页面性能评估工具

性能准则 `★★★★★`

分析工具 `★★★`

浏览器与 Html 标准 `★★`

开发实战 `★★★★`

性能监控 `★★★★`

相关会议
`★★★`

推荐博客
`★★★`