Как оформить красиво jQuery код?

Question

[kamwork]

Всем привет!

Поставил Bootstrap Markdown. Хочу локализовать.

Вставляю из документации код в отдельный JS файл:

(function($){
    $.fn.markdown.messages['fr'] = {
        'Bold': "Gras",
        'Italic': "Italique",
        'Heading': "Titre",
        'URL/Link': "Insérer un lien HTTP",
        'Image': "Insérer une image",
        'List': "Liste à puces",
        'Preview': "Prévisualiser",
        'strong text': "texte important",
        'emphasized text': "texte souligné",
        'heading text': "texte d'entête",
        'enter link description here': "entrez la description du lien ici",
        'Insert Hyperlink': "Insérez le lien hypertexte",
        'enter image description here': "entrez la description de l'image ici",
        'Insert Image Hyperlink': "Insérez le lien hypertexte de l'image",
        'enter image title here': "entrez le titre de l'image ici",
        'list text here': "texte à puce ici"
    };
}(jQuery));


$("#target-editor-with-custom-language").markdown({language:'fr'})

Так все работает.

Но хочу сделать чуть иначе, вынести в инициализацию:

addNews.init();

И предварительно подключенный файл JS:

var addNews = function () {

    var handleMarkdown = function () {


      
            $.fn.markdown.messages['fr'] = {
                'Bold': "Gras",
                'Italic': "Italique",
                'Heading': "Titre",
                'URL/Link': "Insérer un lien HTTP",
                'Image': "Insérer une image",
                'List': "Liste à puces",
                'Preview': "Prévisualiser",
                'strong text': "texte important",
                'emphasized text': "texte souligné",
                'heading text': "texte d'entête",
                'enter link description here': "entrez la description du lien ici",
                'Insert Hyperlink': "Insérez le lien hypertexte",
                'enter image description here': "entrez la description de l'image ici",
                'Insert Image Hyperlink': "Insérez le lien hypertexte de l'image",
                'enter image title here': "entrez le titre de l'image ici",
                'list text here': "texte à puce ici"
            }

        if (jQuery().markdown) {
            jQuery("#target-editor-with-custom-language").markdown({language:'fr'})
        } else {
            console.log('markdown false');
        }

    }

    return {
        init: function () {
            handleMarkdown();
        }
    };


}();

Но подозреваю, что как то криво я сделал, так как не работает но и ошибку не кидает ни какую.

Answer 1

[Илья Андриенко]

Вероятно, удобнее всего (если я правильно понял, чего вы пытаетесь добиться) вам будет использовать конструкторы функций:

var App = function(data){
  
  this.data = data;
  
  this.method = function(){
    return this.data;
  };
};

var addNews = new App({markdown:'something'});
console.log(addNews.method());

У созданных конструктором (с ключевым словом new) объектов свои собственные скоупы и так далее - можно будет для разных текстовых создать несколько обособленных модулей обработки этого вашего маркдауна. Это гораздо удобнее, чем вызывать каждый раз функцию, возвращающую объект с ссылками на методы, как делаете вы.

Запись в jQuery.fn.markdown.messages лучше сделать вообще отдельно от инициализации конкретных элементов..

В ваших примерах первый, несомненно, "красивее". Второй не работает, возможно, потому, что скрипт подключен до инициализации DOM. Вызов функций-инициализаторов, использующих элементы DOM, логично выполнять из функций, висящих обработчиками события document.ready:

jQuery(function($){
   $("#target-editor-with-custom-language").markdown({language:'fr'});
});