• Страница 1 из 1
  • 1
EASY - JavaScript-выборка по CSS1-3 склекторам
DSC
Дата: Вторник, 10.08.2010, 00:43 | Сообщение # 1
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
Представляю вашему вниманию выборку, которая легко ищет по CSS1-3 селекторам, тестируя её в SlickSpeed я обнаружил в ней приличное количество багов, но в результате половина была исправлена, а половина так и осталась, вообще по сути выборка всё ищет и находит нормально, но почемуто этот "заумный" SlickSpeed определил в ней баги...

Исходя из названия, можно понять что выборка мала, и это действительно так, из всех известных мне выборок, моя выборка меньше минимум в 2 раза! Наверное это её самая первая особенность! :D

Выборкой я уже не занимался 2 месяца, и сегодня шарясь по компьютеру набрёл на неё, именно это и спровоцировало меня о ней заявить тут!)

В общем описывать её можно долго, рассуждения это конечно хорошо, но главное, выборкой я решил опять заняться, темболее за 2 месяца я получше стал работать и понимать DOM!

Объясню как она работает:

Code
<script type='text/javascript'>
easy(selectors)[number]

               //  Пример:
easy('html:root body > div + span#exemple ~ [class$="xemple"]:checked')[0].style.color='red'
</script>
Для удобства можно сделать вот так:
Code
<script type='text/javascript'>
var $=easy;  //  заместо easy потребуется писать $
</script>
Список возможностей:
Code
*
E
E[foo]
E[foo='bar']
E[foo~='bar']
E[foo^='bar']
E[foo$='bar']
E[foo*='bar']
E[foo|='bar']
E[foo!='bar']
E:root
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-child
E:last-child
E:first-of-type
E:last -of-type
E:only-child
E:only-of-type
E:empty
E:link
E:target
E:lang(fr)
E:enabled
E:disabled
E:checked
E.class
E#id
E:not(select ors)
E:has(selectors)
E F
E > F
E + F
E ~ F
E < F    //    почти тоже самое что и E:has(selectors), только E - это то что вложено в F
E, F
Ну, я вкраце рассказал, вот собственно ссылка: вот она!
Ссылка на DEMO!

p.s.: выборка в стадии разработок, поэтому просьба не писать негативных комментариев!


aka Latro

Сообщение отредактировал DSC - Четверг, 12.08.2010, 00:15
  
Infamous
Дата: Вторник, 10.08.2010, 08:07 | Сообщение # 2
говорун
Группа: Проверенные
Пользователь №: 316
Сообщений: 158
Получено оценок: 21
Тест по скорости выборки:

Code
'div:has(a):not(.class, .class2)' // jQuery — 8, easy — 788
'a.myClass' // jQuery — 0, easy — 2
'#foo' // jQuery — 0, easy — 8
'div:has(a.myClass + p)' // jQuery — 8, easy — 17827


Сообщение отредактировал Infamous - Вторник, 10.08.2010, 08:11
  
DSC
Дата: Вторник, 10.08.2010, 10:39 | Сообщение # 3
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
Infamous, это одна из незаконченых вариантов выборки, так что я не знаю, может есть вариант побыстрее, а насчёт последнего, это да, иерархия у меня медленная, и ещё, в jQ стоит querySelectorAll, я его не буду ставить до тех пор пока не сделаю нормальный вариант!

aka Latro
  
Aleko
Дата: Вторник, 10.08.2010, 20:09 | Сообщение # 4
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
DSC, респект тебе просто за попытку. Сейчас попробую свою реализацию написать.

Бесплатные обои.
  
DSC
Дата: Вторник, 10.08.2010, 23:16 | Сообщение # 5
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
Aleko, просто дело в том, что я уже понимаю как это всё делается, вот собираюсь заняться сейчас переписью заново, чтобы сделать стоющий вариант!) Да, и спс!)

aka Latro
  
