2015-02-07——js笔记
示例1：
var abc;
console.log(abc === undefined);
console.log(abc === null);
console.log(typeof abc === undefined);
console.log(typeof abc === 'undefined');
=> true;
=> false;
=> false;
=> true;
示例2：
var ceshi = document.getElementById('ceshi');
ceshi.abc = '1111';
var abc = '2222';
function ceshiListener() {
alert(this.abc);
}
ceshi.addEventListener('click', ceshiListener, false);
=> 1111
PS：测试结果，在W3C标准中，侦听器的this的执行环境为被侦听对象。
示例3：
var ceshi = document.getElementById('ceshi');
ceshi.abc = '1111';
var abc = '2222';
function ceshiListener() {
alert(this.abc);
}
ceshi.attachEvent('onclick', ceshiListener);
=> 2222
PS：测试结果，在IE10及以下版本中，侦听器的this的执行环境为window。但在IE11中已不支持attachEvent。
示例4：
指定MSIE标准的事件侦听器中this的执行环境,解决示例3中的问题。
要素：1、将原函数传递给被侦听节点对象某成员。2、注意MSIE标准，不自动传递事件对象window.event给侦听器
示例代码：
node['abc'] = listener; //改变this执行环境
node['delegate'] = function () {
node['abc'](window.event); //针对IE不自动传递事件对象给侦听器
};
node.attachEvent('onclick', node['delegate']);
示例5：
var ceshi = 1;
function abc(ceshi) {//传入的参数名为特殊的局部变量
ceshi = 2; //局部变量
alert(ceshi);
}
abc();
alert(ceshi);
=> 2
=> 1
PS：传入同名参数，可截断作用域链。不影响上级变量，上级变量也不自动传入。
示例6：
全局替换
var a = 'dede';
var b = a.replace(/d/g, '-');
alert(a);
alert(b);
=> dede
=> -e-e
示例7：
关于转义
字符串中，一个\代表转义，单个\可直接忽视。两个\\，输出\。转义不能转义的字符时，转义失败，但\并不输出。
正则表达式中，一般情况下，对于-，转义字符\，可加可不加，出于良好的语义，最好加上。
示例代码：
var abc = 'my\-class\-abc';
var ceshi = abc.replace(/\-/g, '\\-');
alert(abc);
alert(ceshi);
=> my-class-abc
=> my\-class\-abc
var abc = 'my-class-abc';
var ceshi = abc.replace(/\-/g, '\\-');
alert(abc);
alert(ceshi);
=> my-class-abc
=> my\-class\-abc
var abc = 'my\-class\-abc';
var ceshi = abc.replace(/-/g, '\\-');
alert(abc);
alert(ceshi);
=> my-class-abc
=> my\-class\-abc
示例8：
改变函数执行环境
示例代码：
function changeFuncEnv(obj, func) {
return function () {//不用function包装，会立刻执行func函数。且不可接受自定义参数。
func.apply(obj, arguments);
}
}
示例9：
得到浏览器宽高
示例代码：
function getBorwerSize() {
var w3cDom = document.documentElement;
return {
'width': window.innerWidth || (w3cDom && w3cDom.clientWidth) || document.body.clientWidth,
'height': window.innerHeight || (w3cDom && w3cDom.clientHeight) || document.body.clientHeight
};
}
示例10：
基本的nodeType
ELEMENT_NODE: 1,
ATTRBUTE_NODE: 2,
TEXT_NODE: 3,
CDATA_SECTION_NODE: 4,
ENTITY_REFERENCE_NODE: 5,
ENTITY_NODE: 6,
PROCESSING_INSTRUCTION_NODE: 7,
COMMENT_NODE: 8,
DOCUMENT_NODE: 9,
DOCUMENT_TYPE_NODE: 10,
DOCUMENT_FRAGMENT_NODE: 11,
NOTATION_NODE: 12
示例11：
线性遍历节点
function walkDOMLinear(node, func) {
node = node || doucment;
var nodes = node.getElementsByTagName('*');
for (var i = 0; i < nodes.length; i++) {
func.call(nodes[i]);
}
}
示例12：
深度递归遍历节点
function walkDOMRecursive(node, depth, func) {
var root = node || window.document;
var node = root.firstChild;
func.call(root, depth++);
if (node) {
walkDOMRecursive(node, depth, func);
node = node.nextSibling;
}
}
示例13：
深度递归遍历节点属性（未验证）
function walkDOMAttrRecursive(node, depth, func) {
var root = node || window.document;
var node = root.firstChild;
if (root.attributes) {
for (var i = 0; i < root.attributes.length; i++) {//将属性节点视为普通节点，遍历
func(root.attributes[i], depth);
}
}
depth++;
while (node) {
walkDOMAttrRecursive(node, depth, func);
node = node.nextSibling;
}
}
