Programming challenges-drop-down menu

Recently, a learning platform called Muke network is very popular. There is usually a small question behind the course, which is used to detect the learning results of friends. I have seen that a course is good, and I have also replied a lot later, but I feel that the code quality is not high. This may be related to the Course Positioning. If you are confident that it is better to write, you may wish to challenge it. If you are interested, refer to the following link:

Course address: http://www.imooc.com/code/3631

I will post the question requirements again:

Programming challenges

Based on what you have learned, you can achieve the menu effect shown in the following figure: Click the downward triangle in the menu to expand the menu, and click the blank area on the page to collapse the menu, press the up and down arrow keys on the keyboard to select the corresponding options. Click or press the Enter key to set the highlighted options as the menu title.

:

Initial:

Click to display:

After clicking:

There are so many requirements. I can see that all the implementations of our friends are similar. They are nothing more than a cyclical event. It is completely done as prompted, and there is no innovation of its own.

I will paste my code below:

/**       *  下拉菜单       *  @param {string} id 节点#ID       */      function Selecter (id) {          var parent = document.getElementById(id),              nodes = parent.children;          this.parent = parent;          this.title = nodes[0];          this.menu = nodes[1];          this.init();      }      /**       * 初始化       */      Selecter.prototype.init = function(){        var doc = document;        this.selected = null;        this.maxLen = this.menu.children.length;        doc.addEventListener(‘click‘,this,false);        doc.addEventListener(‘keydown‘,this,false);        this.menu.addEventListener(‘mouseover‘,this,false);        this.menu.addEventListener(‘mouseout‘,this,false);      }      /**       * 事件处理       * @param {object} event 事件对象       */      Selecter.prototype.handleEvent = function(event){        var target = event.target || event.srcElement;        switch(target.nodeName){          //点击三角时          case ‘CITE‘:            this.menuShow();            break;           // 滑过滑过、离开、点击每个选项时          case ‘A‘:            this.removeLight();            this.selected = target;            this.menuUpdate();            this.hightLight();            if(event.type==‘click‘){              this.menuHide();            }            break;            // 点击页面空白处时          case ‘HTML‘:            this.menuHide();            break;          //键盘操作          default:            this.keydown(event.keyCode);            break;        }        return      }      /**       *  更新菜单值       */      Selecter.prototype.menuUpdate = function(){        this.title.innerHTML = this.selected.innerHTML;      }      /**       * 高亮选中项       */      Selecter.prototype.hightLight = function(){        if(this.selected){          this.selected.style.backgroundColor = ‘gray‘;        }      }      /**       * 移除高亮       */      Selecter.prototype.removeLight = function(){        if(this.selected){          this.selected.style.backgroundColor = ‘white‘;        }      }      /**       * 显示菜单项       */      Selecter.prototype.menuShow = function(){        this.menu.style.display = ‘block‘;        this.hightLight();      }      /**       * 隐藏菜单项       */      Selecter.prototype.menuHide = function(){        this.menu.style.display = ‘none‘;      }      /**       * 取下一项       */      Selecter.prototype.next= function(){        var target = this.selected;        var index = target ? target.getAttribute(‘selectid‘)-1 : -1;        this.removeLight();        index = ++index % this.maxLen;        this.selected = this.menu.children[index].children[0];        this.hightLight();      }      /**       * 取上一项       */      Selecter.prototype.prev = function(){        var target = this.selected;        var index = target ? target.getAttribute(‘selectid‘)-1 : 1;        this.removeLight();        index = --index < 0 ? 0 : index;        this.selected = this.menu.children[index].children[0];        this.hightLight();      }      /**       *  键盘操作       * @param {number} code ASSIC码       */      Selecter.prototype.keydown = function(code){        switch(code){          case 40: //down            this.next();            break;          case 38://up            this.prev();            break;          case 13:            this.menuUpdate();            this.menuHide();            break;          default:            break;        }      }//调用  window.onload=function(){    var menu = new Selecter(‘divselect‘);  }

I write it as an object. The write benefits include:

1: The caller does not need to care about the nodes and implementation logic in the drop-down box. You only need to input an ID.

2: The entire drop-down menu is regarded as an object. Each operation on the menu can be stored inside the object. Avoid unnecessary node query operations.

3: The event state is on the root node and listens through bubbling, which saves code and effectively improves performance.

4: the code is written by function, with clear structure and convenient extension and maintenance.

The above is what Wang said.

If you think this article is helpful to you, click [recommended]. Do you want to study with me? Then [follow] Me!

 

Programming challenges-drop-down menu