代码之家 › 专栏 › 技术社区 › Brandon Benefield

JS类和OOJ

dry ecmascript-6 oop class javascript

Brandon Benefield · 技术社区 · 7 年前

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

我有多个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会更容易。

1 回复 | 直到 7 年前

Bergi 7 年前

不,您不应该使用 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);
}