Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.07.2012, 12:35
Новичок на форуме
Отправить личное сообщение для Joyfit Посмотреть профиль Найти все сообщения от Joyfit
 
Регистрация: 01.07.2012
Сообщений: 2

Нужны советы по коду
Недавно написал свой скрипт для замены слов в тексте, результат работы здесь: www.wecode.ru/mine/wordedit
Делает он следующее: в диве у нас лежит какой либо текст (может быть с различными тегами), при наведении на слова/фрагменты - они выделяюся и при дальнейшем клике появляется инпут, в котором можем поменять слово на необходимое. При этом все ссылки должны выводиться ссылками без возможности их изменения, а остальные теги должны игнорироваться.

Хотелось бы услышать советы по коду, чтобы начать поменьше быдлокодить, как обычно получается))

Если что-то в коде не понятно, пишите, распишу назначения всех фрагментов/переменных

<div id="result"><a href="#">Начало</a>. Две ссылки подряд: <a href="#">вот</a> <a href="#">ссылка</a>. Ссылки разделенные короткими словами/символами: <a href="#">ссылка</a> вот <a href="#">ссылка</a>, <a href="#">ссылка</a>. Длинными словами: <a href="#">ссылка</a> длинная <a href="#">ссылка</a>. Скобочки: (<a href="#">ссылка</a>), <a href="#">ссылка</a> (<a href="#">ссылка</a>). <a href="#">Конец</a></div>


CWordEdit = {
    init: function() {
        var content = $("#result").html(),
            letter = "",
            newWord = 0,
            word = "",
            wordsArray = [],
            links = [],
            wordLen = 0,
            tagFlag = false,
            aFlag = false;
        for (var i = 0; i < content.length + 1; i++) {
            letter = this.getLetter(i, 1, content);
            if (letter == "<") {
                tagFlag = true;
                if (this.getLetter(i+1, 1, content) == "a") {
                    aFlag = true;
                    wordsArray[newWord] = word.trim();
                    if ((newWord > 0 && links[i-1] == "") || word.length > 0) {
                        newWord++;
                    }
                    word = "";
                    links[newWord] = "";
                }
            }
            if (!tagFlag && !aFlag) {
                if ((letter != " " || (wordLen <= 3 && this.getLetter(i+1, 2, content) != "<a")) &&  (i<content.length)) {
                    word += letter;
                    wordLen++;
                    if (!this.notEnding(letter) && this.notEnding(this.getLetter(i+1, 1, content))) {
                        links[newWord] = "";
                        wordsArray[newWord++] = word;
                        word = "";
                    }
                } else {
                    links[newWord] = "";
                    wordsArray[newWord++] = word.trim();
                    word = "";
                }
            } else if (aFlag) {
                links[newWord] += letter;
            }
            if (letter == " ") {
                wordLen = 0;
            }
            if (letter == ">") {
                if (this.getLetter(i-2, 2, content) == "/a") {
                    aFlag = false;
                    wordsArray[newWord++] = "";
                }
                tagFlag = false;
            }
        }
        content = "";
        for (i = 0; i < wordsArray.length; i++) {
            if (wordsArray[i] != "") {
                content += "<span class='ew'>" + wordsArray[i] + "</span>";
                if ("({[".indexOf(wordsArray[i])) {
                    content += " ";
                }
            } else {
                if (wordsArray[i-1] == "") {
                    content += " ";
                }
                content += links[i];
                if ((i+1) < wordsArray.length) {
                    if (this.notEnding(wordsArray[i+1].charAt(0))) {
                        content += " ";
                    }
                }
            }
        }
        $("#result").html(content);
        this.renderClicks();
        this.finishEdit();
    },
    getLetter: function(i, q, editContent) {
        return editContent.substring(i, i+q);
    },
    renderClicks: function() {
        $("#result .ew").live("click", function(){
            var chosenWord = $(this).html(),
                width = $(this).width();
            $(this).replaceWith("<input type='text' value='" + chosenWord + "' style='width:"+ width + "px' />");
            $("#result input").focus();
        });
    },
    notEnding: function(letter) {
        return !(".,!?;:)]}".indexOf(letter) + 1);
    },
    finishEdit: function() {
        $("#result input").live("blur", function(){
            if (!($(this).val().indexOf("<script>") + 1)) {
                $(this).replaceWith("<span class='ew'>" + $(this).val() + "</span>");
            } else {
                $(this).remove();
            }
        });
    }
};

