JavaScript 框架设计(二)

JavaScript 高级框架设计 (二)

下来我们实现对id的选择,即id选择器.

我们将上一篇的get命名为getTag(),然后再编写一个getId(),和getClass()

然后在总的get方法中调用,这样做的好处就是模块化,便于维护.

我所有的代码都会托管到github上.

01.js

var getId = function (id, result) {

    result = result || [];

    //  由于获取的Id是一个元素,所以这里使用call.

    result.push.call(result,document.getElementById(id));

    return result;

}

var getClass = function (className, result) {

    result = result || [];

    result.push.apply(result, document.getElementsByClassName(className));

    return result;

}

好了,现在分别实现了三个get方法,但是怎么根据选择器表达式来调用者三个方法呢?

下面引出一个关键正则:

/^(?:#([\w-]+)|\.([\w-]+)|([\w]+)|(\*))$/

这段正则目的就是匹配id,类和标签选择器,并且通过exec可以拿到匹配的内容.

那么,

var m = expr.exec(selector);

m[1] 就表示id选择器,m[2]就表示类选择器,m[3]表示标签选择器,m[4]表示通用选择器

下面的代码就顺理成章了.

01.js

var get = function (selector, result) {

    result = result || [];

    var rquickExpr = /^(?:#([\w-]+)|\.([\w-]+)|([\w]+)|(\*))$/,

        m = rquickExpr.exec(selector);

    if (!m) {

        return result;

    }

     if (m[1]) {

         result = getId(selector);

     } else if (m[2]) {

         result = getClass(selector);

     } else if (m[3]) {

         result = getTag(selector);

     } else if (m[4]) {

         result = getAll(selector);

     }

    return result;

};

如果没有匹配到,就直接返回result,如果有匹配到,那么就一定是选择器中的一种,通过分组进行判断.

在对每个分组的判断可以优化,

 if (m[1]) {

      result = getId(m[1], result);

  } else if (m[2]) {

      result = getClass(m[2], result);

  } else {

      result = getTag(m[3] || '*', result)

  }

现在这样就已经可以完成对单独选择器的匹配了.

我们来进行测试一遍.

01.html

<body>

    <div>1</div>

    <div id="k">2</div>

    <div class="pawn">3</div>

    <p></p>

    <p></p>

</body>

<script src="01.js"></script>

01.js

onload = function(){

    each(get("p"),function(){

        this.style.backgroundColor = "green";

    })

    each(get("#k"),function(){

        this.style.backgroundColor = "red";

    });

    each(get(".pawn"),function () {

        this.style.backgroundColor = "pink";

    })

}

下面是结果,是不是欧了?

单独的选择器似乎已经完成,但是一个问题出现了? 有考虑过兼容性吗?

document.getElementsByClassName() ie8以下是不兼容的!

下面引入两个问题:

怎么判断兼容性?
怎么解决不兼容?

怎么判断兼容性?

我们通过chrome watch写上document

然后查看getElementsByClassName() 方法.

经过不断在原型链中搜索,

我们发现其嵌套很深,每次调用都在原型链中搜索.

当我们这样的代码在IE8 以下运行这样的代码时,

if(docuemnt.getElementsByClassName(className)){

  //

}

它会一直向上寻找,直到Object对象,效率很低.

如果按照上面的代码,那么每调用一次就要就行一次能力检测,效率肯定太低了.

怎么办呢?

方法就是只做一次能力检测,并把它记录下来.

其中,jQuery中就是这么做的,它拥有一个专门的功能检测模块,$.support,里面的属性包含存在兼容问题的方法或属性,并用布尔值来记录.

所以在我们这里,在全局作用域中(最终都要用成沙箱或者闭包)提供一个support对象,里面提供所有的以方法名相同的属性,值均为布尔值,在浏览器加载js的开始的时候,就进行能力判断,凡是涉及到能力检测的时候就直接检测support即可.

所以我们在代码开头加入

var support = {};

support.getElementsByClassName = !!document.getElementsByClassName;

那么以后再需要能力检测的时候,可以这么写:

if(support.getElementsByClassName){

    //...

}

似乎已经可以了.

但是,有一种攻击叫做注入漏洞攻击,我在文件开头嵌入这样的代码(chrome是允许内嵌js代码的!!!):

document.getElementsByClassName = 'pawn';

那么上面的检测还有用吗?

看看jQuery怎么做的,不仅要判断它是否存在,还要判断其能力是否符合要求.

看下面的代码

var support = {};

support.getElementsByClassName = function () {

    if (!document.getElementsByClassName) {

        return false;

    }

    var div = document.createElement('div'),

        pWithClass = document.createElement('p');

    pWithClass.className = 'pawn-pawn-pawn';

    div.appendChild(pWithClass);

    var res = div.getElementsByClassName('pawn-pawn-pawn');

    return res[0] === pWithClass;

} ();

然后我们在chrome控制台输入

support.getElementsByClassName

在ie8里,

可以看到,这样很有用.

现在查看jQuery源代码

看它的方法,实在是太简洁了,jQuery留给我们的,就是敬仰!!

现在检查已经完了,怎么解决不兼容问题呢?

解决兼容

怎么解决呢? 首先进行能力检测,如果有,就直接调用,如果没有,实现了一个自己的myGetClassName()方法.

原理很简单,通过通用选择器查找到所有的元素,然后看它有木有这个类名,如果有就push.

05.js

var getClass = function (className, result) {

    result = result || [];

    // 首先判断我们的docoument.getElementsByClassName() 有没有这个功能

    var res;

    if (support.getElementsByClassName) {

        res = document.getElementsByClassName(className);

    } else {

        // 自己实现getElementByClassName

        // 思路 : 首先获得所有元素,然后再在所有元素中获得带有这个类的元素

        res = myGetByClassName(className.document);

    }

    result.push.apply(result,res);

    return result;

}



var myGetByClassName = function (className, context) {

    var elements = context.getElementsByTagName("*"),

        res = [];

    // 循环判断是否符合要求

    each(elements, function () {

        // 这个细节非常重要 !!!!!

        if ((" " + this.className + " ").indexOf(" " + className + " ") != -1) {

            res.push(this);

        }

    })

    return res;

}

这个细节非常重要!!

 if ((" " + this.className + " ").indexOf(" " + className + " ") != -1) {

            res.push(this);

  }

好了,我们已经添加了自己的getClassName() 方法,现在来测试一遍.

05.html

<body>

    <div class="dv1">1</div>

    <div class="dv1">2</div>

    <div>3</div>

    <p clss='p1'>4</p>

    <p clss='p1'>5</p>

    <p>6</p>

<script src="05.js"></script>

</body>

<script>

    onload = function () {

    each(get('dv1'), function () {

        this.style.backgroundColor = "red";

    });

    each(get('p1'), function () {

        this.style.backgroundColor = "green";

    });

};

</script>

chrome下效果:

ie8下效果:

关于getElementsByClassName()的兼容问题就讨论到这里,在下一篇,JavaScript高级框架设计(三),我会开始介绍push的兼容问题和组合选择器.

最后特别感谢恩师蒋坤老师(jk)对我的知识学习和人生引导的极大帮助,非常感谢他.