邢栋博客

邢栋博客,Action博客,记录工作和生活中的点点滴滴

SELECT和EPOLL模式
SELECT和EPOLL模式

select模式
1.应用层首先初始化FD_SET(填入需要检测的socket集合),然后调用select函数
2.内核对FD_SET包含的所有socket进行了逐个检测,如果某个socket有状态发生,则填入内容分配一个数组,当所有socket都检查完成后,再将该数组copy到FD_SET中,然后返回应用层

3.select调用返回,应用层从返回的FD_SET中提取有状态发生的socket,并根据socket值映射客户端上下文(可以通过map或hash_map实现映射),然后处理收到的数据

epoll模式
1.应用层调用 epoll_wait检测有事件发生的连接
2.内核对epoll注册事件的socket进行跟踪,一旦某个socket有事件发生,便将其保存到一个内部数组。当接到应用层调用epoll_wait时,直接将该集合copy到epoll_wait数组返回给应用层即可,不需要象select模式对每个worker进行逐一检查。

3.epoll_wait调用返回,所有有事件发生的连接被填入一个epoll_event数组,应用层可根据epoll_event中的用户自定义变量 直接映射客户端上下文(不需要借助hash表),然后处理收到的数据

select标签样式美化

js部分

<script type="text/javascript">
    var childCreate=false;
    function Offset(e)
    //取标签的绝对位置
    {
        var t = e.offsetTop;
        var l = e.offsetLeft;
        var w = e.offsetWidth;
        var h = e.offsetHeight-2;
    
        while(e=e.offsetParent)
        {
            t+=e.offsetTop;
            l+=e.offsetLeft;
        }
        return {
            top : t,
            left : l,
            width : w,
            height : h
        }
    }
    
    function loadSelect(obj){
    
        //第一步:取得Select所在的位置
        var offset=Offset(obj);
        //第二步:将真的select隐藏
        obj.style.display="none";
    
        //第三步:虚拟一个div出来代替select
        var iDiv = document.createElement("div");
            iDiv.id="selectof" + obj.name;
            iDiv.style.position = "absolute";
            iDiv.style.width=offset.width + "px";
            iDiv.style.height=offset.height + "px";
            iDiv.style.top=offset.top + "px";
            iDiv.style.left=offset.left + "px";
            iDiv.style.background="url(icon_select.png) no-repeat right";
            iDiv.style.border="1px solid #cccccc";
            iDiv.style.fontSize="12px";
            iDiv.style.lineHeight=offset.height + "px";
            iDiv.style.textIndent="4px";
        document.body.appendChild(iDiv);
    
        //第四步:将select中默认的选项显示出来
        var tValue=obj.options[obj.selectedIndex].innerHTML;
        iDiv.innerHTML=tValue;
    
        //第五步:模拟鼠标点击
        iDiv.onmouseover=function(){//鼠标移到
            iDiv.style.background="url(icon_select.png) no-repeat right";
        }
        iDiv.onmouseout=function(){//鼠标移走
            iDiv.style.background="url(icon_select.png) no-repeat right";
        }
        iDiv.onclick=function(){//鼠标点击
            if (document.getElementById("selectchild" + obj.name)){
            //判断是否创建过div
                if (childCreate){
                    //判断当前的下拉是不是打开状态,如果是打开的就关闭掉。是关闭的就打开。
                    document.getElementById("selectchild" + obj.name).style.display="none";
                    childCreate=false;
                }else{
                    document.getElementById("selectchild" + obj.name).style.display="";
                    childCreate=true;
                }
            }else{
                //初始一个div放在上一个div下边,当options的替身。
                var cDiv = document.createElement("div");
                cDiv.id="selectchild" + obj.name;
                cDiv.style.position = "absolute";
                cDiv.style.width=offset.width + "px";
                cDiv.style.height=obj.options.length *20 + "px";
                cDiv.style.top=(offset.top+offset.height+2) + "px";
                cDiv.style.left=offset.left + "px";
                cDiv.style.background="#f7f7f7";
                cDiv.style.border="1px solid silver";
    
                var uUl = document.createElement("ul");
                uUl.id="uUlchild" + obj.name;
                uUl.style.listStyle="none";
                uUl.style.margin="0";
                uUl.style.padding="0";
                uUl.style.fontSize="12px";
                cDiv.appendChild(uUl);
                document.body.appendChild(cDiv);        
                childCreate=true;
                for (var i=0;i<obj.options.length;i++){
                    //将原始的select标签中的options添加到li中
                    var lLi=document.createElement("li");
                    lLi.id=obj.options[i].value;
                    lLi.style.textIndent="4px";
                    lLi.style.height="20px";
                    lLi.style.lineHeight="20px";
                    lLi.innerHTML=obj.options[i].innerHTML;
                    uUl.appendChild(lLi);
                }
                var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
                for (var j=0;j<obj.options.length;j++){
                    //为li标签添加鼠标事件
                    liObj[j].onmouseover=function(){
                        this.style.background="gray";
                        this.style.color="white";
                    }
                    liObj[j].onmouseout=function(){
                        this.style.background="white";
                        this.style.color="black";
                    }
                    liObj[j].onclick=function(){
                        //做两件事情,一是将用户选择的保存到原始select标签中,要不做的再好看表单递交后也获取不到select的值了。
                        obj.options.length=0;
                        obj.options[0]=new Option(this.innerHTML,this.id);
                        //同时我们把下拉的关闭掉。
                        document.getElementById("selectchild" + obj.name).style.display="none";
                        childCreate=false;
                        iDiv.innerHTML=this.innerHTML;
                    }
                }
            }
        }
    }

    
</script>


css部分

<style type="text/css">
    select{width:200px;height:30px;}
</style>


body部分

<form name="form1" >
    <select id="problem" name="problem">
        <option value="0">你最喜欢的运动是什么</option>
        <option value="1">你的高中班主任姓名</option>
        <option value="2">你的出生地是哪</option>
    </select>
</form>
<script type="text/javascript">
   loadSelect(document.form1.problem);
</script>


优惠券
最新微语