Aleko
Дата: Среда, 11.08.2010, 16:03 | Сообщение # 6
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
DSC, ничерта не понял и только расстроился :( . Хотелось реализовать нормальную работу по цепочке и поиск в HTMLCollection. Начал всё это дело расписывать и начисто пропало желание продолжать :( . Совсем не хочется сейчас изобретать способ парсить селекторы. Идея конечно была, но реализовывать влом. В общем ещё раз респект тебе.

Бесплатные обои.
  
DSC
Дата: Среда, 11.08.2010, 18:19 | Сообщение # 7
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
Aleko, ну спс конечн)) Я вообще решил делать выборку когда увидел твой sAD.get() ^_^ Вообще трудностей в ней мало, хотя были проблемы с реакцией на положение фильтров, впринцепи если всё продумать, то получится очень даже неплохо) Вот щас решил переписывать, уже по результатам скорости получше сделал, хотя и сделал только тег, класс, ид, и аттрибуты)

aka Latro
  
UnderShot
Дата: Среда, 11.08.2010, 20:47 | Сообщение # 8
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
DSC, добавь демо, чтобы посмотреть.

Очень важная тема!
Filmzona — онлайн фильмы.
  
DSC
Дата: Четверг, 12.08.2010, 00:14 | Сообщение # 9
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
UnderShot, сделал, смотри в конце главного поста!

aka Latro
  
Raiderr
Дата: Четверг, 12.08.2010, 01:05 | Сообщение # 10
болтун
Группа: Проверенные
Пользователь №: 673
Сообщений: 349
Получено оценок: 26
DSC, что такое выборка? Зачем этот скрипт? Что он делает?

Новый кавер Jar of Hearts: http://www.youtube.com/watch?v=OLkXQMHVRhI

Сообщение отредактировал Raiderr - Четверг, 12.08.2010, 01:14
  
Infamous
Дата: Четверг, 12.08.2010, 08:37 | Сообщение # 11
говорун
Группа: Проверенные
Пользователь №: 316
Сообщений: 158
Получено оценок: 21
Raiderr, оооочень медленно выбирает элементы по CSS-селекторам.
  
Aleko
Дата: Четверг, 12.08.2010, 10:02 | Сообщение # 12
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
в демке глюки: если обновлять через ctrl+f5 берется один input а если без очистки кэша то другой.

Бесплатные обои.
  
DSC
Дата: Четверг, 12.08.2010, 10:27 | Сообщение # 13
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
Infamous, я же попросил без гонева! И вообще, я могу как и другие выборки поставить querySelectorAll, и она тоже будет супер быстрой!
Aleko, незнаю, щас попробывал то что ты написал сделать, всё вроде норм... Покаж скрин


aka Latro
  
Aleko
Дата: Четверг, 12.08.2010, 10:56 | Сообщение # 14
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
Прикрепления: 3820782.gif (13.9 Kb)


Бесплатные обои.
  
Infamous
Дата: Четверг, 12.08.2010, 11:01 | Сообщение # 15
говорун
Группа: Проверенные
Пользователь №: 316
Сообщений: 158
Получено оценок: 21
Quote (DSC)
оставить querySelectorAll, и она тоже будет супер быстрой!

Выборка сама по себе, без querySelectorAll, должна работать быстро.

  
DSC
Дата: Четверг, 12.08.2010, 11:44 | Сообщение # 16
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
Infamous, для этого я и написал:
Quote (DSC)
p.s.: выборка в стадии разработок, поэтому просьба не писать негативных комментариев!

Aleko, я объясню в чём дело: выборкой я присваиваю checked первому input'у, а как известно FireFox при обновлении страницы сохраняет значения checked, disabled и т.п., именно поэтому и выделяется первый, т.к. теперь уже он первый со значением checked==true! Очищая кэш, ты удаляешь сохранённые данные, и браузер реагирует опять как в начале!


aka Latro
  
DSC
Дата: Четверг, 07.10.2010, 22:22 | Сообщение # 17
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
Обновил выборку, теперь она стала побыстрее и поменьше весом(на 810байт), сейчас сжатая версия весит 4,56Кб!

Список возможностей:

Code
// стандартный набор селекторов:
*
E[foo]
E[foo=bar]
E[foo~=bar]
E[foo^=bar]
E[foo$=bar]
E[foo*=bar]
E[foo|=bar]
E:root
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-child
E:last-child
E:first-of-type
E:last -of-type
E:only-child
E:only-of-type
E:empty
E:link
E:target
E:lang(fr)
E:enabled
E:disabled
E:checked
E:not(selectors)
E.class
E #id
E F
E > F
E + F
E ~ F
E, F

