Question

我正在为一个辅助项目重构一些代码，我真的试图从OO角度处理事务，而不是仅仅在这里抛出函数和变量。

我有多个ajax请求，我看到他们分享的一些相似之处，这让我想到把它们扔进课堂。我不确定是否应该为每个创建一个单独的实例，这意味着创建每个实例，或者是一个类和一个适合这种情况的实例？

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

是否值得将它们带入课堂？
每个AJAX调用将具有从xhr调用的相同方法，即。 .open, .send等，对象但具有不同的值，我应该如何在类中处理这个以帮助我的代码干嘛？

JS

class AJAXRequests {
  constructor() {
    this.xhr = new XMLHttpRequest();
  }

  deletePostPromise(url, postID) {
    return new Promise((resolve, reject) => {
      this.xhr.open('POST', url, true);
      this.xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      this.xhr.send(postID);

      this.xhr.onload = () => {
        if (this.xhr.status == 200) {
          resolve();
        } else {
          reject(this.xhr.statusText);
        }
      };

      this.xhr.onerror = () => {
        reject(this.xhr.statusText);
      };
    });
  }

  submitPost(url, user_id, user_name, content) {
    return new Promise((resolve, reject) => {
      this.xhr.open('POST', url, true);

      this.xhr.onload = () => {
        if (this.xhr.status == 200) {
          resolve();
        } else {
          reject(this.xhr.statusText);
        }
      };

      this.xhr.onerror = () => {
        reject(this.xhr.statusText);
      };

      this.xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      this.xhr.send(user_id, user_name, content);
    });
  }

  returnNewestPost(url) {
    return new Promise((resolve, reject) => {
      // const xhr = new XMLHttpRequest();

      this.xhr.open('GET', url, true);

      this.xhr.onload = () => {
        if (this.xhr.status == 200) {
          resolve(JSON.parse(this.xhr.response));
        } else {
          reject(this.xhr.statusText);
        }
      };

      this.xhr.onerror = () => {
        reject(this.xhr.statusText);
      };

      this.xhr.send();
    });
  }
}
const ajaxRequests = new AJAXRequests;

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

Answer 1

不，你不应该在这里使用.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);
}

或进一步

lst = ['t', 'p', 'k', 'F', 'p', 'l', 'v', 'F']

list(map(list, ''.join(lst).split('F')[:-1]))

# [['t', 'p', 'k'], ['p', 'l', 'v']]

JS类和OOJS

JS

1 个答案: