JS 类和 OOJS

Question

我正在为一个业余项目重构一些代码，我真的想从 OO 的角度掌握做事的诀窍，而不是在这里扔函数，在那里扔变量。

我有多个 ajax 请求，我看到它们有一些相似之处，这让我想到将它们放在 class 中。我不确定我是否应该为每个创建一个单独的实例，这意味着为每个创建一个新实例，或者一个 class 和一个实例适合这种情况？

最后，还有一些问题，非常感谢一些专家的建议

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

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;

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

Answer 1

不，您不应在此处使用 class 语法。你根本不需要在这里创建任何对象，无论如何你只需要对它们调用一个方法。而且，如果您计划重用具有相同 .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);
}

JS 类和 OOJS

JS Classes and OOJS

javascript

oop

class

dry

ecmascript-6

JS

JS 类 和 OOJS

JS Classes and OOJS

javascript

oop

class

dry

ecmascript-6

JS

JS 类和 OOJS