// дополнительный набор селекторов(нужный по мнению автора):
E[foo!=bar]
E:button
E:contains(text)
E:has(selectors)
E:input
E:parent
E:selected
E:unchecked
E < F

При использовании выборки, её название можно писать как easy, так и $E!

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

Code
<script type='text/javascript'>
easy['my-pseudo-class']=function(){ [ваш код] }

// пример:
$E.myid=function(o,n){return o.id==n} // если вы собираетесь чтобы у псевдо-класса не было переменной информации(информации в скобках, да и самих скобок), то второй атрибут укажет на название псевдо-класса

$E.ids=function(o,v){return o.id==v} // данный вариант означает, что в скобках псевдо-класса будет указываться нужный айди

$E.id=function(o,v,n){return o[n]==v} // тоже что и предыдущий вариант, только третий атрибут указывает на название псевдо-класса!
</script>

Выборка не использует querySelectorAll, это сделано чтобы пользователь мог видеть реальную скорость выборки, да и вообще, это ещё не последняя версия, думаю поставить эту функцию в других, более быстрых версиях!


aka Latro

Сообщение отредактировал DSC - Четверг, 07.10.2010, 23:17
  
Infamous
Дата: Пятница, 08.10.2010, 15:20 | Сообщение # 18
говорун
Группа: Проверенные
Пользователь №: 316
Сообщений: 158
Получено оценок: 21
Code
<div class="foo x">
</div>
<script type="text/javascript" src="http://latro.net.ru/EASY/easy.min.js">
</script>
<script type="text/javascript">  
  alert( easy(".x").length ); // 0
</script>

DSC, пофикси. ;) Неправильно работает поиск по классу.

  
DSC
Дата: Пятница, 08.10.2010, 18:08 | Сообщение # 19
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
Infamous, там дело в другом, я просто делал так, что полностью класс должен быть равен указанному, а раз уж оно сделано так, то тогда надо исправить!

p.s.: исправил!


aka Latro

Сообщение отредактировал DSC - Пятница, 08.10.2010, 18:33
  
Infamous
Дата: Суббота, 09.10.2010, 20:41 | Сообщение # 20
говорун
Группа: Проверенные
Пользователь №: 316
Сообщений: 158
Получено оценок: 21
Замечен ещё один баг: не работает селектор вида E[foo=bar][attr=value] (т.е. выбор по значениям двух атрибутов).
  
UnderShot
Дата: Воскресенье, 10.10.2010, 10:58 | Сообщение # 21
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
Code
$E.lololol=function(a,b){
  return a.innerHTML.indexOf(b)!=-1
}

$E("div:lololol(лоол)")[0].style.color="blue"
Хех, круто)


Очень важная тема!
Filmzona — онлайн фильмы.
  
DSC
Дата: Воскресенье, 10.10.2010, 12:39 | Сообщение # 22
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
UnderShot, да, только осталось поисправлять баги в регэкспе, и выборка будет абсолютно правильно всё определять ^_^

aka Latro
  
UnderShot
Дата: Воскресенье, 10.10.2010, 13:15 | Сообщение # 23
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
Вот еще небольшое дополнение:
Code
Array.prototype.css=function(a){
  if(this.length>1){
   for(var i=0,d=this;i<d.length;i++){
    for(var o in a){
     d[i].style[o]=a[o]
    }
   }
  }
  else{
   for(var o in a){
    this[0].style[o]=a[o]
   }
  }
}

$E.contains=function(a,b){
  return a.innerHTML.indexOf(b)!=-1
}

Code
$E("span:contains(asd)").css({color:"red",background:"black"})
:)


Очень важная тема!
Filmzona — онлайн фильмы.
  
DSC
Дата: Воскресенье, 10.10.2010, 14:31 | Сообщение # 24
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
UnderShot, контэйнс уже есть, так что нет смысла его делать заново!
Кстати, вот функция для выбора всех элементов:
Code
<script type='text/javascript'>
(function(a){a.each=a.forEach||function(f){for(var i=0,t;t=this[i++];)f(t,i,this)}})(Array.prototype);

