Javascript JS类和OOJS

我正在为一个辅助项目重构一些代码，我真的在尝试从面向对象的角度来做事情，而不是在这里抛出函数，在那里抛出变量

我有多个ajax请求，我看到它们有一些相似之处，这正是我考虑将它们放到类中的原因。我不确定是否应该为每个类创建一个单独的实例，这意味着为每个类创建一个新实例，或者一个类和一个实例是否适合此场景

最后，还有一些问题，我真的很感谢一些专家的建议

• 把他们带到课堂上值得吗
• 每个AJAX调用都将有从

  xhr

  调用的相同方法，即

  .open、

  等对象，但具有不同的值，我应该如何在类中处理这些方法来帮助干燥代码

JS

---

老实说，看着这个类，我觉得我可能在重构上浪费了一些时间。这样做的唯一好处是，将这个类移动到它自己的文件中以清理我的主JS会更容易。

不，您不应该在这里使用

类
语法。在这里，您根本不需要创建任何对象，只需对它们调用一个方法即可。如果您计划使用相同的
.xhr
重用一个实例，那么看起来您将使用单例
ajaxRequests
。不要那样做

只需编写多个函数，并为共享的部件使用辅助函数。例如：

function promiseForXhr(xhr) {
  return new Promise((resolve, reject) {
    xhr.onload = () => {
      if (xhr.status == 200) {
        resolve(xhr.response);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = () => {
      reject(xhr.statusText);
    };
  });
}

function deletePostPromise(url, postID) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.send(postID);
  return promiseforXhr(xhr);
}

function submitPost(url, user_id, user_name, content) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.send(user_id, user_name, content);
  return promiseforXhr(xhr);
}

function returnNewestPost(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.send();
  return promiseforXhr(xhr).then(JSON.parse);
}

现在，如果您觉得这还不够干，只需使用更多的辅助功能。您可以将其参数化或使用不同的功能：

function getFormXhr(url) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  return xhr;
}

function deletePostPromise(url, postID) {
  const xhr = getFormXhr(url);
  xhr.send(postID);
  return promiseforXhr(xhr);
}
function submitPost(url, user_id, user_name, content) {
  const xhr = getFormXhr(url);
  xhr.send(user_id, user_name, content);
  return promiseforXhr(xhr);
}

或者更进一步

function getXhrPromise({url, method, headers={}, sendArgs=[]}) {
  const xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  for (const h in headers)
    xhr.setRequestHeader(h, headers[h]);
  xhr.send(...sendArgs);
  return promiseForXhr(xhr);
}
formRequest(url, ...sendArgs) {
  return {
    url,
    method: "POST", 
    headers: {'Content-type': 'application/x-www-form-urlencoded'},
    sendArgs
  };
}

function deletePostPromise(url, postID) {
  return getXhrPromise(formRequest(url, postID));
}
function submitPost(url, user_id, user_name, content) {
  return getXhrPromise(formRequest(url, user_id, user_name, content));
}
function returnNewestPost(url) {
  return getXhrPromise({
    url,
    method: "GET"
  }).then(JSON.parse);
}

因此，您的意思是，创建类只应保留在需要使用来自同一类实例的多个方法的场景中？@BrandonBenefield Yes。一个只需要调用一个方法的对象与直接调用普通函数相比没有任何优势，这是有道理的。那么，在您的第一个示例中，反对创建一个将所有ajax调用分离为不同方法的类的理由是什么呢？这些方法都将使用
promiseForXhr（xhr）
函数？这仅仅是因为偏好吗？它们都属于同一个类别，即ajax，并且有相似之处。如果您想以某种方式命名它们，请将它们放在一个通用的“ajax”模块中，从该模块中导出函数，或者将它们作为方法放在一个分配给“ajax”常量的对象文字上——这取决于您的偏好。但是您不需要任何东西的多个对象实例，因此您不需要使用
class
语法。
function getXhrPromise({url, method, headers={}, sendArgs=[]}) {
  const xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  for (const h in headers)
    xhr.setRequestHeader(h, headers[h]);
  xhr.send(...sendArgs);
  return promiseForXhr(xhr);
}
formRequest(url, ...sendArgs) {
  return {
    url,
    method: "POST", 
    headers: {'Content-type': 'application/x-www-form-urlencoded'},
    sendArgs
  };
}

function deletePostPromise(url, postID) {
  return getXhrPromise(formRequest(url, postID));
}
function submitPost(url, user_id, user_name, content) {
  return getXhrPromise(formRequest(url, user_id, user_name, content));
}
function returnNewestPost(url) {
  return getXhrPromise({
    url,
    method: "GET"
  }).then(JSON.parse);
}