个人技术分享

关于移动端border-1px问题由来，我想大家都应该很清楚了。简言之，是由不同手机的物理像素密度不同导致的。不同设备的由于设备像素比的不同，渲染出来的实际效果大不相同。首先，了解下设备像素比。

1

devicePixelRatio = 屏幕物理像素/独立像素

在移动端开发过程中，我们需要适配各种不同机型的屏幕，如何能够写一套代码适，做到屏幕的完美适配呢。针对设计稿为750*1334，自己常用的适配方案如下

函数

传统fibonacci函数：

1
2
3
4
5
6
7

var fibonacci = function(n){
    return n < 2? n: fibonacci(n - 1) + fibonacci(n -2);
}

for(var i = 0; i <= 10; i++){
    document.writeln('//' + i + ':' + fibonacci(i));
}

Page Visibility API

• document.hidden: 表示页面是否隐藏的布尔值
• document.VisibilityState: 表示下列4个可能状态的值
  • 页面在后台标签页中或浏览器最小化
  • 页面在前台标签页中
  • 实际的页面已经隐藏，但用户可以看到页面的预览
  • 页面在屏幕外执行预渲染处理
• visibilitychange事件: 当文档从可见变为不可见或从不可见变为可见时，触发该事件
  阅读全文 »

数据存储

Cookie

构成：

• 名称：一个唯一确定cookie的名称，cookie的名称必须是经过URL编码的。
• 值：储存在cookie中的字符串值，值必须被URL编码。
• 域：cookie对哪个域是有效的，所有向该域发送的请求中都包含这个cookie信息。
• 路径：对于指定域中的那个路径，应该向服务器发送cookie。
• 失效时间：表示cookie何时应该被删除的时间戳。
• 安全标志
  阅读全文 »

高级函数

函数柯里化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function curry(fn){
	var args = Array.prototype.slice.call(arguments, 1);
	return function(){
		var innerArgs = Array.prototype.slice.call(arguments);
		var finalArgs = args.concat(innerArgs);
		return fn.apply(null, finalArgs);
	}
}

function add(num1, num2){
	return num1 + num2;
}

var curriedAdd = curry(add, 5);
console.log(curriedAdd(3));

var curriedAdd1 = curry(add, 5, 13);
console.log(curriedAdd1());

XHR用法

检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。属性可取值如下：

• 0：未初始化，尚未调用open()方法
• 1：启动，已经调用open()方法，但尚未调用send()方法
• 2：发送，已经调用send()方法，但尚未接到响应
• 3：接收，已经接收到部分数据
• 4：完成，已经接收到全部响应数据，而且已经可以在客户端使用了。
  阅读全文 »

表单的基础知识

HTMLFormElement 独有的属性和方法：
1、 acceptCharset: 服务器能够处理的字符集
2、 action: 接受请求的url
3、 elements: 表单中所有空间的集合
4、 enctype: 请求的编码类型
5、 length: 表单中控件的数量
6、 method: 要发送HTTP请求类型
7、 name: 表单的名称
8、 reset(): 将所有表单域重置为默认值
9、 submit(): 提交表单
10、 target: 用于发送请求和接收相应的窗口名称

事件流

事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，而Netscapte Communicator的事件流是事件捕获流。

计算的样式

1
2
3
4
5
6
7
8
9
10
11
12
13

var myDiv = document.getElementById('myDiv');
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);

alert(computedStyle.backgroundColor);
alert(computedStyle.width);

//IE不支持getComputedStyle()方法，在IE中每个具有style属性的元素还要一个currentStyle属性。

var myDiv = document.getElementById('myDiv');
var computedStyle = myDiv.currentStyle;
alert(computedStyle.backgroundColor);
alert(computedStyle.width);