JavaScript框架设计(四) 字符串选择器(选择器模块结束)

经过前面JavaScript框架设计(三) push兼容性和选择器上下文的铺垫,实现了在某一元素下寻找,现在终于进入了字符串选择器

首先,我们解决组合选择器,因为在一个选择器字符串中,它的优先级是最低的.

组合选择器

由于组合选择器是一个包含逗号的字符串,我们可以将其用逗号分隔开

下面看代码

01.html

var HPawn = function (selector) {

    var res = [];

    var list = selector.split(',');// 先将选择器字符串用逗号分隔开

    each(list, function (v) {

        get(myTrim(v), document, res);

    })

    return res;

}

在这里,我终于要引出我的关键对象 HPawn了,这个会在后面的面向对象封装中见到.

由于 String.prototype.trim() 在ie8 里面是不支持的,所以自己也要实现一个myTrim.

var myTrim = function (str) {

    // 如果本身有自己的get方法就调用,如果没有,就使用自己的myTrim方法.

    if (String.prototype.trim) {

        str = str.trim();

    } else {

        str.replace(/^\s|\s$/, "");

    }

    return str;

}

str.replace(/^\s|\s$/, ""); 这里是一个简单的正则替换.

下面是测试代码:

01.html

    <style>

        .c1,.c2,.c3,#dv{

            border: 1px solid lightblue;

            width: 300px;

            height: 60px;

            margin-bottom: 20px;

        }

    </style>

</head>

<body>

    <!--实现组合选择器-->

    <div class="c1">

        <div id="dv"></div>

    </div>

    <div class="c2"></div>

    <div class="c3"></div>

</body>

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

onload = function () {

	each(HPawn('#dv,.c2,.c3,'), function (v) {

		this.style.backgroundColor = 'red';

	})

}

看效果:

后代选择器

好了,上面已经解决了组合选择器的问题,下面开始后代选择器,选择器模块也在后代选择器之后结束,.

对于后代选择器,类似"div p span .c",我们首先想到的就是使用空格" "分割,得到每一个部分,从每一个部分中找到下面的部分,这就是一个递归的过程.

由于以空格分隔是比较特殊的,所以我们先介绍String.prototype.split() 这个方法.

如图:

在对字符串"1 2 3"(注意,2和3之间是两个空格),我们得到了四个元素,'1', '2'. '', '3',包含一个空字符串.

为什么会这样呢?

我们分析split的原理.

首先,游标从第一个字符开始,发现不是' ',就会到第二个字符' ',发现是' ',砍一刀,将前面的东西push到结果中.再继续走到达'2',发现不是' ',继续向前,到达' ',砍一刀,将前面的push到结果中,再向前走,发现还是' ',再砍一刀,将前面的字符串,也就是空字符串push到结果中...

好了,既然这样,那我们用' '来分割字符串的时候,很有可能会包含空字符串,我们必须做个判断.

看下面的递推式

var str = "l1,l2,l3,l4";

res = getChild(context,l1,0);

res = getChild(res,l2,1);

res = getChild(res,l3,2);

res = getChild(res,l4,3);

详细的理论过程就是上面这样,可以看到,后代选择器有几组,那么就会递归几次.

看下面的代码:

var getChild = function (parent, index) {

    // 如果已经超出了范围,就返回父元素数组

    if (index >= selectors.length) {

    	return parent;

    }

    // 如果父元素没有找到,那么就直接返回空数组

    if (!parent || parent.length == 0) {

    	return [];

    }

    // 如果选择器为空字符串,那么就直接越过一级查找

    if (!selectors[index]) {

        index += 2;

        return getChild(parent, index);

    }

    var res = get(selectors[index], parent);

    return index == (selectors.length - 1)

        ? res :

        getChild(res, ++index);

}

这里接受两个参数,第一个为父元素dom数组,第二个表示第几级,第一次调用的时候,index就是0.

