码迷，mamicode.com
首页 > Web开发 > 详细

关于js封装框架类库之选择器引擎（二）

时间：2016-04-12 01:56:26      阅读：234      评论：0      收藏：0      [点我收藏+]

标签：

在上篇介绍了选择器的获取标签、id、类名的方法，现在我们在上篇基础上继续升级

1、问题描述：上篇get（‘选择器‘）已经实现，如果get方法里是一个选择器的父元素，父元素是DOM对象，那么如何获取元素

思路：1、首先想到的是标签、id、类名的三个方法  2、假设是body节点，那么方法中的document改成body 3、传入的参数如何判断是否为DOM

注意：在获取id方法中全局也只有一个id，所以其中的doument无须修改

修改如下

技术分享 
// 注释: 对获取DOM对象方法的封装
var getTag = function ( tag, context, results ) {
    results = results || [];
    context = context || document;//防止context是空时报错现象出现
    
    results.push.apply( results, context.getElementsByTagName( tag ) );
    return results;
};

var getId = function ( id, results ) {
    results = results || [];
    results.push( document.getElementById( id ) );
    return results;
};

var getClass = function ( className, context, results ) {
    results = results || [];
    context = context || document;
    if ( document.getElementsByClassName ) {
        results.push.apply( results, context.getElementsByClassName( className ) );
    } else {
        each( getTag( ‘*‘, context ), function ( i, v ) {
            if ( ( ‘ ‘ + v.className + ‘ ‘ )
                        .indexOf( ‘ ‘ + className + ‘ ‘ ) != -1 ) {
                results.push( v );
            }
        } );
    }
    return results;
};


// 对each方法的封装
var each = function ( arr, fn ) {
    for ( var i = 0; i < arr.length; i++ ) {
        if ( fn.call( arr[ i ], i, arr[ i ] ) === false ) {
            break;
        }
    }
};
        
