Tengo un fragmento de código escrito en un objeto. Puede ver que hay un objeto de customers con una función para agregar un nuevo cliente y un método para realizar llamadas AJAX
var sys = { customers: { addNew: function(ref, cb = null) { if (!cb) { // so it can check if the call to this method was for requesting ajax request or handling its response . note i am sending the callback function reference same as the current core.request({ d: $('form').serialize() }, 'sys.customers.addNew', ref); } else { if (ref.status) { $('.customers-list').append('<li>' + ref.customer.name + '</li>'); alert('success') } } }, updateRowAfterAdd: function() { // or i could use this for handling callback by passing its reference instead of the upper same function } }, request: function(p = {}, c = null, e = false) { $.ajax({ url: "/to/my/server", data: { p: p }, type: 'post', dataType: 'json', beforeSend: function() { }, success: function(r) { if (c != null) (e ? eval("(" + c + "(r,e));") : eval("(" + c + "(r));")); } }); } } $(document).on('click', '.addNew', function() { sys.customers.addNew($(this)); }); La idea en este ejemplo es llamar al método AJAX pasando una referencia de función de devolución de llamada para manejar la respuesta success .
Si observa el método addNew() , funciona de dos maneras. Con la ayuda del segundo parámetro, cb , determina que la llamada a esta función fue para enviar una solicitud AJAX o manejar su respuesta.
Estoy usando eval() en la devolución de llamada success que sé que es malvada , así que quiero entender cómo puedo hacer esto sin usar eval() .
Tengo varias cosas ejecutándose en mi página que necesitan llamadas AJAX y no quiero volver a escribir cada una de ellas.
También necesito esto para el método beforeSuccess() de AJAX.
El patrón de diseño que está utilizando parece ser una abstracción innecesaria que está causando más problemas de los que resuelve.
Una mejor idea sería tener una capa central de 'servicio' que haga las solicitudes a su lado del servidor y maneje las respuestas. Si quisiera resumir esto aún más, podría tener otras abstracciones de lógica de dominio para manejar las solicitudes y respuestas de AJAX a través de una sola clase; sin embargo, en esa etapa diría que es mucho mejor usar un marco existente para hacer esto por usted.
Una fuerte recomendación sería usar Angular, dado que su patrón MVC es hacia donde te diriges de todos modos.
Si quisiera lanzar su propia versión simplista, entonces un ejemplo simple se vería así:
$(document).on('click', '.addNew', function() { services.customers.save($('form').serialize()); }); // in a service layer JS file, far away from UI logic... let services = { customers: { save: requestData => { $.ajax({ url: '/to/my/server', type: 'post', dataType: 'json', data: $('form').serialize(), success: services.customers.renderUi }); }, renderCustomerUi: customerData => { // optional: extract the UI update logic to your UI layer and pass in the callback as an argument if (customerData.status) { $('.customers-list').append('<li>' + customerData.customer.name + '</li>'); } } } }