// Как использовать:
// easy(селекторы).each(function(объект,номер объекста,массив){ [ваш код] })
</script>


aka Latro

Сообщение отредактировал DSC - Воскресенье, 10.10.2010, 19:25
  
Infamous
Дата: Воскресенье, 10.10.2010, 18:07 | Сообщение # 25
говорун
Группа: Проверенные
Пользователь №: 316
Сообщений: 158
Получено оценок: 21
Как ни странно, она пройдётся не только по элементам массива, но и по свойствам и методам Array.prototype.
  
DSC
Дата: Воскресенье, 10.10.2010, 19:26 | Сообщение # 26
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
Infamous, ничего странного нету, просто я тупанул... Исправил! ^_^

aka Latro
  
Aleko
Дата: Суббота, 16.10.2010, 02:17 | Сообщение # 27
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
DSC, подужал: 3598 байт.

Code
<script>(function(__){return 'J easy=$E=(B(E,A,S,Y){J N=\'parentNode\',I=\'nodeIndex\',_={R:{1K:/(.*?)(\\[(\\w+)(([~^$*|!])?=(.*?))?\\]|:([\\w-]+)(\\((.*?)\\))?|#([\\w-]+))?$/,V:/(.*?)([ >+~<])([\\w-.#*:]+)?$/},C:{\' \':B(b,a,n){J x=a;L(;x=x[N];)O(b==x)F a},\'>\':B(b,a,n){O(b==a[N])F a},\'+\':B(b,a,n){O(b[N]==a[N]&&(b[S].16==1?b[S]==a:b[S][S]==a))F a},\'~\':B(b,a,n){O(b[N]==a[N])L(;b=b[S];)O(b==a)F a},\'<\':B(b,a,n){O(b[N]==a)F a}},G:B(o,a){F a==\'1F\'?o.className:a==\'L\'?o.htmlFor:o[A](a)||o[a]},A:{1D:B(e,a,v,x,y){F _.G(e, a).12(1J 13(x+v+y))},\'\':B(e,a,v){F _.G(e,a)==v},\'~\':B(e,a,v){F _.A.1D(e,a,v,\'(^| )\',\'( |$)\')},\'^\':B(e,a,v){F _.A.1D(e,a,v,\'^\',\'\')},\'$\':B(e,a,v){F _.A.1D(e,a,v,\'\',\'$\')},\'*\':B(e,a,v){F _.G(e, a).indexOf(v)>=0},\'|\':B(e,a,v){F _.G(e,a).1E(\'-\')[0]==v},\'!\':B(e,a,v){F _.G(e,a)&&1L(e,a)!==v}},P:{root:B(o){F o==15.documentElement},\'1C-X\':B(o,v,n){F _.N(o,v,0,0)},\'1C-11-X\':B(o,v,n){F _.N(o,v,0,1)},\'1C-1H-10\':B(o,v,n){F _.N(o,v,1,0)},\'1C-11-1H-10\':B(o,v,n){F _.N(o,v,1,1)},\'1I-X\':B(o){F _.N(o,1,0,0)},\'11-X\':B(o){F _.N(o,1,0,1)},\'1I-1H-10\':B(o){F _.N(o,1,1,0)},\'11-1H-10\':B(o){F _.N(o,1,1,1)},\'1M-X\':B(o){F _.N(o,1,0,0)==_.N(o,1,0,1)},\'1M-1H-10\':B(o){F _.N(o,1,1,0)==_.N(o,1,1,1)},empty:B(o){F !o.W},link:B(o){F o[Y]==\'A\'},target:B(o){F o.id==location.hash.slice(1)},lang:B(o,v,n){F _.T(o[A](n),v)},enabled:B(o){F !o.18},18:B(o,n){F o[n]},19:B(o,n){F o[n]},not:B(o,v){J d=$E(v);L(J i=0,t;t=d[i++];)O(o!=t)F o},1B:B(o,n){F(o.10||o[Y].M())==n},contains:B(o,v){F _.T(o.innerText||o.textContent,v)},has:B(o,v){J d=$E(v);L(J i=0,t;t=d[i++];)O(o==t[N])F o},1G:B(o){F _.T(o[Y],/1B|1G|select|textarea/i)},parent:B(o){F !!o.W},selected:B(o){F o[n]},unchecked:B(o){F !o.19}},T:B(o,v){F 1J 13(v).1L(o)},N:B(o,v,n,l){J v=v==\'even\'?\'1O\':v==\'odd\'?\'1O+1\':v.toString(),r=v.12(/([+-]?\\d+)?n([+-]\\d+)?|\\d+/),a=_.T(v,/^\\+n|^n/)?1:_.T(v,/^-n/)?-1:17(r[1],1N)||0,b=17(r[2],1N)||0,p=o[N][l==0?\'W\':l==1&&\'lastChild\'],c=0;L(;p=l==0?p[S]:l==1&&p.previousSibling;)O(n==0?p.16==1:n==1&&p[Y]==o[Y])p[I]=++c;J p=o[I];delete o[I];O((a==0?p==b:a>0?p>=b&&(p-b)%a==0:p<=b&&(b-p)%a==0)||(!a&&!b&&p==v))F o},H:B(o,m,s){F o.M().K(/\\(.*?\\)|\\[.*?\\]/g,B(a){m.Z(a);F\'_\'+(m.1A-1)+\'_\'}).K(1J 13(\'(?: +)?(\'+s+\')(?: +)?\',\'g\'),\'$1\')},D:B(o,m){F o.K(/_(\\d+)_/g,B(a,b){F m[b]})},Q:B(o,p){J p=p||15,m=[],n=[],o=_.H(o.K(/\\.([\\w-]+)/g,\'[1F~=$1]\'),n,\'[ >+~<]\'),U=_.D(o,n).K(/\\[(.+)["\'](.+)["\']\\]$/g,\'[$1$2]\').12(_.R.1K),C=o.12(_.R.V);O(_.T(o,_.R.V)){J b=$E(_.D(C[1],n)),a=$E(_.D(C[3],n));L(J i=0,t;t=b[i++];)L(J j=0,d;d=a[j++];)_.C[C[2]](t,d)&&m.Z(d)}14{O(U[2]){J g=$E(U[1]||\'*\'),c=U[2].charAt(0),i=p.getElementById(U[1N]),w=_.T(U[7],\'(^|-)11(-|$)\');O(c==\'#\')U[1]?i[Y].M()==U[1]&&m.Z(i):m.Z(i);14 L(J i=w?g.1A-1:0,t;t=g[w?i--:i++];)(c==\'[\'?U[4]?_.A[U[5]||\'\'](t,U[3],U[6]):_.G(t,U[3]):c==\':\'&&(_.P[U[7]]||$E[U[7]])(t,U[8]?U[9]:U[7],U[8]?U[7]:U[9]))&&m.Z(t)}14 J m=U[1]==\'*\'?p.all||p[E](\'*\'):p[E](U[1])}F m}};F B(o,p){O(o){J m=[],n=[],o=_.H(o,n,\',\');O(_.T(o,\',\')){J s=o.K(/(?: +)?,(?: +)?/g,\',\').1E(\',\');L(J i=0,t;t=s[i++];){J e=$E(_.D(t,n),p);L(J j=0,d;d=e[j++];)m.Z(d)}}14 J m=_.Q(_.D(o,n),p)}F m}})(\'getElementsByTagName\',\'getAttribute\',\'nextSibling\',\'tagName\');'.replace(/\w+/g,function(_){return __[-/[a-z]/.test(_)|parseInt(_,36)]||_})})('|||||||||||function||||return||||var|replace|for|toLowerCase||if|||||||combinator|firstChild|child||push|type|last|match|RegExp|els e|document|nodeType|parseInt|disabled|checked|length|button|nth|get|split|class|input|of|first|new|unit|test|only|10|2n'.split('|'))</script>


Бесплатные обои.
  
DSC
Дата: Суббота, 16.10.2010, 07:26 | Сообщение # 28
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
Aleko, нелохо, по сокращались в основном function, их больше всего было)
Кстати написал вариант иерархии побыстрее!) насчёт меньше не знаю, может немного больше кода...
p.s.: у тебя подсветка корявит код, сделай его с переносами и посмотри список сплитов els e


aka Latro

Сообщение отредактировал DSC - Суббота, 16.10.2010, 17:14
  
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.