index.js

var articleModel = (function () {
    var GLOBAL_ARTICLES = [{
        "id": "news/2017/02/28/rossiya-snimet-zapret-na-import-moldavskih-vin",
        "title": "Россия снимет запрет на импорт молдавских вин",
        "author": "Meduza",
        "createdAt": new Date("2017-02-28T05:24:23.856Z"),
        "content": "Content of post",
        "summary": "Summary of post"
    }];

    function getArticles(skip, top) {
        skip = skip || 0;
        top = top || 10;
        return GLOBAL_ARTICLES.slice(skip, skip + top);
    }

    return {
        getArticles: getArticles
    };
}())

var articleRenderer = (function () {
    var ARTICLE_TEMPLATE;
    var ARTICLE_LIST_NODE;

    function init() {
        /* DOM Загрузился.
           Можно найти в нем нужные элементы и сохранить в переменные */
        ARTICLE_TEMPLATE = document.querySelector('#template-article-list-item');
        ARTICLE_LIST_NODE = document.querySelector('.article-list');
    }

    function insertArticlesInDOM(articles) {
        /* для массива объектов статей получим соотвествующие HTML элементы */
        var articlesNodes = renderArticles(articles);
        /* вставим HTML элементы в '.article-list' элемент в DOM. */
        articlesNodes.forEach(function (node) {
            ARTICLE_LIST_NODE.appendChild(node);
        });
    }

    function removeArticlesFromDom () {
        ARTICLE_LIST_NODE.innerHTML = '';
    }

    function renderArticles(articles) {
        /* каждый объект article из массива преобразуем в HTML элемент */
        return articles.map(function (article) {
            return renderArticle(article);
        });
    }

    function renderArticle(article) {
        /*
         Используем template из DOM, заполним его данными конкретной статьи - article.
         Этот код можно сделать лучше ...
        */
        var template = ARTICLE_TEMPLATE;
        template.content.querySelector('.article-list-item').dataset.id = article.id;
        template.content.querySelector('.article-list-item-title').textContent = article.title;
        template.content.querySelector('.article-list-item-summary').textContent = article.summary;
        template.content.querySelector('.article-list-item-author').textContent = article.author;
        template.content.querySelector('.article-list-item-date').textContent = formatDate(article.createdAt);

        /*
         Склонируем полученный контент из template и вернем как результат
        */
        return template.content.querySelector('.article-list-item').cloneNode(true);
    }

    /* Date -> 16/05/2015 09:50 */
    function formatDate(d) {
        return d.getDate() + '/' + (d.getMonth() + 1) + '/' + d.getFullYear() + ' ' +
            d.getHours() + ':' + d.getMinutes();
    }

    return {
        init: init,
        insertArticlesInDOM: insertArticlesInDOM,
        removeArticlesFromDom: removeArticlesFromDom
    };
}());

/*
    Функция startApp вызовется, когда браузер полностью загрузит и распарсит исходный HTML (index.html)
    DOMContentLoaded – означает, что все DOM-элементы разметки уже созданы,
    можно их искать, вешать обработчики, создавать интерфейс, но при этом, возможно,
    ещё не догрузились какие-то картинки или стили.
*/
document.addEventListener('DOMContentLoaded', startApp);


function startApp() {
     /* DOM Загрузился.
       Можно найти в нем нужные элементы и сохранить в переменные */
    articleRenderer.init();
    /* Нарисуем статьи из массива GLOBAL_ARTICLES в DOM */
   renderArticles();
}

/* Глобальная Функция для проверки. Свяжет модель и отображения */
function renderArticles(skip, top) {
    // 1. Удалим статьи из HTML
    articleRenderer.removeArticlesFromDom();

    // 2. Достанем статьи из модели
    var articles = articleModel.getArticles(skip, top);

    // 3. Отобразим статьи
    articleRenderer.insertArticlesInDOM(articles);
}