个人技术分享

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);

Highcharts作为一款数据可视化交互性图表库，非常的受欢迎。在以往的项目中，曾经使用过。最近接到一个任务，也是和使用Higcharts相关的，就把本次使用的一些tips记录在这。当然，如果想更多的了解Highcharts，请移步 Highcharts 中文官网 。

1、数字千分位格式化

1
2
3
4
5
6
7
8
9

function thousandFormate(number){
    var str = (number||0).toString(), result = "";
    while (str.length > 3) {
        result = ',' + str.slice(-3) + result;
        str = str.slice(0, str.length - 3);
    }
    if (str) { result = str + result; }
    return result;
}

选择符API

querySelector()方法

querySelector()方法接收一个css选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。