Vue.js踩坑记

7年前

前言

上一篇文章主要介绍了我们团队的「Vue.js项目模板」的搭建过程，这只是第一步。作为新手，在实际开发过程中，难免还会遇到各种各样奇怪的问题。本文主要介绍问题的起因以及解决方式。

导航栏标题

在单页应用中，由于页面切换不会导致浏览器重新加载页面，所以页面的标题是不会改变的，这时候就要通过Javascript去修改标题。这个操作本来是非常简单的，只需要修改「document.title」即可：

document.title = 'New title';

然而，在iOS的微信和QQ中，这种方法可能无效，具体的现象就是：导航栏上的标题没有改变。这是iOS微信和QQ的bug，解决方法就是在修改「document.title」之后，用「iframe」发送一个请求（任意一个请求）。把相关的代码封装成函数：

function setTitle(title) {
    document.title = title;
	if (isIOS && (isInWeixin || isInQQ)) {
        let iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        iframe.src = '/favicon.ico';
        iframe.onload = () => {
            setTimeout(() => {
                document.body.removeChild(iframe);
            }, 9);
        };
        document.body.appendChild(iframe);
    }
}

据说新版的微信和QQ已经修复了这个bug，但为了兼容旧版本，这段代码还是必须的。

Vue.js项目模板搭建

7年前

前言

从今年（2017年）年初起，我们团队开始引入「Vue.js」开发移动端的产品。作为团队的领头人，我的首要任务就是设计整体的架构。一个良好的架构必定是具备丰富的开发经验后才能搭建出来的。虽然我有多年的前端开发经验，但就「Vue.js」来说，仍然是个新手。所幸「Vue.js」有一个配套工具「Vue-CLI」，它提供了一些比较成熟的项目模板，很大程度上降低了上手的难度。然而，很多具体的问题还是要自己思考和解决的。

项目划分

我们公司的H5产品大部分是嵌套在手机客户端里面的页面。每个项目的功能都比较独立，而且规模不大。这样一来，既可以让这些小项目各自为政，也可以把它们集中放到一个大项目中管理。各自的优缺点如下：

	一个大项目	多个小项目
代码仓库	一个	多个
代码冲突	可能性大	可能性小
独立发布	不可行	可行
公共代码	共用一份	重复维护、加载

考虑到我们团队刚开始使用「Vue.js」，需要逐步摸索出合适的架构。如果做成一个大项目，一旦架构要调整，很可能会伤筋动骨。所以最终的选择是划分成多个小项目。

异步流程控制

7年前

单线程与异步

JavaScript是单线程运行、支持异步机制的语言。进入正题之前，我们有必要先理解这种运行方式。

以「起床上班」的过程为例，假设有以下几个步骤：

起床（10min）
洗刷（10min）
换衣（5min）
叫车（10min）
上班（15min）

最简单粗暴的执行方式就是按顺序逐步执行，这样从起床到上班共需50分钟，效率较低。如果能在「洗刷」之前先「叫车」，就可以节省10分钟的等车时间。

异步叫车

这样一来「叫车」就成了异步操作。但为何只有「叫车」可以异步呢？因为车不需要自己开过来，所以自己处于空闲状态，可以先干点别的。

箭头函数中的this

8年前

先看一段代码，这是一个实现倒数功能的类「Countdown」及其实例化的过程：

function Countdown(seconds) {
	this._seconds = seconds;
}
Countdown.prototype._step = function() {
	console.log(this._seconds);
	if (this._seconds > 0) {
		this._seconds -= 1;
	} else {
		clearInterval(this._timer);
	}
};
Countdown.prototype.start = function() {
	this._step();
	this._timer = setInterval(function() {
		this._step();
	}, 1000);
};

new Countdown(10).start();

运行这段代码时，将会出现异常「this._step is not a function」。这是JavaScript中颇受诟病的「this错乱」问题：setInterval重复执行的函数中的this已经跟外部的this不一致了。要解决这个问题，有三个方法。

setTimeout/setInterval的最大延时值

8年前

先来看这样一段代码：

