JavaScript练习一之键盘敲击获取关键词

在后台项目开发中，有个过程是需要交互获取关键词，因为当时项目紧急，所以就直接用了点击事件，事后回想起来觉得交互起来特别不友好，所以决定开个组件进行练习。后在其他后台项目中成功了运用。效果还是不错的。

  JS代码清单 :
 

// @charset "utf-8";
 /**
 * @function : 键盘敲击获取关键词(练习)
 * @author   : yinggaozhen
 * @create   : 2015-11-06
 * @version  : 0.0.0
 * @example  :
 *  var option = {
          'shockInput'        :     '#keyword',
          'showArea'             :     '#showarea',
          'shockShowClass'       :     'showLable'
     }
      var tonkObj = new window.tonk(option);
     tonkObj.launch();
  */
  (function($, window) {
      var quota             = 'tonk';
      var dtaSuffix         = 'tags';
      var cancelPic         = 'cancel-tonk-pic';
 
      Object.prototype.isExsistDom = function(parent) {
          var parent = parent || undefined;
 
          if (parent === undefined) {             
              return this.length > 0 ? true : false;    
          }
          return $(parent).find(this).isExsistDom() ? true : false;
      }
 
       Object.prototype.addNewClass = function(domNewClass) {
          if (typeof domNewClass == 'string') this.addClass(domNewClass);
          return this;
      }
 
      Array.prototype.removeDeignElement = function(element) {
          this.splice($.inArray(element, this), 1);
          return this;
      }
 
      var tonk = function(option) {
          var me = this;
          me.options = $.extend({}, me.defaultOption, option);
          me.$ipEl = $(me.options.shockInput);
          me.$swEl = $(me.options.showArea);
          return me;
      };
 
      tonk.prototype = {
          launch : function() {
              var me = this;
              if (me.$ipEl.isExsistDom() == false || me.$swEl.isExsistDom() == false) {
                  return;
              }
 
              me.$ipEl.addNewClass(me.options.shockInputClass);
 
              me.tonkEvt();
              me.cancelXClickEvt();
          },
          tonkEvt : function() {
              var me = this;
              me.$ipEl.keydown(function(event){
                  if (event.keyCode != me.options.clickEvt) return;
 
                  if (!me.isTonkValidIp($(this).val())) {
                      return;
                  }
                  me.saveInputVal();
                  me.renderShowArea();
              })
          },
          cancelXClickEvt : function() {
              var me = this;
 
              $('.' + cancelPic).live('click', function() {
                  var tagName = $(this).attr('tagName') || '';
                  me.$ipEl.data(dtaSuffix, me.$ipEl.data(dtaSuffix).removeDeignElement(tagName));
                  me.renderShowArea();
              })
          },
          saveInputVal : function() {
              var me = this,
                   ipVal = me.$ipEl.val() || '';
 
              if (typeof me.$ipEl.data(dtaSuffix) == 'undefined') me.$ipEl.data(dtaSuffix, new Array());
              me.$ipEl.data(dtaSuffix).push(ipVal);
              me.$ipEl.val('');
 
              if (me.options.autoFocus == true) me.$ipEl.focus();
          },
          getInputVal : function() {
              var me = this;
              return typeof me.$ipEl.data(dtaSuffix) == 'undefined' ? new Array() : me.$ipEl.data(dtaSuffix);
          },
          renderShowArea : function() {
              var me = this;
 
              if (typeof me.$swulEl == 'undefined') {
                  me.$swulEl = $('<ul/>').addNewClass(me.options.shockShowClass);
                  me.$swEl.append(me.$swulEl);
              }
 
              me.$swulEl.html('');
              $.each(me.$ipEl.data(dtaSuffix), function(k, v) {    
                  me.$swulEl.append(me.renderTag(v));
              })
           },
          renderTag : function(tagName) {
                  var tTagHtml = "<li class='def_tonk_tag'>" + tagName + "<img src='label_03.png' class=" + cancelPic + " tagName=" +  
  tagName + "></li>";
               return tTagHtml;
           },
           isTonkValidIp : function(tonkIp) {
               var me = this;
               return tonkIp.length < parseInt(me.options.minInputLength) || tonkIp.length > parseInt(me.options.minInputLength) ?
 false : true;
           },
      }
 
      tonk.prototype.defaultOption = {
          'shockInput'        : '',
         'showArea'             : '',
          'shockInputClass'    : '',
         'shockShowClass'     : '',
         'minInputLength'    : '',
         'maxInputLength'    : '20',
         'clickEvt'             : 13,
         'autoFocus'         : true
      }
      return window[quota] = tonk;
  })(jQuery, window);

 感悟：
 1、样式很重要，通过传参形式以达到灵活配置的目的
 2、在后续改进中，发现在proyotype的时候一直出问题，虽然具体不知道原因所在，最后发现是原型的锅。原型虽然在一定程度上可以精简代码，加强逻辑，但是不能滥用。