jQuery의 송가 (그리고 1kb의 대체품!)

jQuery가 세상에 나왔을 때 정말 장관이었어요.
개발자에게 공통된 언어를 주었고,
하지만 시대가 바뀌었다. 올해는 2021년,
jQuery의 시대는 이미 지나갔다.
나는 너로 하여금 내가 싫어하거나 경멸한다고 생각하게 하고 싶지 않다
인터넷 역사의 중요한 부분 (적어도 내가 보기에는)
그런데 이걸로 새로운 사이트를 만들면...
나는 너에게 말하고 싶지 않지만, 이것은 아마도 개똥일 것이다.
jQuery는 팽창을 증가시켜 당신의 네트워크 생명을 파괴하고,
252kb의 JS로 제목을 조정할 필요는 없고,
바닐라 JS 및 querySelectorAll너의 소포 사이즈가 끊임없이 떨어지는 것을 봐라!
"그런데 저는 문법을 좋아해요."들었어요!
좋아, 내가 너에게 다른 방법을 알려줄게.
1.4kb 허브 JS만 있으면
나는 너에게 어떻게 성공할 수 있는지 알려줄 수 있다.
사용할 수 있는 코드는 다음과 같습니다.
현재 워크플로우를 유지할 수 있습니다.
하지만 이 바이트를 절약해서 성능을 높일 수 있고,
여전히 달러 기호를 전역 선택기로 사용합니다.
다음은 당신의 요구를 충족시킬 수 있는 답안입니다.
웹 사이트의 속도를 높이는 확장 가능한 마이크로 라이브러리에 대해
만약 네 사이트를 상위권에 올리고 싶다면, 네가 필요로 하는 속도는
그래서 당신은 더 많은 방문객을 얻었고, 당신의 기회를 증가시켰다...판매

그래, 나는 시인이 아니야!

나의 시는 매우 형편없지만, 나는 너에게 jQuery의 대체품을 보여줌으로써 많은 수요를 만족시킬 수 있다(간단한 사이트와 보조 프로젝트, 참고할 수 있다!)즉 1400바이트(600바이트 압축!)당연히 자바스크립트죠.
이것은 ki.js라는 라이브러리의 수정 버전으로 IE9+에서 작동합니다. (IE 지원이 필요하지 않으면 더욱 간단하게 할 수 있습니다.)

if (typeof $ == "undefined") {
  !function (b, c, d, e, f) {
    f = b['add' + e]
    function i(a, d, i) {
      for (d = (a && a.nodeType ? [a] : '' + a === a ? b.querySelectorAll(a) : c), i = d.length; i--; c.unshift.call(this, d[i]));
    }
    $ = function (a) {
      return /^f/.test(typeof a) ? /in/.test(b.readyState) ? setTimeout(function () {
        $(a);
      }, 9) : a() : new i(a);
    };
    $[d] = i[d] = {
      on: function (a, b) {
        return this.each(function (c) {
          f ? c['add' + e](a, b, false) : c.attachEvent('on' + a, b)
        })
      },
      off: function (a, b) {
        return this.each(function (c) {
         f ? c['remove' + e](a, b) : c.detachEvent('on' + a, b)
        })
      },
      each: function (a, b) {
        for (var c = this, d = 0, e = c.length; d < e; ++d) {
          a.call(b || c[d], c[d], d, c)
        }
        return c
      },
      splice: c.splice
    }
    }(document, [], 'prototype', 'EventListener');
  var props = ['add', 'remove', 'toggle', 'has'],
      maps = ['add', 'remove', 'toggle', 'contains'];
  props.forEach(function (prop, index) {
    $.prototype[prop + 'Class'] = function (a) {
      return this.each(function (b) {
        if (a) {
          b.classList[maps[index]](a);
        }
      });
    };
  });
}

나는 무슨 기능이 있습니까?

이것은 네가 가장 필요로 하는 물건이다.
당신은 다음과 같은 것을 얻을 수 있습니다.

$() 선택기

.on()

.off()

.each()

.splice()

.addClass()

.removeClass()

.toggleClass()

.hasClass()

그리고 너는 몇 가지 추가 유용한 함수로 그것을 확장할 수 있다. -

$.prototype.find = function (selector) {
  return $(selector, this);
};
$.prototype.parent = function () {
  return (this.length == 1) ? $(this[0].parentNode) : [];
};
$.prototype.first = function () {
  return $(this[0]);
};
$.prototype.focus = function () {
  return this[0].focus();
};
$.prototype.css = function (a, b) {
  if (typeof (a) === 'object') {
    for (var prop in a) {
      this.each(function (c) {
        c.style[prop] = a[prop];
      });
    }
    return this;
  } else {
    return b === []._ ? this[0].style[a] : this.each(function (c) {
      c.style[a] = b;
    });
  }
};
$.prototype.text = function (a) {
  return a === []._ ? this[0].textContent : this.each(function (b) 
  {
    b.textContent = a;
  });
};

