Voyeur.js — маленькая и привлекательная библиотека для работы с DOM

    Доброго времени суток уважаемые хабражители. Сегодня увидел один интересный проект на GitHub. Эта маленькая библиотека (Voyeur.min.js — 1.2kb) очень привлекает своим синтаксисом и неплохим функционалом.

    image

    Даже не переводя документацию с официального сайта, код можно понять интуитивно. По традиции приведу несколько примеров:


    Поиск элементов


    Voyeur.div.h1; // body>div>h1. Возвращает элемент h1
    Voyeur.div.h1.innerHTML = "Habrahabr"; // 
    Voyeur.div.ul.li; // Возвращает массив элементов списка
    
    Voyeur.find("#example"); // Возвращает единственную ноду
    Voyeur.find(".example"); // Возвращает массив нод 
    Voyeur.find("#example").h1.em; // 
    


    Callback функция


    Voyeur.tag...use( callback(element) ) Root HTMLElement

    Voyeur.div.ul.li.use(); // Возвращает элемент div
    Voyeur.div.ul.li.use(function(li, i) {
            // Цикл по элементам списка
            li.innerHTML = "List item #" + i;
    });
    
    Voyeur.div.ul.use(function(ul) {
            ul.style.background = "blue";
            // Также возможно использовать li
            ul.li; //..
    });
    


    Создание элементов


    Voyeur.create.tag...mult( factor ) Array

    Voyeur.create.div; // Возвращает элемент div
    Voyeur.create.div.h1; // Возвращает элемент h1 с родителем div
    Voyeur.create.div.h1.em; //
    
    Voyeur.create.ul.li.mult(10).use(function(li, i) { // Создаем 10 элементов li 
         li.innerHTML = "Created list items!"; // 
    });
    
    //Voyeur.tag...eq( begin , end ) HTMLElement|Array
    Voyeur.create.ul.li.mult(10).eq(7).innerHTML = "The 8th item.";
    
    Voyeur.ul.li.eq(2, 6).use(function(li, i) {
         li.create.em.innerText = "Хабр!";
    });
    


    Большое спасибо за внимание!

    Only registered users can participate in poll. Log in, please.

    Планируете ли вы использовать Voyeur.js в дальнейшем?

    Support the author
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 22

      +1
      А в чем преимущество? Fluid interface по именам тегов?
        0
        Преимущество перед чем?
          0
          Тем же jquery
            0
            вес? и я бы сравнивал на с jquery, а c sizzle
              0
              Начнем с того, что Voyeur.js в ~ 100 раз меньше jQuery. Он не «издевается» над нативным JS синтаксисом. Для меня эта библиотека удобнее, по сравнению с тем же Sizzle (если говорить об объеме). Недавно появилась интересная статья «9 Signs You Shouldn’t Hire THAT Web Guy – 2013 Edition от David Walsh» там даже есть два абзаца «They're a „lump.js“ Developer» и «They Include Unnecessary Libraries».
                +3
                Неужели 100 кб на что то влияют? Может джейквери и «издевается» над синтаксисом, но использовать его очень удобно, а удобство это главное.
                  +5
                  Это чем jQuery издевается? Обычный js код. Прототипы вроде не расширяет даже.
                    0
                    Скорее Voyeur издевается. Налицо пляски с defineProperty.
              +6
              Из документации:
              Which browsers does Voyeur support?
              Voyeur is tested in and supports all the latest, major browsers (IE10, Chrome, Firefox, Safari, Opera).

              как-то не густо…
                +5
                Если уж размер имеет значение то почему не Zepto? Production версия «9.7k when gzipped». Плюс последние версии jQuery разрешают создание собсвенной сборки с только требуемым функционалом.

                Конечно прескорбно видеть как jQuery суют куда попало и используют только для получения элемента по id.

                Но, имхо, это такая же крайность как превращать свой код в зоопарк и кидаться и стороны в сторону «лишь бы не jQuery».
                  +10
                  Довольно-таки безобразно.

                  Voyeur.div.h1; // body>div>h1. Возвращает элемент h1
                  Voyeur.div.ul.li; // Возвращает массив элементов списка
                  

                  Изменил разметку — и вместо элемента в коде массив, отлично-отлично. А если в списке не оказалось пунктов, то вообще ничего не вернется, по всей видимости. Зачем так жить.

                  Voyeur.create.div; // Создание элементов
                  

                  Нестандартные элементы (<create></create>) пролетают. Вообще сайд-эффекты в геттере это странно, такой код сложно поддерживать.

                  Моя нелюбовь к jQuery только что пошатнулась, теперь я знаю, что есть способ хуже.
                    0
                    Еще — Voyeur.div.ul.li.use(); // Возвращает элемент div
                    0
                    Код-то интуитивно понятен, но кмк в реальной практике будет неудобен.
                    — Как получить элементы нескольких типов?
                    — Что если название тэга в переменной?
                    — Voyeur.find значительно длиннее и глазомозольнее, чем $
                    ну и т.д.
                      0
                      Не смог пройти мимо третьего пункта, простите.
                      ;(function(V) {
                          V.find(...)
                      }(Voyeur));
                        0
                        Если название тэга в переменной, проблем возникнуть не должно: Voyeur.div[tagVariable]
                        +2
                        > supports all the latest, major browser
                        Так при таком подходе можно и querySelector приспособить — вообще обойтись без сторонней библиотеки
                          0
                          Как это без сторонней? А как же Vanilla JS?
                          0
                          Угу, красиво, только вот чтобы использовать сгенерированный же в коде селектор нужно будет делать eval… либо извращаться с генерацией селектора, что не всегда хорошо ложится на такое
                            +4
                            А что за название такое странное, переводится как «человек с половым извращением».
                            oxforddictionaries.com/definition/english/voyeur
                              0
                              Поясните пожалуйста:
                              Voyeur.create.div; // Возвращает элемент div
                              Voyeur.create.div.h1; // Возвращает элемент h1 с родителем div
                              Voyeur.create.div.h1.em; //

                              Это же свойства, каким образом они вызывают функции? Геттеры/сеттеры?
                                +2
                                Да. И весь этот ужас такой медленный…

                                Voyeur.extendTags = function(obj, fn) {
                                Voyeur.nodes.forEach(function(tag) {
                                Object.defineProperty(obj, tag, {
                                get: function() {
                                return fn.call(obj, tag);
                                },

                                configurable: true
                                });
                                });

                                return obj;
                                };

                                П.С. Извините, тэги не работают.
                                  0
                                  Ясно. Спасибо. Отсюда и такой низкий охват совместимости…

                              Only users with full accounts can post comments. Log in, please.