function update() {
    loadData().then(function(data) {
        $('#content').html(data.content);
        var delay = data.nextUpdateTime - new Date();
        if (delay > 0) {
            setTimeout(update, delay);
        }
    });
}

其流程非常简单：通过AJAX加载数据后更新HTML的内容；如果有指定下次更新时间，则通过计时器在该时间点再执行一次整个流程。

要说这段代码有什么隐患的话，那就是data.nextUpdateTime与当前时间的时间差（即delay变量的值）比较小的时候，会导致内容频繁更新。但这是属于正常的业务逻辑，要优化就只能牺牲内容更新的即时性。然而这里我要说的是，当时间差非常大的时候，也会出现同样的问题。

安卓版微信Webview中两个页面互相跳转的BUG

9年前

都说微信是移动端的IE6，不管你们信不信，反正我信了。最近在开发过程中就遇到了一个极其容易触发的BUG。

复现这个BUG只需要两个页面「a.html」以及「b.html」，并且两个页面都有跳去另一个页面的链接：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>A</title>
</head>

<body>
<h1>I am A.</h1>
<p><a href="b.html">to B</a></p>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>B</title>
</head>

<body>
<h1>I am B.</h1>
<p><a href="a.html">to A</a></p>
</body>
</html>

先打开「a.html」，点击链接跳转到「b.html」，再点击「b.html」中的链接跳转到「a.html」。如此往复点击跳转几次，就会出现无法再次跳转的情况（会出现进度条，但是无法跳转）。

hashchange事件及其妙用

9年前

hash即URL中“#”字符后面的部分。使用浏览器访问网页时，如果网页URL中带有hash，页面就会定位到id（或name）与hash值一样的元素的位置，故而又称之为锚点。hash还有另一个特点，它的改变不会导致页面重新加载，因此在单页应用流行的当下，它的用处就更多了。

而hashchange事件，顾名思义，就是hash改变时触发的事件。在 caniuse.com 上查一下兼容性可以发现，IE8就已经支持该事件，但一直以来应用甚少。

hashchange事件兼容性

hashchange事件触发时，事件对象会有hash改变前的URL（oldURL）和hash改变后的URL（newURL）两个属性：

window.addEventListener('hashchange', function(e) {
	console.log(e.oldURL);
	console.log(e.newURL);
}, false);

ECMAScript 6中的面向对象

10年前

ECMAScript 6（下面简称ES6）增强了对面向对象的支持，引入了class关键字，并且为类的创建、继承提供了简洁清晰的语法。

类声明与类表达式

毋庸置疑，class关键字就是用来定义类的。

定义类的常用方式是类声明，语法如下：

class ClassName {
	// 构造函数
	constructor() {
		// ...
	}

	// 方法
	method() {
		// ...
	}
}

深入理解JavaScript中的面向对象（三）

10年前

在JavaScript中，虽然借助原型链就可以实现继承，但这里面还是有很多细节问题的要处理的。分析并解决这些问题后，就可以把创建类的过程写成一个通用函数了。

constructor属性

JavaScript中的对象都有一个constructor的属性指向其构造函数。例如：

function A() { }
var a = new A();
a.constructor; // A

确切地说，constructor属性是位于构造函数的prototype上。下面的代码可以证实这一规则：

function A() { }

var a = new A();
console.log(a.constructor); // A

delete A.prototype.constructor; // 删除原型上的constructor属性
console.log(a.constructor); // Object

深入理解JavaScript中的面向对象（二）

10年前

严格来说，JavaScript并不是一门面向对象的语言，因为它没有原生提供完整的面向对象机制。但它的语言特性又允许我们去模拟大部分这些机制。

new操作符

JavaScript中也用new操作符创建类的实例，例如：

var arr = new Array(10); // 创建长度为10的数组
var date = new Date; // 不需要传参数给构造函数时，括号可以省略

与C#不同的是，JavaScript中new的是函数而不是class，这个函数即为类的构造函数。在构造函数中，可以声明属性和方法。例如：

function Square() {
	this.length = 1;
	this.perimeter = function() {
		return this.length * 4;
	};
}

var square = new Square();
square.perimeter(); // 4
square.length = 10;
square.perimeter(); // 40