Нас не догонят: Javascript

20 октября 2012 г.

Одна интересная особенность innerHTML в Internet Explorer

Была замечена интересная особенность работы innerHTML в IE. Ниже приведен код страницы с двумя блоками, каждый из которых содержит по таблице. Скрипт получает ссылки на таблицы. Теперь, если удалить таблицы из DOM, они останутся в памяти, поскольку в коде есть на них актуальные ссылки. Так и делаем. Только первую таблицу удаляем очисткой innerHTML родительского узла, а вторую - с помощью метода removeChild.

Проверяем. Со ссылками, естественно, все в порядке, только в IE первая таблица лишилась своего содержимого. Остался только элемент TABLE.

Если получить ссылку, например, на строку первой таблицы, это одинаково не спасет её от потери содержимого, хотя объект строки так само не будет удален из памяти и так само потеряет свое содержимое.

Это касается любых элементов, а не только таблиц. Эту особенность я наблюдал в 6, 7 и 9 версиях. Восьмой версии просто нет под рукой.

<div id="block_1">
    <table id="table_1">
        <tr>
            <td>Эту таблицу мы удалим, просто очистив innerHTML родительского объекта.</td>
        <tr>
    </table>
</div>
<div id="block_2">
    <table id="table_2">
        <tr>
            <td>Эту таблицу мы удалим с помощью метода removeChild.</td>
        <tr>
    </table>
</div>

<script type="text/javascript">
    var table_1 = document.getElementById('table_1');
    var table_2 = document.getElementById('table_2');
    var block_1 = document.getElementById('block_1');
    var block_2 = document.getElementById('block_2');
    
    
    block_1.innerHTML = '';
    block_2.removeChild(table_2);
    
    alert(table_1);
    alert(table_2);
    alert(table_1.innerHTML);
    alert(table_2.innerHTML);
</script>

13 сентября 2012 г.

Простой шаблонизатор на JavaScript без компилирования шаблона

Шаблон:

var template = '\
    <div class="container">\
        <p>{{shortbio}}</p>\
        <ul>\
        {{foreach albums as album}}\
            <li {{if album.selected == true}} class="selected"{{endif}}>\
                {{album.name}} ({{album.year}})\
            </li>\
        {{endforeach}}\
        </ul>\
        \
        <select>\
        {{foreach albums as album}}\
            <option {{if album.selected == true}} selected{{endif}}>\
                {{album.name}} ({{album.year}})\
            </option>\
        {{endforeach}}\
        </select>\
    </div>\
';

Данные:

var data = {
    albums: [
        {name: 'Golden Heart',              year: '1996'},
        {name: 'A Night In London',         year: '1996'},
        {name: 'Sailing to Philadelphia',   year: '2000'},
        {name: 'The Ragpicker’s Dream',     year: '2002'},
        {name: 'Shangri-La',                year: '2004', selected: true},
        {name: 'One Take Radio Sessions',   year: '2005'},
        {name: 'Kill To Get Crimson',       year: '2007'},
        {name: 'Get Lucky',                 year: '2009'}
    ],
    
    shortbio: 'Марк Фро?йдер Но?пфлер OBE (англ. Mark Freuder Knopfler; 12 августа 1949, Глазго, Шотландия) — британский рок-музыкант, певец и композитор, один из сооснователей группы Dire Straits.'
};

Код:

Результат:

Скрипт шаблонизатора: github
Скрипт примера: templater_example.js

20 октября 2012 г.