$.prototype.attr = function (a, b) {
  return b === []._ ? this[0].getAttribute(a) : this.each(function (c) {
    c.setAttribute(a, b);
  });
};
$.param = function (obj, prefix) {
  var str = [];
  for (var p in obj) {
    var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
    str.push(typeof v == "object" ? $.param(v, k) : encodeURIComponent(k) + "=" + encodeURIComponent(v));
  }
  return str.join("&");
};
$.prototype.append = function (a) {
  return this.each(function (b) {
    b.appendChild(a[0]);
  });
};
$.ajax = function (a, b, c, d) {
  var xhr = new XMLHttpRequest();
  var type = (typeof (b) === 'object') ? 1 : 0;
  var gp = ['GET', 'POST'];
  xhr.open(gp[type], a, true);
  if (type == 1) {
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
  }
  xhr.responseType = (typeof (c) === 'string') ? c : '';
  var cb = (!type) ? b : c;
  xhr.onerror = function () {
    cb(this, true);
  };
  xhr.onreadystatechange = function () {
    if (this.readyState === 4) {
      if (this.status >= 200 && this.status < 400) {
        cb(this, false);
      } else {
        cb(this, true);
      }
    }
  };
  if (type) {
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.send($.param(b));
  } else {
    xhr.send();
  }
  xhr = null;
};

이것은 너에게 주었다. -

.find()

.parent()

.first()

.focus()

.css()

.text()

.attr()

.param()

.ajax()

이 모든 것은 2000 바이트 (900 바이트 gzip) 가 필요합니다!

뭐가 더 필요하세요?

이것은 사람들이 필요로 하는 90퍼센트의 jQuery 선택기입니다. 마음에 들면, jQuery 문법을 보존할 수 있습니다.
모두 1.3kb 압축!(또는 3.3kb 미가공).
주의해야 할 것은 드래그 앤 드롭 교체가 아니기 때문에 한 항목을 선택할 때 약간의 차이가 있을 수 있다(예를 들어 사용하지 않을 경우$('.item')[0]는 .first()를 사용하여 항목을 선택해야 할 수도 있다).
사실, 나는 대부분의 사람들이 그것을 사용하는 것을 추천하지 않는다. 내가 그것을 사용하는 것은 순전히 너에게 자신의 마이크로 도서관을 어떻게 만드는지 알려주기 위해서이다(그리고 너에게 마이크로 도서관의 개념을 소개한다!)!

분노의 댓글이 시작되기 전에!

듣자, 내가 'jQuery를 사용하지 마라' 라고 말한 것은 아니다. 비록 이것은 농담이지만.
내가 진정으로 말하고 싶은 것은 jQuery를 새로운 프로젝트에 포함시키기 전에 먼저 대체 방안을 모색하는 것이다.
오늘날 인터넷의 핵심 요소와 사이트 표현은 성공의 중요한 구성 부분이다.
고성능 사이트를 보유하는 가장 간단한 방법은 무거운 JS와 사용하지 않은 코드를 버리는 것이다.
오래된 브라우저/edge case 브라우저를 지원해야 한다면, jQuery는 여전히 유용하기 때문에 필요하면 사용할 수 있습니다.
코드 분해와 트리 떨림 등을 사용하면 jQuery 성능을 변하지 않을 수 있다는 것을 기억하세요!
동일한 권장 사항은 정적 사이트에 대해서도 React를 사용할 수 있습니다.
React는 SAAS 제품에 분명히 유용합니다...그러나 그것으로 홍보책 사이트를 만들지 마라.내비게이션 표시줄, 영웅 이미지, 제목을 보여주려면 JS가 너무 많다.
이 일을 위해 적당한 도구를 선택하면 개발자로서의 생활이 더욱 쉬워질 뿐만 아니라 더 빠른 사이트를 만들 수 있고 3G 연결에서도 사람들이 좋아할 것이다!
나는 네가 이 어리석은 문장을 좋아하길 바란다.우리가 평론을 읽을 때, 우리는 얼마나 많은 사람들이 진정으로 그것을 읽었는지 볼 수 있을 것이다.😉🤣
한편, 이 문장의 영감은

아직도 jQuery를 사용하고 있습니까?

벤 하르본・ 11월 17~21일・ 1분 읽기

#jquery #javascript #webdev #discuss

너는 그곳의 평론을 보러 가야 한다. 왜냐하면 오늘 jQuery의 사용에 대해 재미있는 점이 있기 때문이다.