下面是一个for循环版本,很直观的解释了后代选择器的选择算法.

	var parent = context;

    for (var i = 0; i < selectors.length; i++) {

        if (!selectors[i]) {

        	continue;

		}

		// 如果parent为空,就直接不再向后判断

		if(!arent){

            return [];

		}

		parent = get(selectors[i],parent);

	}

比如说选择器 'div p span',使用空格分开后,得到的就是字符串数组,然后从第一个字符串查找元素下一级元素,一直查找到末尾,然后返回.

现在我们把上面的代码整合

02.js

/// <reference path="common.js" />

var myTrim = function (str) {

    // 如果本身有自己的get方法就调用,如果没有,就使用自己的trim方法.

    if (String.prototype.trim) {

        str = str.trim();

    } else {

        str.replace(/^\s|\s$/, "");

    }

    return str;

}

// 在组合选择器的基础上实现后代选择器

var HPawn = function (selector, context, result) {

    var result = result || [];

    context = context || document;

    var list = selector.split(',');// 先将选择器字符串用逗号分隔开

    // 首先,应当对每一个被分开的元素进行split(' ')

    each(list, function (v) {

        v = myTrim(v);

        var selectors = v.split(' ');

        // 在这里,一个递归

        var getChild = function (parent, index) {

            // 如果已经超出了范围,就返回父元素数组

            if (index >= selectors.length) {

                return parent;

            }

            // 如果父元素没有找到,那么就直接返回空数组

            if (!parent || parent.length == 0) {

                return [];

            }

            // 如果选择器为空字符串,那么就直接越过一级查找

            if (!selectors[index]) {

                index += 2;

                return getChild(parent, index);

            }

            var res = get(selectors[index], parent);

            return index == (selectors.length - 1)

                ? res :

                getChild(res, ++index);

        }

        each(selectors, function (v) {

            result.push.apply(result, getChild(context, 0));

        })

    });

    return result;

}

好了,后代选择器已经完成了,下面写个demo.

02.htm

    <style>

        div {

            border: 1px solid green;

            padding: 20px;

            box-sizing: border-box;

            margin-bottom: 30px;

        }

        .c {

            height:300px;

            width: 500px;

        }

        .c1,

        .c2,

        .c4 {

            height: 80px;

            width: 400px;

        }

        .c3,

        .c5 {

            height: 40px;

            width: 200px;

        }

    </style>

    <div class="c">

        <div class="c1">

            <div class="c3"></div>

        </div>

        <div class="c2"></div>

    </div>

<hr/>

    <div class="c4">

        <div class="c5"></div>

    </div>

</head>

<body>

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

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

</body>

02.js

// 这个代码实在是太简洁了,太棒了

onload = function () {

    each(HPawn('.c4 .c5,.c .c1 .c3'), function () {

        this.style.backgroundColor = 'orange';

    })

}

下面是效果

看起来已经大功告成了.

好了,选择器模块我们已经实现了组合选择器和后代选择器.

但是jQuery还有很多,比如父子选择器,兄弟选择器,下一个,上一个,过滤器. 这些以后还需要再细心钻研啊.

好了,现在我们写一个简单的循环将这两个选择器做一个简化

03.js

var Hpawn = function (selector) {

    var result = []

    var selectors = selector.split(',');

    for (var i = 0, length = selectors.length; i < length; i++) {

        var singleSelectors = selectors[i].split(' ');

        var parent = document;

        for (var j = 0; j < singleSelectors.length; i++) {

            parent = get(singleSelectors[j], parent);

        }

        result.push.apply(result, parent);

    }

    return res;

}

上面的代码需要用到common.js里面的东西,也就是通用的get方法.

看起来,组合选择器和父子选择器就是这么简单,几句代码就搞定了,确实是,逻辑比较简单.

但是,它只能用作理解,太不严谨了.

好了,选择器模块已经结束.

下面,我会JavaScript框架设计(五)开始一个新的模块:Dom操作模块

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