移动端H5页面注意事项

Posted on 四月 5, 2017

单个页面内容不能过多设计常用尺寸：750 x 1334 / 640 x 1134，包含了手机顶部信号栏的高度。移动端H5活动页面常常需要能够分享到各种社交App中，常用的有微信、QQ 等。使用移动设备查看页面时会发现，在微信浏览器中有顶部导航栏，在qq内置浏览器里不止有顶部导航，底部也有操作栏（safari浏览器也一样），这些都会占用设计稿显示区域，因此在设计环节就需要考虑内容的多少，页面底部要预留一定的空白，这样在微信或qq中才不会被遮住。如下图（QQ内置浏览器）：页面设计尺寸为 750 x 1334，顶部占用 150px，底部占用 110px，共占用了 260px，因此设计稿内容应控制在 1334-260=1074px 的高度内。编写代码时，使用 Chrome 浏...

阅读全文

如何评价页面的性能

Posted on 三月 30, 2017

页面加载完成之后的性能问题重点：如果要保持在60fps以上的性能，那一帧就必须在16.7ms内完成一段js代码，或者把一些不需要同步执行的代码分拆到每一帧中。浏览器如何渲染一个页面这是在网上找的一张图，虽然是用来描述 performance 的 API 但是也很好的描述了浏览器是怎么处理一个页面渲染的。这是我们在 PC 时代考虑的浏览器性能，主要在服务端响应、文档下载、文档渲染三个阶段，性能优化大部分也集中在这三个阶段。针对这部分的监控、分析非常的普遍了，在 JSTracker 上也有这个数据的分析。为什么刚才说 PC 时代呢，除了这些指标作为前端还有需要关注的什么性能呢？页面加载之后的操作体验！（注：这里的加载之后近似在 onLoad 之后）页面操作的流畅度在 PC ...

阅读全文

图片上传预览的前端实现方法

Posted on 三月 28, 2017

Example

HTML

1 2	<input type="file" onchange="previewFile()"><br> <img src="" height="200" alt="Image preview...">

Javascript

function previewFile() {
	var preview = document.querySelector('img');
	var file    = document.querySelector('input[type=file]').files[0];
	var reader  = new FileReader();
	reader.addEventListener("load", function () {
		preview.src = reader.result;
	}, false);
	if (file) {
		reader.readAsDataURL(file);
	}
}

Example reading multiple files

HTML

1 2	<input id="browse" type="file" onchange="previewFiles()" multiple> <div id="preview"></div>

Javascript

function previewFiles() {
  	var preview = document.querySelector('#preview');
  	var files   = document.querySelector('input[type=file]').files;
  	function readAndPreview(file) {
    	// Make sure `file.name` matches our extensions criteria
    	if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
      		var reader = new FileReader();
      		reader.addEventListener("load", function () {
	        	var image = new Image();
	        	image.height = 100;
	        	image.title = file.name;
	        	image.src = this.result;
	        	preview.appendChild( image );
	      	}, false);
      		reader.readAsDataURL(file);
		}
	}
  	if (files) {
		[].forEach.call(files, readAndPreview);
  	}
}

Javascript 严格模式详解

Posted on 三月 28, 2017

概述除了正常运行模式，ECMAscript 5添加了第二种运行模式：”严格模式”（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。设立”严格模式”的目的，主要有以下几个：　　- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;　　- 消除代码运行的一些不安全之处，保证代码运行的安全；　　- 提高编译器效率，增加运行速度；　　- 为未来新版本的Javascript做好铺垫。 “严格模式”体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。另一方面，同样的代码，在”严格模式”中，可能会有不一样的运行结果；一些在”正常模式”下可以运行的语句...

阅读全文

Javascript之this详解

Posted on 三月 28, 2017

JavaScript作为一种脚本语言身份的存在，因此被很多人认为是简单易学的。然而情况恰恰相反，JavaScript支持函数式编程、闭包、基于原型的继承等高级功能。由于其运行期绑定的特性，JavaScript 中的 this 含义要丰富得多，它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript中函数的调用有以下几种方式：作为对象方法调用，作为函数调用，作为构造函数调用，和使用 apply 或 call 调用。本文就采撷些例子以浅显说明在不同调用方式下的不同含义。全局的this全局this一般指向全局对象，浏览器中的全局对象就是 window。例如：12345console.log(this.document === document); //tru...

阅读全文

Webpack 入门指迷

Posted on 三月 27, 2017

Webpack 是什么?Github：https://github.com/webpackWebpack 是德国开发者 Tobias Koppers 开发的模块加载器Instagram 工程师认为这个方案很棒, 似乎还把作者招过去了在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等..因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl 对应各种不同文件类型的资源, Webpack 有对应的模块 loader比如 CoffeeScript 用的是 coffee-loader, 其他还有很多:http://webpack.github.io/docs/list-of-loaders.html大致的写法也就这样...

阅读全文