Vue.js项目模板搭建

5年前

前言

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

项目划分

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

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

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

2610次阅读,0条评论

异步流程控制

5年前

单线程与异步

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

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

  • 起床(10min)
  • 洗刷(10min)
  • 换衣(5min)
  • 叫车(10min)
  • 上班(15min)

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

异步叫车

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

3526次阅读,6条评论

setTimeout/setInterval的最大延时值

6年前

先来看这样一段代码:

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变量的值)比较小的时候,会导致内容频繁更新。但这是属于正常的业务逻辑,要优化就只能牺牲内容更新的即时性。然而这里我要说的是,当时间差非常大的时候,也会出现同样的问题。

1784次阅读,0条评论

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

6年前

都说微信是移动端的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」。如此往复点击跳转几次,就会出现无法再次跳转的情况(会出现进度条,但是无法跳转)。

3262次阅读,5条评论

hashchange事件及其妙用

6年前

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);
6904次阅读,0条评论

ECMAScript 6中的面向对象

7年前

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

类声明与类表达式

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

定义类的常用方式是类声明,语法如下:

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

	// 方法
	method() {
		// ...
	}
}
1591次阅读,3条评论

深入理解JavaScript中的面向对象(三)

7年前

在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
1857次阅读,1条评论

深入理解JavaScript中的面向对象(二)

7年前

严格来说,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
2199次阅读,2条评论

深入理解JavaScript中的面向对象(一)

7年前

在学习JavaScript的过程中,面向对象是必须要学会的课题。然而,网络上大部分文章只是简单地讲述如何通过代码实现面向对象,忽略了理论和原理方面的知识。本系列文章将从头开始逐步讲解面向对象编程思想及其在JavaScript中的实现与应用。

从一个简单的需求开始

假设我们需要在程序中计算各种形状的周长,代码可能是这样的:

var rectangle = {
	name: '长方形1',
	type: 'rectangle',
	length: 5,  // 长
	width: 10   // 宽
};
var square = {
	name: '正方形1',
	type: 'square',
	length: 5  // 边长
};
var circle = {
	name: '圆形1',
	type: 'circle',
	radius: 5  // 半径
};

function computePerimeter(shape) {
	var result;
	switch (shape.type) {
        case 'rectangle':
        	// 矩形周长:(长+宽)*2
        	result = (shape.length + shape.width) * 2;
        	break;
        case 'square':
        	// 正方形周长:边长*4
        	result = shape.length * 4;
        	break;
        case 'circle':
        	// 圆形周长:2*PI*半径
        	result = 2 * Math.PI * shape.radius;
        	break;
    }

    return shape.name + '的周长是' + result;
}
2945次阅读,1条评论

JavaScript动画实现原理

7年前

假设有这样一个动画功能需求:把一个div的宽度从100px变化到200px。写出来的代码可能是这样的:

<div id="test1" style="width: 100px; height: 100px; background: blue; color: white;"></div>
function animate1(element, endValue, duration) {
	var startTime = new Date(),
		startValue = parseInt(element.style.width),
		step = 1;
	
	var timerId = setInterval(function() {
		var nextValue = parseInt(element.style.width) + step;
		element.style.width = nextValue + 'px';
		if (nextValue >= endValue) {
			clearInterval(timerId);
			// 显示动画耗时
			element.innerHTML = new Date - startTime;
		}
	}, duration / (endValue - startValue) * step);
}

animate1(document.getElementById('test1'), 200, 1000);

原理是每隔一定时间增加1px,一直到200px为止。然而,动画结束后显示的耗时却不止1s(一般是1.5s左右)。究其原因,是因为setInterval并不能严格保证执行间隔

9455次阅读,1条评论