$(document).ready(function(){
    CWordEdit.init();
});
Ответить с цитированием
  #2 (permalink)  
Старый 01.07.2012, 12:53
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

ну, если работает, то Слава Богу

Сообщение от Joyfit
$(this).replaceWith("<input type='text' value='" + chosenWord + "' style='width:"+ width + "px' />");
как-то это злостно, на каждое слово создавать новое поле. пусть поле будет одно, скрывайте, показывайте его в моменты редактирования, но незачем каждый раз новое создавать, ибо это оператива.

Сообщение от Joyfit
$(this).replaceWith("<span class='ew'>" + $(this).val() + "</span>");
зачем обрамлять текст span'ом в конце редактирования? (этого я просто не понял)

Сообщение от Joyfit
return !(".,!?;:)]}".indexOf(letter) + 1);
Вы слышали что-нибудь о регулярных выражениях?

ну и самое ужасное, Вы имеете на руках jQuery, а пишите код на нативном JS :
Сообщение от Joyfit
for (i = 0; i < wordsArray.length; i++) {
Сообщение от Joyfit
for (var i = 0; i < content.length + 1; i++) {
и т.д

ну и ещё маленький минусик (это не обязательно, но так делать - плохой тон)
finishEdit: function() {
        $("#result input").live("blur", function(){
            if (!(*!*$(this)*/!*.val().indexOf("<script>") + 1)) {
                *!*$(this)*/!*.replaceWith("<span class='ew'>" + *!*$(this)*/!*.val() + "</span>");
            } else {
                *!*$(this)*/!*.remove();
            }
        });
    }

эти вездесущие $(this) каждый раз исполняют вот этот кусок кода (вся функция по ссылке). оно Вам надо? кешируйте $(this) в переменной, скажем, $this.



я быстренько обежал код глазами, в алгоритм не вглядывался (кроме первого, про текстовое поле).

Последний раз редактировалось melky, 01.07.2012 в 12:56.
Ответить с цитированием
  #3 (permalink)  
Старый 01.07.2012, 12:59
Новичок на форуме
Отправить личное сообщение для Joyfit Посмотреть профиль Найти все сообщения от Joyfit
 
Регистрация: 01.07.2012
Сообщений: 2

Поле создаю потому что оно появляется на месте редактируемого слова, может конечно некорректно Вас понял и можно одним инпутом это решать.
В спаны оборачиваю чтобы при наведении курсора происходило выделение фрагмента, так как фрагменты можно редактировать несколько раз.

А вообще спасибо за советы, учту все, что Вы написали)
Ответить с цитированием
  #4 (permalink)  
Старый 01.07.2012, 13:33
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Joyfit
Поле создаю потому что оно появляется на месте редактируемого слова, может конечно некорректно Вас понял и можно одним инпутом это решать.
ну дык скрывайте его при загрузке, и показывайте\позиционируйт при
редактировании слова. оно одно должно быть на странице - главная мысль.

Сообщение от Joyfit
В спаны оборачиваю чтобы при наведении курсора происходило выделение фрагмента, так как фрагменты можно редактировать несколько раз.
а, тогда понятно. довольно часто встречающаяся практика
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
нужны книги по Scriptaculous.СРОЧНО!!! Gvozd Prototype & script.aculo.us 5 08.03.2016 14:16
Онлайновый текстовый редактор html/js. Нужны советы. elf2002 Javascript под браузер 9 03.01.2012 03:48
Необходимы советы как убирать не нужное из библиотеки jquery. dr_gluk jQuery 13 18.07.2011 12:05
нужны статьи по webgl KOLANICH Сайт Javascript.ru 1 28.04.2011 00:30
Поиск по коду страницы. bd_snr Общие вопросы Javascript 11 10.09.2009 14:57