Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 25.04.2015, 11:35
Интересующийся
Посмотреть профиль Найти все сообщения от jscripter
 
Регистрация: 25.04.2015
Сообщений: 4

switch001,
А жеквери убрать не пробовали?
Ответить с цитированием
  #12 (permalink)  
Старый 25.04.2015, 14:21
Новичок на форуме
Посмотреть профиль Найти все сообщения от js_js
 
Регистрация: 25.04.2015
Сообщений: 1

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кб на слабой машине, скорость менее секунды
Ответить с цитированием
  #13 (permalink)  
Старый 25.04.2015, 20:36
Интересующийся
Отправить личное сообщение для switch001 Посмотреть профиль Найти все сообщения от switch001
 
Регистрация: 14.04.2010
Сообщений: 29

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

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

Последний раз редактировалось switch001, 25.04.2015 в 20:39.
Ответить с цитированием
  #14 (permalink)  
Старый 25.04.2015, 21:05
Интересующийся
Отправить личное сообщение для switch001 Посмотреть профиль Найти все сообщения от switch001
 
Регистрация: 14.04.2010
Сообщений: 29

js-js: действительно работает быстро. В моем наборе данных отрабатывает за секунду, в то время как мой подход работает около трех секунд. Но есть минус: данные уничтожаются. Нужно стиль чтоли менять на невидимый.
Ответить с цитированием
  #15 (permalink)  
Старый 25.04.2015, 21:07
Новичок на форуме
Посмотреть профиль Найти все сообщения от fuckjava
 
Регистрация: 25.04.2015
Сообщений: 9

Сообщение от switch001
данные уничтожаются
С чего бы это?
Ответить с цитированием
  #16 (permalink)  
Старый 25.04.2015, 22:16
Интересующийся
Отправить личное сообщение для switch001 Посмотреть профиль Найти все сообщения от switch001
 
Регистрация: 14.04.2010
Сообщений: 29

Сообщение от 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, "");
}
Ответить с цитированием
  #17 (permalink)  
Старый 25.04.2015, 22:27
Новичок на форуме
Посмотреть профиль Найти все сообщения от fuckjava
 
Регистрация: 25.04.2015
Сообщений: 9

Сообщение от switch001
var s=document.getElementById('helper').innerHTML;
Вынесите эту строку за ф-цию.

Странная у Вас "позиция". В переводе на русский: "у меня уничтожаются данные, потому что я их уничтожаю, как бы так сделать, чтобы я их перестал уничтожать?"
Ответить с цитированием
  #18 (permalink)  
Старый 25.04.2015, 22:29
Новичок на форуме
Посмотреть профиль Найти все сообщения от fuckjava
 
Регистрация: 25.04.2015
Сообщений: 9

Сообщение от switch001
Кстати он не работал у меня
Почему же тут работает? Чудеса, да и только.
Ответить с цитированием
  #19 (permalink)  
Старый 26.04.2015, 07:44
Интересующийся
Отправить личное сообщение для switch001 Посмотреть профиль Найти все сообщения от switch001
 
Регистрация: 14.04.2010
Сообщений: 29

Сообщение от fuckjava Посмотреть сообщение
Почему же тут работает? Чудеса, да и только.
Вот такие чудеса. Это работает
document.getElementById('helper').innerHTML

а это не работает
helper.innerHTML


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

Последний раз редактировалось switch001, 26.04.2015 в 07:52.
Ответить с цитированием
  #20 (permalink)  
Старый 26.04.2015, 11:04
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

Цитата:
Сделал так: сохраняю все строки в массив, перед выводом хелпер очищаю, потом прохожу регэкспами массив и выдаю в 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();


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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите доработать скрипт меню Фартовый Оффтопик 7 27.11.2014 14:07
Помогите с replace! faforty Общие вопросы Javascript 2 28.08.2011 13:10
Прелоадер (помогите разобраться) xsfd AJAX и COMET 6 16.09.2010 02:30
Помогите! Многоуровневые вкладки! sergeeeeee Элементы интерфейса 2 02.08.2010 23:50
Люди, ПОМОГИТЕ! Bel666 jQuery 11 27.04.2010 15:38