Нужно ли создавать <span>элементов для регистрации слушателей событий - PullRequest
Новая
       32

Нужно ли создавать <span>элементов для регистрации слушателей событий

0 голосов
/ 30 января 2019

У меня есть работающее веб-приложение, которое читает локальные файлы .txt и отображает содержимое в элементе div.Я создаю элемент span из каждого слова, потому что мне нужно иметь возможность выбрать любое слово в документе и создать EEI (основные элементы информации) из текста.Затем я регистрирую обработчик щелчка на содержащем div и позволяю событию всплывать.Три функции ниже показывают чтение файла, его синтаксический анализ и заполнение текста div с помощью span: 

    function readInputFile(evt) {
    reset();
    var theFile = evt.target.files[0];
    if(theFile) {
        $("#theDoc").empty(); //Clean up any old docs loaded
        var myReader = new FileReader();
        var ta = document.getElementById("theDoc");
        myReader.onload = function(e) {
            parseTheDoc(e.target.result);
            initialMarkup();
        };
        myReader.readAsText(theFile);
    } else {
        alert("Can not read input file: readInputFile()");
    }
}

    function parseTheDoc(docContents) {
    var lines = docContents.split("\n");
    var sentWords =[];
    for(var i = 0; i < lines.length; i++) {
        sentWords = lines[i].split(" ");
        words = words.concat(sentWords);
        words.push("<br>");
    }
    //examineWords(words);
    createSpans(words);
}

   function createSpans() {
    for (var i = 0; i < words.length; i++) {
        var currentWord = words[i];
        if(currentWord !== "<br>") {
            var $mySpan = $("<span />");
            $mySpan.text(currentWord + " ");
            $mySpan.attr("id", "word_" + i);
            $("#theDoc").append($mySpan);
            buildDocVector(currentWord, i, $mySpan);
        }
        else {
            var $myBreak = $("<br>");
            $myBreak.attr("id", "word_" + i);
            $("#theDoc").append($myBreak);
            buildDocVector("br", i, $myBreak);

        }
    }
    //console.log("CreateSpans: Debug");
}

Таким образом, в основном это простой FileReader, разделенный на \ n, а затем токенизированный на пустое пространство.Затем я создаю span для каждого слова и элемент br для каждого \ n.Это не красиво, но удовлетворяет требованию и работает.У меня вопрос, есть ли более эффективный способ сделать это?Просто кажется, что создавать все эти промежутки дорого, но мое требование - аннотировать документ и сопоставлять любое выбранное слово с моделью данных / онтологией.Я не могу придумать, как позволить пользователю выбрать любое слово или комбинацию слов (щелчок мышью), а затем выполнить операции над ними.Это работает, но с большими документами (100 страниц) у меня начинают возникать проблемы с производительностью / памятью.Я понимаю, что это скорее вопрос дизайна и, возможно, он не подходит, но мне бы очень хотелось узнать, есть ли более эффективные решения.

...