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

手记:常用 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)
  8. if (existence < 0) {
  9. element.className += toAddClass;
  10. }
  11. }
  12. }
  13. addClass(${1:DOMelement}, '${2:any-class}');
  14. ]]></content>
  15. <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  16. <tabTrigger>addClass</tabTrigger>
  17. <!-- Optional: Set a scope to limit where the snippet will trigger -->
  18. <scope>source.js, text.html</scope>
  19. </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+/);
  8. var pos = -1,
  9. i,
  10. len = classNames.length;
  11. for (i = 0; i < len; i++ ) {
  12. if (classNames[i] == toDelClass) {
  13. pos = i;
  14. break;
  15. }
  16. }
  17. classNames.splice(i, 1);
  18. element.className = classNames.join(' ');
  19. }
  20. }
  21. removeClass(${1:DOMelement}, '${2:any-class}');
  22. ]]></content>
  23. <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  24. <tabTrigger>removeClass</tabTrigger>
  25. <!-- Optional: Set a scope to limit where the snippet will trigger -->
  26. <scope>source.js, text.html</scope>
  27. </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+/);
  8. var pos = -1,
  9. i,
  10. len = classNames.length;
  11. for (i = 0; i < len; i++ ) {
  12. if (classNames[i] == toToggleClass) {
  13. pos = i;
  14. break;
  15. }
  16. }
  17. if (pos == -1) {
  18. classNames.push(toToggleClass)
  19. } else {
  20. classNames.splice(i, 1);
  21. }
  22. element.className = classNames.join(' ');
  23. }
  24. }
  25. toggleClass(${1:DOMelement}, '${2:any-class}');
  26. ]]></content>
  27. <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  28. <tabTrigger>toggleClasses</tabTrigger>
  29. <!-- Optional: Set a scope to limit where the snippet will trigger -->
  30. <scope>source.js, text.html</scope>
  31. </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. },
  13. getEvent: function(event) {
  14. return event ? event : window.event;
  15. },
  16. // For mouseover, mouseout events
  17. getRelatedTarget: function(event) {
  18. if (event.relatedTarget) {
  19. return event.relatedTarget;
  20. } else if (event.toElement) {
  21. return event.toElement;
  22. } else if (event.fromElement) {
  23. return event.fromElement;
  24. } else {
  25. return null;
  26. }
  27. },
  28. // For mousedown, mouseup events
  29. getButton: function(event) {
  30. if (document.implementation.hasFeature('MouseEvents', '2.0')) {
  31. return event.button;
  32. } else {
  33. switch (event.button) {
  34. case 0:
  35. case 1:
  36. case 3:
  37. case 5:
  38. case 7:
  39. return 0;
  40. case 2:
  41. case 6:
  42. return 2;
  43. case 4:
  44. return 1;
  45. }
  46. }
  47. },
  48. // For mouseWheel event
  49. getWheelDelta: function(event) {
  50. if (event.wheelDelta) {
  51. return event.wheelDelta;
  52. } else {
  53. return -event.detail * 40;
  54. }
  55. },
  56. getTarget: function(event) {
  57. return event.target || event.srcElement;
  58. },
  59. preventDefault: function(event) {
  60. if (event.preventDefault) {
  61. event.preventDefault;
  62. } else {
  63. event.returnValue = false;
  64. }
  65. },
  66. stopPropagation: function(event) {
  67. if (event.stopPropagation) {
  68. event.stopPropagation;
  69. } else {
  70. event.cancelBubble = true;
  71. }
  72. },
  73. removeEventHandler: function(element, type, handler) {
  74. if (element.removeEventListener) {
  75. element.removeEventListener(type, handler, false);
  76. } else if (element.detachEvent) {
  77. element.detachEvent('on' + type, handler);
  78. } else {
  79. element['on' + type] = null;
  80. }
  81. }
  82. };
  83. var ${4:process} = function(event) {
  84. var event = eventUtil.getEvent(event),
  85. target = eventUtil.getTarget(event);
  86. ${1:// ... process code goes here}
  87. }
  88. eventUtil.addEventHandler(${2:ele}, '${3:eventType}', $4);
  89. ]]></content>
  90. <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  91. <tabTrigger>eventUtil</tabTrigger>
  92. <!-- Optional: Set a scope to limit where the snippet will trigger -->
  93. <scope>source.js</scope>
  94. </snippet>

附:参考

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