2015-02-07——js笔记

示例1：

        var abc;

        alert(abc === undefined);

        =>  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 () {

                func.apply(obj, arguments);

            }

        }

示例9：

        得到浏览器宽高

        示例代码：

        function getBorwerSize() {
            var w3cDoc = document.documentElement;
            return {
                ‘width‘: window.innerWidth || (w3cDom && w3cDoc.clientWidth) || document.body.clientWidth,
                ‘height‘: window.innerHeight || (w3cDom && w3cDoc.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;
            func(node, depth++);  //对节点进行操作，包括普通节点，属性节点
            if (node.attributes) {
                for (var i = 0; i < node.attributes.length; i++) {//将属性节点视为普通节点，遍历
                    walkDOMAttrRecursive(node, depath-1, func);
                }
            }
            while (node) {
                walkDOMAttrRecursive(node, depth, func);
                node = node.nextSibling;
            }
        }