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