// 通用的get方法
var get = function ( selector, context, results ) {
    results = results || [];
    var rquickExpr = /^(?:#([\w-]+)|\.([\w-]+)|([\w]+)|(\*))$/,
        m = rquickExpr.exec( selector );
    
    if ( m ) {    
        if ( m[ 1 ] ) {
            results = getId( m[ 1 ], results );
        } else if ( m[ 2 ] ) {
            results = getClass( m[ 2 ], context, results );
        } else if ( m[ 3 ] ) {
            results = getTag( m[ 3 ], context, results );
        } else if ( m[ 4 ] ) {
            results = getTag( m[ 4 ], context, results );
        }
        
    }
View Code

验证以上封装的方法，html如下（为了使用方便，以下封装的js都单独放在common.js文件中，在html中须引入使用）

技术分享 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .rect {
                width: 400px;
                height: 50px;
                margin: 10px 0;
            }
            .c  {  border: 1px dashed red; }
            .c1 { border: 1px dashed green; }
            .c2 { border: 1px dashed blue; }
        </style>
        <script src="common.js"></script>//把上面的函数单独放在一个js文件中，在html中引入
    </head>
    <body>
        <div class="c">
            <div class="c1 rect"></div>
            <div class="c2 rect"></div>
            <div class="c1 rect"></div>
            <div class="c2 rect"></div>
        </div>
        <hr />
        <div>
            <div class="c1 rect"></div>
            <div class="c2 rect"></div>
            <div class="c1 rect"></div>
            <div class="c2 rect"></div>
        </div>
    </body>
    <script type="text/javascript">
        get( ‘.c1‘, get( ‘.c‘ )[ 0 ] )[ 1]
            .style.backgroundColor = ‘lightgreen‘;
        
    </script>
</html>
View Code

2、问题描述：假设get方法中传入的context是一个DOM数组
思路：首先想到需要遍历数组，那么问题来了，如何判断是否为DOM数组，如果不是数组怎么办，还有在哪一个方法中遍历呢

技术分享 
// 注释: 对基本DOM数组方法的封装
var getTag = function ( tag, context, results ) {
    results = results || [];
    results.push.apply( results, context.getElementsByTagName( tag ) );
    return results;
};

var getId = function ( id, results ) {
    results = results || [];
    results.push( document.getElementById( id ) );
    return results;
};

var getClass = function ( className, context, results ) {
    results = results || [];

    if ( document.getElementsByClassName ) {
        results.push.apply( results, context.getElementsByClassName( className ) );
    } else {
        each( getTag( ‘*‘, context ), function ( i, v ) {
            if ( ( ‘ ‘ + v.className + ‘ ‘ )
                        .indexOf( ‘ ‘ + className + ‘ ‘ ) != -1 ) {
                results.push( v );
            }
        } );
    }
    return results;
};


// 对each方法的封装
var each = function ( arr, fn ) {
    for ( var i = 0; i < arr.length; i++ ) {
        if ( fn.call( arr[ i ], i, arr[ i ] ) === false ) {
            break;
        }
    }
};
        

// 通用的方法
var get = function ( selector, context, results ) {
    results = results || [];
    context = context || document;
    //                     1          2        3       4
    var rquickExpr = /^(?:#([\w-]+)|\.([\w-]+)|([\w]+)|(\*))$/,
        m = rquickExpr.exec( selector );
    
    if ( m ) {        
        //此处判断context是否为数组，如果不是数组让其成为数组
        if ( context.nodeType ) {
            context = [ context ];
        }
        each( context, function ( i, v ) {
            if ( m[ 1 ] ) {
                results = getId( m[ 1 ], results );
            } else if ( m[ 2 ] ) {
                results = getClass( m[ 2 ], this, results );//this可以替代v
            } else if ( m[ 3 ] ) {
                results = getTag( m[ 3 ], this, results );
            } else if ( m[ 4 ] ) {
                results = getTag( m[ 4 ], this, results );
            }
        } );
    }
    
    return results;
};
View Code

验证以上封装的方法，html如下

技术分享 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .rect {
                width: 400px;
                height: 50px;
                margin: 10px 0;
            }
            .c  {  border: 1px dashed red; }
            .c1 { border: 1px dashed green; }
            .c2 { border: 1px dashed blue; }
        </style>
        <script src="common.js"></script>
    </head>
    <body>
        <div class="c">
            <div class="c1 rect"></div>
            <div class="c2 rect"></div>
            <div class="c1 rect"></div>
            <div class="c2 rect"></div>
        </div>
        <hr />
        <div class="c">
            <div class="c1 rect"></div>
            <div class="c2 rect"></div>
            <div class="c1 rect"></div>
            <div class="c2 rect"></div>
        </div>
    </body>
    <script type="text/javascript">
        var l = get( ‘.c‘ );
        each( get( ‘.c1‘, l ), function () { 
            this.style.backgroundColor = ‘lightblue‘;
        } );
    </script>
</html>
View Code

3、问题描述：假设get方法中传入的context是一个选择器字符串，也就是在页面中找到一个节点，然后在其后代再找出符合要求的节点
思路：此时传入context是一个选择器字符串，判断其是否为字符串，现在假设先把这个字符串找出来，然后再通过each方法找出其后代的元素

技术分享 
var myPush = function( target, els ) {
    var j = target.length,
        i = 0;
    // Can‘t trust NodeList.length
    while ( (target[j++] = els[i++]) ) {}
    target.length = j - 1;
};


// 注释: 对基本方法的封装
var getTag = function ( tag, context, results ) {
    results = results || [];
    //此处也无须用context=context||[]
    try {
        results.push.apply( results, context.getElementsByTagName( tag ) );//ie8及以下版本不支持传入伪数组
    } catch ( e ) {
        myPush( results, context.getElementsByTagName( tag ) );//对ie8及以下版本的支持
    }
    
    return results;
};

var getId = function ( id, results ) {
    results = results || [];
    results.push( document.getElementById( id ) );
    return results;
};

var getClass = function ( className, context, results ) {
    results = results || [];

    if ( document.getElementsByClassName ) {
        results.push.apply( results, context.getElementsByClassName( className ) );
    } else {
        each( getTag( ‘*‘, context ), function ( i, v ) {
            if ( ( ‘ ‘ + v.className + ‘ ‘ )
                        .indexOf( ‘ ‘ + className + ‘ ‘ ) != -1 ) {
                results.push( v );
            }
        } );
    }
    return results;
};


// 对each方法的封装
var each = function ( arr, fn ) {
    for ( var i = 0; i < arr.length; i++ ) {
        if ( fn.call( arr[ i ], i, arr[ i ] ) === false ) {
            break;
        }
    }
};
        

// 通用的get方法
var get = function ( selector, context, results ) {
    results = results || [];
    context = context || document;
    var rquickExpr = /^(?:#([\w-]+)|\.([\w-]+)|([\w]+)|(\*))$/,
        m = rquickExpr.exec( selector );
    
    if ( m ) {
        if ( context.nodeType ) {
            context = [ context ];
        }
        //此时对context判断是否为字符串，如果是假设已经找出context
        if ( typeof context == ‘string‘ ) {
            context = get( context );
        }
        each( context, function ( i, v ) {
            if ( m[ 1 ] ) {
                results = getId( m[ 1 ], results );
            } else if ( m[ 2 ] ) {
                results = getClass( m[ 2 ], this, results );//此处可以用this，也可以用v
            } else if ( m[ 3 ] ) {
                results = getTag( m[ 3 ], this, results );
            } else if ( m[ 4 ] ) {
                results = getTag( m[ 4 ], this, results );
            }
        } );
    }
    
    return results;
};
View Code

验证以上封装的方法，html如下

技术分享 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .rect {
                width: 400px;
                height: 50px;
                margin: 10px 0;
            }
            .c {
                border: 1px dashed red;
            }
            .c1 { border: 1px dashed green; }
            .c2 { border: 1px dashed blue; }
        </style>
        
        <script src="common.js"></script>
    </head>
    <body>
        <div class="c">
            <div class="c1 rect"></div>
            <div class="c2 rect"></div>
            <div class="c1 rect"></div>
            <div class="c2 rect"></div>
        </div>
        <hr />
        <div>
            <div class="c1 rect"></div>
            <div class="c2 rect"></div>
        </div>
        <hr />
        <div class="c">
            <div class="c1 rect"></div>
        </div>
    </body>
    <script type="text/javascript">
        // 在页面中找到所有的 .c 的节点, 然后在 .c 的后代元素中
        // 找符合 .c1 的节点, 并返回
        each( get( ‘.c1‘, ‘.c‘ ), function () { 
            this.style.backgroundColor = ‘skyblue‘;
        } );
    </script>
</html>
View Code


4、问题描述：假设get方法中传入的context是多个选择器字符串，在这处理的是组合选择器

思路： 拿到多个选择器的字符串, 首先需要处理的是逗号，将其分解成几个简单的部分, 然后再逐一处理，每一个子选择器, 都是按照从左往右的形式去过滤，先处理一个选择器, 得到的结果再被后面的选择器进行处理

技术分享 
var myPush = function( target, els ) {
    var j = target.length,
        i = 0;
    // Can‘t trust NodeList.length
    while ( (target[j++] = els[i++]) ) {}
    target.length = j - 1;
};


// 注释: 对基本方法的封装
var getTag = function ( tag, context, results ) {
    results = results || [];
    try {
        results.push.apply( results, context.getElementsByTagName( tag ) );
    } catch ( e ) {
        myPush( results, context.getElementsByTagName( tag ) );
    }
    
    return results;
};

var getId = function ( id, results ) {
    results = results || [];
    results.push( document.getElementById( id ) );
    return results;
};

var getClass = function ( className, context, results ) {
    results = results || [];

    if ( document.getElementsByClassName ) {
        results.push.apply( results, context.getElementsByClassName( className ) );
    } else {
        each( getTag( ‘*‘, context ), function ( i, v ) {
            if ( ( ‘ ‘ + v.className + ‘ ‘ )
                        .indexOf( ‘ ‘ + className + ‘ ‘ ) != -1 ) {
                results.push( v );
            }
        } );
    }
    return results;
};


// 对each方法的封装
var each = function ( arr, fn ) {
    for ( var i = 0; i < arr.length; i++ ) {
        if ( fn.call( arr[ i ], i, arr[ i ] ) === false ) {
            break;
        }
    }
};
        
//对myTrim方法的封装，去空格
var myTrim = function ( str ) {
                if ( String.prototype.trim ) {
                    return str.trim();
                } else {
                    return str.replace( /^\s+|\s+$/g, ‘‘ );
                }
            };
            
// 通用的get方法
var get = function ( selector, context, results ) {
    results = results || [];
    context = context || document;
    //                     1          2        3       4
    var rquickExpr = /^(?:#([\w-]+)|\.([\w-]+)|([\w]+)|(\*))$/,
        m = rquickExpr.exec( selector );
    
    if ( m ) {
        if ( context.nodeType ) {
            context = [ context ];
        }
        // 如果 context 是一个 dom 数组就没有问题了
        // 但是 context 是一个选择器字符串. 有可能是 ‘.c‘
        // 
        if ( typeof context == ‘string‘ ) {
            context = get( context );
        }
        each( context, function ( i, v ) {
            if ( m[ 1 ] ) {
                results = getId( m[ 1 ], results );
            } else if ( m[ 2 ] ) {
                results = getClass( m[ 2 ], v, results );
            } else if ( m[ 3 ] ) {
                results = getTag( m[ 3 ], this, results );
            } else if ( m[ 4 ] ) {
                results = getTag( m[ 4 ], this, results );
            }
        } );
    }
    
    return results;
};

var select = function ( selector, context, results ) {
                results = results || [];
                // 首先处理逗号
                var newSelectors = selector.split( ‘,‘ );
                // 细节: 一般不考虑两端的空格
                each( newSelectors, function ( i, v ) {
                    results.push.apply( results, get( myTrim( v ), context ) );    
                } );
                //此处我们可以用for in方法进行分解
                /*for(var k in newSelectors){
                    var v = newSelectors[k];
                        v = myTrim(v)//v.trim();
                    var list = get(v,context);
                    results.push.apply(results,list);    
                    
                }*/    
                return results;
            };
View Code

验证以上封装的方法，html如下

技术分享 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .rect {
                width: 400px;
                height: 50px;
                margin: 10px 0;
            }
            .c1 {
                border: 1px dashed red;
            }
            .c2 { border: 1px dashed green; }
            .c3 { border: 1px dashed blue; }
        </style>
        <script src="common.js"></script>

    </head>
    <body>
        <div class="c">
            <div class="c1 rect"></div>
            <div class="c2 rect"></div>
            <div class="c3 rect"></div>
            <div class="c2 rect"></div>
        </div>
        <hr />
        <div>
            <div class="c1 rect"></div>
            <div class="c3 rect"></div>
        </div>
        <hr />
        <div class="c">
            <div class="c1 rect"></div>
        </div>
    </body>
    <script>
        var list = select( ‘.c1, .c2‘ );
        each( list, function () {
            this.style.backgroundColor = ‘skyblue‘;
        });
        
    </script>
</html>
View Code

5、问题描述：在这我们传入的是后代选择器字符串

思路：假设list = get（‘.c  .c1‘,context）,即在context下找出.c，然后再在.c下找出.c1

等价于：list = get（‘.c ‘,context）；  list = get（‘.c1‘,list） 

技术分享 
var myPush = function( target, els ) {
    var j = target.length,
        i = 0;
    // Can‘t trust NodeList.length
    while ( (target[j++] = els[i++]) ) {}
    target.length = j - 1;
};


// 注释: 对基本方法的封装
var getTag = function ( tag, context, results ) {
    results = results || [];
    try {
        results.push.apply( results, context.getElementsByTagName( tag ) );
    } catch ( e ) {
        myPush( results, context.getElementsByTagName( tag ) );
    }
    
    return results;
};

var getId = function ( id, results ) {
    results = results || [];
    results.push( document.getElementById( id ) );
    return results;
};

var getClass = function ( className, context, results ) {
    results = results || [];

    if ( document.getElementsByClassName ) {
        results.push.apply( results, context.getElementsByClassName( className ) );
    } else {
        each( getTag( ‘*‘, context ), function ( i, v ) {
            if ( ( ‘ ‘ + v.className + ‘ ‘ )
                        .indexOf( ‘ ‘ + className + ‘ ‘ ) != -1 ) {
                results.push( v );
            }
        } );
    }
    return results;
};


// 对each方法的封装
var each = function ( arr, fn ) {
    for ( var i = 0; i < arr.length; i++ ) {
        if ( fn.call( arr[ i ], i, arr[ i ] ) === false ) {
            break;
        }
    }
};
        
//对myTrim方法的封装，去空格
var myTrim = function ( str ) {
                if ( String.prototype.trim ) {
                    return str.trim();
                } else {
                    return str.replace( /^\s+|\s+$/g, ‘‘ );
                }
            };
            
// 通用的get方法
var get = function ( selector, context, results ) {
    results = results || [];
    context = context || document;
    //                     1          2        3       4
    var rquickExpr = /^(?:#([\w-]+)|\.([\w-]+)|([\w]+)|(\*))$/,
        m = rquickExpr.exec( selector );
    
    if ( m ) {
        if ( context.nodeType ) {
            context = [ context ];
        }
        // 如果 context 是一个 dom 数组就没有问题了
        // 但是 context 是一个选择器字符串. 有可能是 ‘.c‘
        // 
        if ( typeof context == ‘string‘ ) {
            context = get( context );
        }
        each( context, function ( i, v ) {
            if ( m[ 1 ] ) {
                results = getId( m[ 1 ], results );
            } else if ( m[ 2 ] ) {
                results = getClass( m[ 2 ], v, results );
            } else if ( m[ 3 ] ) {
                results = getTag( m[ 3 ], this, results );
            } else if ( m[ 4 ] ) {
                results = getTag( m[ 4 ], this, results );
            }
        } );
    }
    
    return results;
};

var select = function ( selector, context, results ) {
                results = results || [];
                // 首先处理逗号
                var newSelectors = selector.split( ‘,‘ );
                // 细节: 一般不考虑两端的空格
                each( newSelectors, function ( i, v ) {
                    
                    var list = v.split(‘ ‘);
                    var cont = context;
                    for(var i = 0;i <list.length;i++){
                        //如果list[i]是空字符串，会生成一个新数组,则需要进行如下判断
                        if(list[i] === ‘‘) continue;
                        cont = get(list[i],cont);
                    }
                    results.push.apply( results, cont );    
                } );
                
                return results;
            };
View Code

验证以上封装的方法，html如下

技术分享 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .rect {
                width: 400px;
                height: 50px;
                margin: 10px 0;
            }
            .c1 {
                border: 1px dashed red;
            }
            .c2 { border: 1px dashed green; }
            .c3 { border: 1px dashed blue; }
        </style>
        <script src="common.js"></script>

    </head>
    <body>
        <div class="c">
            <div class="c1 rect"></div>
            <div class="c2 rect"></div>
            <div class="c3 rect"><p>123</p></div>
            <div class="c2 rect"></div>
        </div>
        <hr />
        <div>
            <div class="c1 rect"></div>
            <div class="c3 rect"></div>
        </div>
        <hr />
        <div class="c">
            <div class="c1 rect"></div>
        </div>
    </body>
    <script>
        var list = select( ‘.c .c2‘ );
        each( list, function () {
            this.style.backgroundColor = ‘skyblue‘;
        });
        
    </script>
</html>
View Code

未完待续

 

关于js封装框架类库之选择器引擎（二）

标签：

原文地址：http://www.cnblogs.com/goweb/p/5380877.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！