Избиение jQuery addiction: Какие методы jQuery легко перевести на чистый javascript?

Ответ 1

Вот несколько примеров, которые я использую вместо методов jQuery (если я не использую jQuery):

• $(node).css(values):

  function css(node, style) {
    if(node && node.style) {
      for(var key in style) {
          node.style[key] = style[key];
      }
    }
  }
  

• $(node).show(): jQuery здесь сложнее, так как он также может устанавливать отображаемое значение, например. inline.

  function show(node) {
    if(node && node.style) {
      node.style.display = "";
    }
  }
  

• $(node).hide(): Кроме того, метод jQuery сохраняет предыдущее отображаемое значение.

  function hide(node) {
    if(node && node.style) {
      node.style.display = "none";
    }
  }
  

• $(node).addClass(class)

  function addClass(node, cls) {
    if(node) {
      if(!node.className) {
          node.className = cls;
      }
      else if(node.className.indexOf(cls) == -1) {
          node.className = node.className + " " + cls;
      }
    }
  }
  

• $(node).removeClass(class)

  function removeClass(node, cls) {
    if(node && node.className && node.className.indexOf(cls) >= 0) {
      var pattern = new RegExp('\\s*' + cls + '\\s*');
      node.className = node.className.replace(pattern, ' ');
    }
  }
  

Эти методы должны быть совместимы с несколькими браузерами. Методы jQuery часто предоставляют больше параметров, например, удаление нескольких классов или более сложные.
Это зависит от ваших потребностей, нужна ли вам "расширенная" функциональность или нет. Простых методов может быть достаточно. Например, если я знаю, что мне всегда придется скрывать элементы div, этот метод hide и show довольно хорошо.

Обновление:

В зависимости от того, какой браузер вы разрабатываете (например, расширение Firefox), вы даже можете получить что-то закрыть до Механизм селектора jQuery: document.querySelectorAll(selector)

Ответ 2

Один из самых больших злоупотреблений jQuery должен быть создан для создания объекта jQuery исключительно с целью получения свойства элемента с помощью .attr().

Возможно, наиболее распространенным является получение свойства ID с помощью:

$(this).attr("id");

вместо

this.id;

Существует множество свойств, доступ к которым возможен в кросс-браузере без использования jQuery.

Или, если мне нужен доступ к родительскому элементу в обработчике, а не:

$(this).parent()...

Скорее всего, я должен закрыть родителя:

$(this.parentNode)...

Если вы можете планировать свой HTML так, чтобы у вас не было пробелов между вашими элементами, вы можете легко использовать другие методы обхода DOM в кросс-браузере, например:

this.nextSibling
this.previousSibling
this.firstChild
this.lastChild

Ответ 3

Самый простой способ узнать - просто прочитать исходный код для метода, который вам интересен. Это очень читаемо.

Ответ 4

(Мне понравилась "избивающая зависимость jQuery" )

Однажды я задал вопрос и ответил сам себе, касаясь width() и height() и анимации без jQuery. Как вы можете видеть, это не так просто, но выполнимо в любом случае.

Ответ 5

Для меня утилита $.each обычно может быть заменена оператором for..in:

$.each (object, function () {
    // do something with this
}

vs

var current;
for (key in object) {
    current = object[key];
    // do something with current
}

Единственная дополнительная функция $.each заключается в том, что она создает новую область, позволяющую иметь более локализованные переменные:

var someVar = 'original string';
$.each (object, function () {
    // do something with this
    var someVar = 'new string';
}
console.log(someVar); // 'original string'

Вы можете, однако, реплицировать это с помощью for..in с помощью самоисполняющихся функций:

var someVar = 'original string';
for (key in object) {
    (function() {
        var current = object[key],
            someVar = 'new string';
    })();
}
console.log(someVar); // 'original string'

Ответ 6

.toggle() можно легко воссоздать, особенно с одним состоянием (3+ состояния занимают немного больше работы:

$(function() {    
    $(selector).each(function() {
        var counter = 1;
        $(this).click(function() {
            counter++ % 2 ? 
                (function() { $("div").html("one"); }());  // <== First function
                (function() { $("div").html("two"); }());  // <== Second function
        });
    });
});

Попробуйте это с помощью jsFiddle

Вышеприведенное эквивалентно

$(selector).toggle(function() { ... }, function () { ... });

Ответ 7

Вот небольшая Miniframework для вас: JavaScript Miniframework

;)

Ответ 8

Я не знаю никаких jQuery-методов, которые могут быть легко заменены (и я не думаю, что они есть), если "easy" должен означать, что jQuery-метод - это то же самое, что и собственный метод с другое имя.

Например, см. hide() - документацию.
Он не просто устанавливает отображение на "none", он также сохраняет текущий атрибут display (полезно, если вы хотите его снова показать). Где можно хранить дисплей без jQuery? Как глобальная переменная?... лучше не.