Создание повторно используемых веб-компонентов для одной страницы в Vanilla JS? - PullRequest
Новая
       69

Создание повторно используемых веб-компонентов для одной страницы в Vanilla JS?

0 голосов
/ 04 ноября 2019

У меня есть HTML-страница, которая создает таблицу с использованием jQuery для получения моих данных и ванильный JavaScript для создания таблицы. Я хотел создать класс для моего метода создания таблицы множеств, чтобы я мог экспортировать его и повторно использовать в коде HTML. Я на правильном пути?

Текущий код создания таблицы 

function(data) {
                //Rename the variable so I can reuse some code 
                var data_list = data.dataList;
                //Headers for our tables second row
                var titles = data.headers;
                //HTML table variables
                var perRow = 2, html = "<table><tr>";
                //Loop through our array of data
                for (var i = 0; i < data_list.length; i++) {
                    //Add our header first, as we want that to appear first
                    html += "<td>" + titles[i]+ "</td>";
                    //Then add the correct data piece for the header
                    html += "<td>" + data_list[i]+ "</td>";
                    //Break into the next row
                    var next = i+1;
                    if (next % perRow == 0 && next != data_list.length) {
                        //Start new row
                        html += "</tr><tr>";
                    }
                }
                //End the table
                html += "</tr><table>";
                //Attach the table to the HTML doc when finished
                document.getElementById("container").innerHTML = html;
            };

Как я думал, это будет выглядеть в другом файле .js 

class dataTable extends HTMLElement {
    constructor() {
        super();

        //Get our data
        this.dataList = data.dataList;
        this.dataHeaders = data.headers;

        //HTML attribute for creating our table
        this.html = "<table><tr>";
    }

    createTable() {
        //Items we want per roq
        var perRow = 2;

        //Loop through our data
        for (var i = 0; i < this.dataList; i++) {
            //Add our headers first
            this.html += "<td>" + this.dataHeaders[i] + "</td>";
            //Then add the corresponding piece of data
            this.html += "<td>" + this.dataList[i] + "</td>";
            //Decide when to break into the next row
            var next = i+1;

            if (next % perRow == 0 && next != this.dataList.length) {
                //Add the end row HTML
                this. html += "</tr><tr>"
            }
        }
        //End the table
        this.html += "</tr><table>";

        document.getElementById("container").innerHTML = this.html;
    }
}

AmЯ на правильном пути? Должен ли я просто использовать функцию? Будет ли этот класс работать правильно, если я включу его файл .js в тот же каталог? Я просто хочу использовать некоторые принципы ООП для создания своих собственных веб-компонентов, прежде чем я изучу фреймворк.

1 Ответ

1 голос
/ 05 ноября 2019

В идеале должен быть shadowRoot со слотом для html элемента, иначе можно вставить таблицу в shadowRoot. Этот пример будет нацелен на HTML через слот:

в HTML (статическая страница или что-то еще), включая: <data-grid>data-grid</data-grid>

в загруженном модуле, через импорт или скрипт type = module: 

/*
this is an example to show basics, it's not ideal, however it answers the question with a working example
*/
class DataTable extends HTMLElement {
    constructor() {
        super();
        // static, or request, or setup default and update later...
        this.dataList = [[1,2], [7,9]];
        this.dataHeaders = ['one', 'two'];

        // only work with shadowRoot in constructor, never the HTML element
        // minimize work here too, do that later in lifecycle callbacks
        this.attachShadow({mode:'open'}).innerHTML = `
<!-- NOTE how this th styling doesn't work because the table is rendered into the HTML, not the shadowRoot -->
<style>
/* styles shadow content in the host */
:host th{text-align:left;color:blue;}
/* only top-level selectors */
::slotted(table){text-align:right;}
</style>
<table style="width:100%;"><tr><th>ok</th></tr></table>
<button>update table</button>
<slot></slot>
        `;
        this.shadowRoot.querySelector('button').addEventListener('click', this.updateTable.bind(this));
    }
    connectedCallback(){
    // change attributes, html, etc here
        this.createTable();
    }
    random(){
        const max=Date.now();
        return Math.floor(Math.random() * Math.floor(max));
    }
    updateTable(){
        this.dataList = this.dataList.map((row, i)=>{
            return row.map(this.random);
        });
        this.createTable();
    }
    createTable() {
        // use the render cycle
        cancelAnimationFrame(this._createTable);
        this._createTable = requestAnimationFrame(()=>{
        // html will go into the shadowRoot slot (default or whatever is targeted)
        this.innerHTML = `
<table>
<thead><tr>
    ${ this.dataHeaders.reduce((html, col, i)=>{
        return html + `<th>${i+1} ${col}</th>`;
    }, '') }
</tr></thead>
<tbody>
<tr>${ this.dataList.map((row, i)=>{
    return `<td>${ row.join('</td><td>') }</td>`;
}).join('</tr><tr>') }</tr>
</tbody>
</table>
        `;
        });
    }
}
// define the element, if not already
customElements.get('data-grid') || customElements.define('data-grid', DataTable);

См. Рабочий пример ( commit ) и документы Google Web Developer для рекомендации по веб-компонентам .

...