Уменьшение кода спагетти на приложении jQuery с использованием идеи модели

Использование jQuery может быть хитрым иногда, обычно, обычно, когда код не следует никакого беспокойства. Эти случаи часто связаны с плохим пониманием обещаний JavaScript и обратных вызовов. И не редко видеть файл сценария с тоннами ajax вызовы, передавая те же параметры, изменяющие только URL.

В качестве возможного обходного пути я предложил сделать разделенные классы, которые удерживают вызовы AJAX, используя M из MVC Frameworks, JS моделей.

Итак, давайте начнем с инкапселяции вызовов AJAX. Я в конечном итоге с этим скриптом, но вы можете изменить для чего-то, что работает для вас.

class Api {
   static request(url, promise, formData, method) {
    if (promise)
      return $.ajax({
        url: url,
        dataType: 'json',
        method: method,
        data: formData
      })
    else
      $.ajax({
        url: url,
        dataType: 'json',
        method: 'POST',
        data: formData
      })
    }
}

Далее, давайте сделаем немного шаблона для оказания наших предметов.

var PostTemplates = {
    listItem:'
%(id)i
%(title)s
'
}

Использование идеи модели позволяет создать класс, который централизовать вызовы AJAX, связанные с этим объектом

class Post {
    constructor(postInfo) {
        this.id = postInfo.id;
        this.title = postInfo.title;
    }

    static getList(){
        const url = 'https://jsonplaceholder.typicode.com/posts';
        let request = Api.request(url, true, {}, 'GET');
        return $.when(request); 
    }

    insert(){
         //...
    }

    remove(){
       //...
    }

    render(item){
        return sprintf(PostTemplates.listItem, this)
    }
}

И для последних позволяет использовать модель, вызывая функцию GetList

Post.getList().then(function(posts){
    let rootElement = $("#banner-message");
    rootElement.empty();
    $.each(posts, function(index, postInfo){
         rootElement.append(new Post(postInfo).render());
    })
})

Мой последний пост упоминал чистые JS и теперь jQuery. Это потому, что я замедляю, чтобы погрузиться в новую структуру JS. Я считаю, что у SPA-приложений есть использование случаев, но я бы не сказал, что это лучший подход для каждого проекта.

Оригинал: “https://dev.to/luciunknown/reducing-spaghetti-code-on-jquery-application-using-model-idea–9ba”