[关闭]
@EncyKe 2016-10-26T02:46:47.000000Z 字数 3816 阅读 1011

手记：常用 JS 相关 Sublime Snippets

#手记

1. Class 增、删、换操作

1.1. addClass()

  1.   <snippet>
  2.     <content><![CDATA[
  3. function addClass(element, toAddClass) {
  4.   if (!!element.classList) {
  5.     element.classList.add(toAddClass)
  6.   } else {
  7.     var existence = element.className.indexOf(toAddClass)
  9.     if (existence < 0) {
  10.       element.className += toAddClass;
  11.     }
  12.   }
  13. }
  15. addClass(${1:DOMelement}, '${2:any-class}');
  16.   ]]></content>
  17.     <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  18.     <tabTrigger>addClass</tabTrigger>
  19.     <!-- Optional: Set a scope to limit where the snippet will trigger -->
  20.     <scope>source.js, text.html</scope>
  21.   </snippet>

1.2. removeClass()

  1.   <snippet>
  2.     <content><![CDATA[
  3. function removeClass(element, toDelClass) {
  4.   if (!!element.classList) {
  5.     element.classList.remove(toDelClass);
  6.   } else {
  7.     var classNames = element.className.split(/\s+/);
  9.     var pos = -1,
  10.       i,
  11.       len = classNames.length;
  13.     for (i = 0; i < len; i++ ) {
  14.       if (classNames[i] == toDelClass) {
  15.         pos = i;
  16.         break;
  17.       }
  18.     }
  20.     classNames.splice(i, 1);
  22.     element.className = classNames.join(' ');
  23.   }
  24. }
  26. removeClass(${1:DOMelement}, '${2:any-class}');
  27.   ]]></content>
  28.     <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  29.     <tabTrigger>removeClass</tabTrigger>
  30.     <!-- Optional: Set a scope to limit where the snippet will trigger -->
  31.     <scope>source.js, text.html</scope>
  32.   </snippet>

1.3. toggleClass()

  1.   <snippet>
  2.     <content><![CDATA[
  3. function toggleClass(element, toToggleClass) {
  4.   if (!!element.classList) {
  5.     element.classList.toggle(toToggleClass);
  6.   } else {
  7.     var classNames = element.className.split(/\s+/);
  9.     var pos = -1,
  10.       i,
  11.       len = classNames.length;
  13.     for (i = 0; i < len; i++ ) {
  14.       if (classNames[i] == toToggleClass) {
  15.         pos = i;
  16.         break;
  17.       }
  18.     }
  20.     if (pos == -1) {
  21.       classNames.push(toToggleClass)
  22.     } else {
  23.       classNames.splice(i, 1);
  24.     }
  26.     element.className = classNames.join(' ');
  27.   }
  28. }
  30. toggleClass(${1:DOMelement}, '${2:any-class}');
  31.   ]]></content>
  32.     <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  33.     <tabTrigger>toggleClasses</tabTrigger>
  34.     <!-- Optional: Set a scope to limit where the snippet will trigger -->
  35.     <scope>source.js, text.html</scope>
  36.   </snippet>

2. eventUtil 操作

  1. <snippet>
  2.   <content><![CDATA[
  3. var eventUtil = {
  4.   addEventHandler: function(element, type, handler) {
  5.     if (element.addEventListener) {
  6.       element.addEventListener(type, handler, false);
  7.     } else if (element.attachEvent) {
  8.       element.attachEvent('on' + type, handler);
  9.     } else {
  10.       element['on' + type] = handler;
  11.     }
  12.   },
  14.   getEvent: function(event) {
  15.     return event ? event : window.event;
  16.   },
  18.   // For mouseover, mouseout events
  19.   getRelatedTarget: function(event) {
  20.     if (event.relatedTarget) {
  21.       return event.relatedTarget;
  22.     } else if (event.toElement) {
  23.       return event.toElement;
  24.     } else if (event.fromElement) {
  25.       return event.fromElement;
  26.     } else {
  27.       return null;
  28.     }
  29.   },
  31.   // For mousedown, mouseup events
  32.   getButton: function(event) {
  33.     if (document.implementation.hasFeature('MouseEvents', '2.0')) {
  34.       return event.button;
  35.     } else {
  36.       switch (event.button) {
  37.         case 0:
  38.         case 1:
  39.         case 3:
  40.         case 5:
  41.         case 7:
  42.           return 0;
  43.         case 2:
  44.         case 6:
  45.           return 2;
  46.         case 4:
  47.           return 1;
  48.       }
  49.     }
  50.   },
  52.   // For mouseWheel event
  53.   getWheelDelta: function(event) {
  54.     if (event.wheelDelta) {
  55.       return event.wheelDelta;
  56.     } else {
  57.       return -event.detail * 40;
  58.     }
  59.   },
  61.   getTarget: function(event) {
  62.     return event.target || event.srcElement;
  63.   },
  65.   preventDefault: function(event) {
  66.     if (event.preventDefault) {
  67.       event.preventDefault;
  68.     } else {
  69.       event.returnValue = false;
  70.     }
  71.   },
  73.   stopPropagation: function(event) {
  74.     if (event.stopPropagation) {
  75.       event.stopPropagation;
  76.     } else {
  77.       event.cancelBubble = true;
  78.     }
  79.   },
  81.   removeEventHandler: function(element, type, handler) {
  82.     if (element.removeEventListener) {
  83.       element.removeEventListener(type, handler, false);
  84.     } else if (element.detachEvent) {
  85.       element.detachEvent('on' + type, handler);
  86.     } else {
  87.       element['on' + type] = null;
  88.     }
  89.   }
  90. };
  92. var ${4:process} = function(event) {
  93.   var event = eventUtil.getEvent(event),
  94.     target =  eventUtil.getTarget(event);
  96.   ${1:// ... process code goes here}
  97. }
  99. eventUtil.addEventHandler(${2:ele}, '${3:eventType}', $4);
  100. ]]></content>
  101.   <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  102.   <tabTrigger>eventUtil</tabTrigger>
  103.   <!-- Optional: Set a scope to limit where the snippet will trigger -->
  104.   <scope>source.js</scope>
  105. </snippet>

附：参考

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注