18.08.2012, 12:18
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,501
|
|
|
Объединение нескольких clientRect
Собсно надо объединить clientRect'ы нескольких элементов.
Сейчас делаю так:
arr //массив элементов
i //arr.length
var result = {'top':[],'bottom':[],'left':[],'right':[]}, position;
while(i--) {
position = arr[i].getBoundingClientRect();
for(var j in result) result[j].push( position[j] );
}
position = {
'top' : Math.min.apply(0,result.top),
'left' : Math.min.apply(0,result.left),
'bottom': Math.max.apply(0,result.bottom),
'right' : Math.max.apply(0,result.right)
}
Но как-то оно неэстетично смотрится. И чувство возникает, что можно сделать как-то красивее, без лишних телодвижений.(делаю для себя поэтому могу потратить часок другой на эстетические изыски  )
Нужен только ff, так что можно использовать всё вплоть до js1.8.)
__________________
29375, 35
Последний раз редактировалось Aetae, 18.08.2012 в 12:20.
|
|
18.08.2012, 14:07
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,501
|
|
Сообщение от Дзен-трансгуманист
|
|
А зачем эстетика? Мсье - гурман?
|
Жуткий. Могу пару строк неделю вылизывать если никто не торопит.) (хотя если торопят то говнокожу\дю без зазрения совести )
А ваша версия кода ещё более некрасива, имхо. Да и производительность(на глаз) должна быть меньше(или нет).
__________________
29375, 35
Последний раз редактировалось Aetae, 18.08.2012 в 14:09.
|
|
18.08.2012, 14:14
|
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
|
Сообщение от Aetae
|
Собсно надо объединить clientRect'ы нескольких элементов.
Сейчас делаю так:
arr //массив элементов
i //arr.length
var result = {'top':[],'bottom':[],'left':[],'right':[]}, position;
while(i--) {
position = arr[i].getBoundingClientRect();
for(var j in result) result[j].push( position[j] );
}
position = {
'top' : Math.min.apply(0,result.top),
'left' : Math.min.apply(0,result.left),
'bottom': Math.max.apply(0,result.bottom),
'right' : Math.max.apply(0,result.right)
}
Но как-то оно неэстетично смотрится. И чувство возникает, что можно сделать как-то красивее, без лишних телодвижений.(делаю для себя поэтому могу потратить часок другой на эстетические изыски )
Нужен только ff, так что можно использовать всё вплоть до js1.8.)
|
как же я жалею. о том, что не проникся к генераторам 
наверное, как-то уродливо но нерасширяемо, это уж точно - условие просто ппц ... а так красиво
var arr = document.querySelectorAll("b");
var result = [].reduce.call(arr, function (prev, curr) {
curr = curr.getBoundingClientRect();
for (var prop in curr) if (prev[prop] === null || ( (prop === "top" || prop === "left") ? (prev[prop] >= curr[prop]):(prev[prop] <= curr[prop])) ) {
prev[prop] = curr[prop];
}
return prev;
}, { top: null, left: null, right: null, bottom: null });
<body>
<b>LOL</b>
<br><br>
<b>LOL</b>
<b>LOL</b>
<br>
<b>LOL</b>
</body>
<script>
var arr = document.querySelectorAll("b");
var result = [].reduce.call(arr, function (prev, curr) {
curr = curr.getBoundingClientRect();
for (var prop in curr) if (prev[prop] === null ||
( (prop === "top" || prop === "left") ? (prev[prop] >= curr[prop]):(prev[prop] <= curr[prop])) ) {
prev[prop] = curr[prop];
}
return prev;
}, { top: null, left: null, right: null, bottom: null });
var a = document.createElement("div");
a.style.cssText = "position: absolute;border: 1px green solid;";
document.body.appendChild(a);
a.style.top = result.top + 'px';
a.style.left = result.left + 'px';
a.style.height = result.bottom + 'px';
a.style.width = result.right + 'px';
</script>
Последний раз редактировалось melky, 18.08.2012 в 14:24.
|
|
18.08.2012, 16:03
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,501
|
|
|
Да твой быстрее моего на ~30% в общей сложности,
вариант melky - почти в 2.5 раза медленней твоего.)
__________________
29375, 35
|
|
18.08.2012, 16:24
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,501
|
|
Пока тогда остановлюсь на таком:
var result = { 'left': Infinity, 'top': Infinity, 'right': -Infinity, 'bottom': -Infinity };
while (i--) {
r = arr[i].getBoundingClientRect();
if (result.left > r.left) result.left = r.left;
if (result.top > r.top) result.top = r.top;
if (result.right < r.right) result.right = r.right;
if (result.bottom < r.bottom) result.bottom = r.bottom;
}
Смотрится чуток эстетичнее изначально варианта от Дзен-трансгуманист, разницы в скорости нет.
Но другие предложения приветствуются.)
__________________
29375, 35
|
|
18.08.2012, 16:28
|
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
|
Сообщение от Aetae
|
Да твой быстрее моего на ~30% в общей сложности,
вариант melky - почти в 2.5 раза медленней твоего.)
|
все новые итераторы массивов медленней обычных циклов на такой же коэффициент. |
|
18.08.2012, 16:45
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,501
|
|
|
Сообщение от melky
|
|
все новые итераторы массивов медленней обычных циклов на такой же коэффициент.
|
Сомнительно что-то. На кой чёрт они тогда нужны?)
__________________
29375, 35
|
|
18.08.2012, 16:48
|
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
|
Сообщение от Aetae
|
|
Сомнительно что-то. На кой чёрт они тогда нужны?)
|
для удобства. а все любители скорости и малого объёма будут до конца жизни использовать += вместо ++, && вместо if(){}, и тому подобное. |
|
18.08.2012, 16:57
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,501
|
|
|
Сообщение от melky
|
|
для удобства. а все любители скорости и малого объёма будут до конца жизни использовать += вместо ++, && вместо if(){}, и тому подобное.
|
Да, потеснил, так оно и есть, даже ср*ный .some() . Обыдно. Этож native код, должно быть быстрее. =(
Эх, как красиво с новомодным фичами выглядела проверка текста:
function isNaT( text ) { //not a text
return [
/^[_a-z0-9-\.]+@[\.a-z0-9-]+\.[a-z]+$/i, //email
/^[a-z]+:\/\/[^\s]+$/i, //url;
/^[0-9\.,!@#\$%\^\&*\(\)`~_\-=\+|\\{}\[\]\s:;<>\?\/]+$/i //symbol
].some( function(pattern) pattern.test( text ) )
}
Но оно аж в 3 раза медленней чем простое:
function isNaT(text){
var pattern = [
/^[_a-z0-9-\.]+@[\.a-z0-9-]+\.[a-z]+$/i, //email
/^[a-z]+:\/\/[^\s]+$/i, //url;
/^[0-9\.,!@#\$%\^\&*\(\)`~_\-=\+|\\{}\[\]\s:;<>\?\/]+$/i //symbol
], i = pattern.length;
while(i--) if(pattern[i].test( text )) return true;
return false
}
а скорость, увы, всегда важна.
P.S. Это абсурд: самодельная функция some работает быстрее нативной. *facepalm*
__________________
29375, 35
Последний раз редактировалось Aetae, 18.08.2012 в 17:08.
|
|
18.08.2012, 17:09
|
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
|
Сообщение от Aetae
|
|
Этож native код
|
ну, как говорится, код нативный, а коллбек - джяваскрыптовый.  |
|
|
|
