Форум

jscripter · #11 (**permalink**) 25.04.2015, 11:35

switch001,
А жеквери убрать не пробовали?

js_js · #12 (**permalink**) 25.04.2015, 14:21

switch001,

<html>
<head>
<style>
span{display: block}
</style>

</head>
<body>

<button id="rgDate">date</button>
<button id="rgError">error</button>
<button id="rgWarning">warning</button>
<button id="rgNotice">notice</button>
<button id="rgDebug">debug</button>

<br>

<div id="wrapper">

<span class="rgDate">date</span>
<span class="rgError">error</span>
<span class="rgWarning">warning</span>
<span class="rgNotice">notice</span>
<span class="rgDebug">debug</span>
<span class="rgDate">date</span>
<span class="rgError">error</span>
<span class="rgWarning">warning</span>
<span class="rgNotice">notice</span>
<span class="rgDebug">debug</span>
<span class="rgDate">date</span>
<span class="rgError">error</span>
<span class="rgWarning">warning</span>
<span class="rgNotice">notice</span>
<span class="rgDebug">debug</span>

</div>



<script>

s=wrapper.innerHTML

fltr=function(){
 var re=new RegExp('<span class="'+this.id+'">[^>]+>', 'g')
 wrapper.innerHTML=s.match(re).join("")
}

;[].forEach.call(document.querySelectorAll("button"), function(b){b.onclick=fltr})


</script>
</body>
</html>

На файле 540кб на слабой машине, скорость менее секунды

switch001 · #13 (**permalink**) 25.04.2015, 20:36

js-js: подход конечно интересный. И, сцуко, элегантный!!! Не сразу понял как работает. (да-да, я принадлежу "поколению Jquery")
Сейчас попробую на своих данных.

jscripter: вот и пытаюсь это сделать

switch001 · #14 (**permalink**) 25.04.2015, 21:05

js-js: действительно работает быстро. В моем наборе данных отрабатывает за секунду, в то время как мой подход работает около трех секунд. Но есть минус: данные уничтожаются. Нужно стиль чтоли менять на невидимый.

fuckjava · #15 (**permalink**) 25.04.2015, 21:07

Сообщение от switch001

данные уничтожаются

С чего бы это?

switch001 · #16 (**permalink**) 25.04.2015, 22:16

Сообщение от fuckjava

С чего бы это?

ну как бы из исходника это понятно. Кстати он не работал у меня, сделал так:

<button onclick="fltr('rgDialplan');">Dialplan</button>

<script type="text/javascript" charset="utf-8"> 


function fltr(fld)
{
	
	var s=document.getElementById('helper').innerHTML;
	var re=new RegExp('<span class="'+fld+'">[^>]+>', 'g');
	document.getElementById('helper').innerHTML=s.replace(re, "");
}

fuckjava · #17 (**permalink**) 25.04.2015, 22:27

Сообщение от switch001

var s=document.getElementById('helper').innerHTML;

Вынесите эту строку за ф-цию.

Странная у Вас "позиция". В переводе на русский: "у меня уничтожаются данные, потому что я их уничтожаю, как бы так сделать, чтобы я их перестал уничтожать?"

fuckjava · #18 (**permalink**) 25.04.2015, 22:29

Сообщение от switch001

Кстати он не работал у меня

Почему же тут работает?

Чудеса, да и только.

switch001 · #19 (**permalink**) 26.04.2015, 07:44

Сообщение от fuckjava

Почему же тут работает?

Чудеса, да и только.

Вот такие чудеса. Это работает

document.getElementById('helper').innerHTML

а это не работает

helper.innerHTML

Сообщение от fuckjava

Странная у Вас "позиция".

моя позиция - гетеросексуальная. А по поводу данных: предложенная функция удаляет текст из DOM, если пользователь захочет включить отображение тех или иных элементов то у него это не получится. Другой недостаток подхода в том, что если пользователь забудет окно закрыть, то за некоторое время в DOM насыпет несколько десятков мегабайт текста со всеми вытекающими. Т.е. нужно как-то ограничивать размер. В случае если текст хранится в массиве построчно эта проблема решается проще.

Erolast · #20 (**permalink**) 26.04.2015, 11:04

Цитата:

Сделал так: сохраняю все строки в массив, перед выводом хелпер очищаю, потом прохожу регэкспами массив и выдаю в DOM уже готовый HTML. так работает в сто раз быстрее. На фильтрацию уходит примерно от одной до трех секунд пот 2500 строк. Но хочется еще больше скорости

Храни массив объектов вида {label, text}, где label - одно из debug/verbose/error/чотамеще, а text - уже распаршенный в html текст, при изменении условий фильтруй по метке и вставляй через innerHTML.

var logItems = [{
    label: "debug",
    text: "<span>10:05:00</span><span>some debug message</span>"
}, {
    label: "error",
    text: "<span>10:05:00</span><span>some error message</span>"
}]
//..

document.getElementById("wrapper").innerHTML = logItems.filter(function(item) {
    return checkedLabels.indexOf(item.label) != -1;
}.map(function(item) {
    return "<div class='log-item'>" + item + "</div>";
}).join();

А вообще, такие вещи делаются не вручную, а с помощью движков биндинга вроде реакта.

Форум

Справочник

Discord чат

Курсы javascript