어떻게 코드를 재구성합니까

코드 재구성은 모든 개발자가 일하는 기초이다.그러나 내가 만난 이 문제에 대해 깊이 있게 토론하는 자원은 상대적으로 적다.
이 블로그는 오늘 아침 내가 자바스크립트 코드를 재구성한 후에 발생했다.그것은 30분도 안 걸렸지만, 나는 흥분해서 여기로 돌아와 미디어를 썼다.

위대한 재구성 이야기를 시작합시다!

우선, 내 코드 라이브러리에는 이 두 개의fetch 함수가 도처에 있는데, 그것들의 이름은 약간 다르다. 나는 그것들을 다시 사용할 수 있는 함수 모듈로 재구성하고 싶다.다음은 두 가지입니다.

async function postLoginData(data) {
  const loginUrl = `${apiBaseUrl}/login`;
  let response = await fetch(loginUrl, {
    method: "POST",
    mode: "cors",
    cache: "no-cache",
    credentials: "same-origin",
    headers: {
      "Content-Type": "application/json; charset=utf-8",
    },
    redirect: "follow",
    referrer: "no-referrer",
    body: JSON.stringify(data),
  });
  return response;
}

// Get the user's data based on user id.
async function getUser(userId) {
  const userUrl = `${apiBaseUrl}/users/${userId}`;
  let response = await fetch(userUrl, {
    method: "GET",
    mode: "cors",
    cache: "no-cache",
    credentials: "same-origin",
    headers: {
      "Content-Type": "application/json; charset=utf-8",
    },
    redirect: "follow",
    referrer: "no-referrer",
  });
  return response;
}

나는 극단적으로 건조한 창도자는 아니지만, 이 느낌은 매우 번거롭다.모든 함수는 포장된 것만 얻는 것이 매우 적다.봉인 단점 URL과 방법 속성을 제외하고는 이 두 가지는 보기에 완전히 같아서 전체 코드 라이브러리에서 다시 사용할 수 있어야 한다.

함수는 가능한 한 순수해야 한다

내가 함수에 대한 첫 번째이자 가장 중요한 기준은 가능하다면 순함수로 재구성해야 한다는 것이다.순도는 중용성을 의미한다.공유 상태를 변경해야 한다면 방법의 후보일 수도 있습니다.이것은 기능을 테스트하고 다시 사용하기 쉽게 한다.postLoginData라는 함수가 이를 위반했다.다음은 구현을 고려하지 않는 재구성 방법입니다.

user.login()

login(user)

post(loginUrl, user)

상술한 목록은 가장 일반적이지 않은 것부터 높은 것까지 다시 사용할 수 있다.사실상 앞의 두 가지는 같은 통용성을 가지고 있다.오직 마지막 하나만 중용할 수 있다. 이것이 바로 내가 원하는 것이다.
이제 너는 나의 두 함수가 얼마나 얄미운지 볼 수 있다.때때로 너는 다른 모자를 쓰고 다른 일을 우선적으로 고려한다.우리가 가끔 물건을 정리하기만 하면 황급히 일을 완성할 수 있다.

어떻게 재구성의 합리성을 증명합니까

어떤 것을 재구성해야 할지 결정하기 위해서 나는 함수를 만드는 의도와 가치를 고려했다.
예를 들어 하나의 "POST"와 다른 "GET"데이터의 함수는 실현에 관계없이 근본적으로 다른 의도를 가지고 있다.의도가 명확하고 식별할 수 있어 두 함수를 만드는 것이 합리적이라는 것을 충분히 증명할 수 있다.
그러나 함수의 통용성이 떨어지는 것을 감안하여 함수(예를 들어 로그인 API 단점)에 임의의 URL을 포장한 다음에 함수postLoginData를 명명하면 함수에 너무 많은 가치를 증가시키지 않는다.URL은 한 줄의 문자열 외에 호출자의'이야기'이어야 한다.예술가가 유화 안료, 팔레트, 붓을 가지고 있다고 가정해 보세요.예술가가 그리고자 하는 것은 예술가의 이야기일 것이다.안료와 붓의 팔레트와 집합은 테마를 지원하기 위해 변체를 제공해야 한다.너는 해양 장면을 그리는 안료 한 세트를 상상할 수 있니?이것은 현명한 것이다.지금 페인트배 어때요?그리 쉽지 않다.주제는 구체적인 내용에만 한정됩니다.
더 이상 말할 것도 없이 이곳은 첫 번째 재구성 시도이다.

const baseConfig = {
  mode: "cors",
  cache: "no-cache",
  credentials: "same-origin",
  headers: {
    "Content-Type": "application/json; charset=utf-8", 
  },
  redirect: "follow",
  referrer: "no-referrer",
};

// Configurable POST with predefined config
async function post(uri, data, config = {}) {
  config = Object.assign({
    method: "POST",
    body: JSON.stringify(data),
    ...baseConfig,
  }, config);
  return await fetch(uri, config)
}

// Configurable GET with predefined config
async function get(uri, config = {}) {
  config = Object.assign({
    method: "GET",
    ...baseConfig,
  }, config);
  return await fetch(uri, config);
}

export {get, post};

현재 중복된 설정 대상 속성을 상량baseConfig으로 재구성함으로써 더욱 뚜렷해 보인다.그 밖에 나는 모든 함수에 선택할 수 있는 parameterconfig 을 추가하여 외부에서 설정할 수 있도록 했다.Object.assign 사용자 정의 설정을 baseConfig와 통합하는 데 사용됩니다(spread 연산자도 사용할 수 있습니다).
우리는 또 물체가 운동 중에 확산되는 것을 볼 수 있다.이 점에서 나는 매우 기쁘지만, 여가 시간이 생겨서, 나는 더 많은 일을 할 수 있는지 없는지를 보기로 결정했다.이것은 마지막 시도입니다.

const baseConfig = {
  mode: "cors",
  cache: "no-cache",
  credentials: "same-origin",
  headers: {
    "Content-Type": "application/json; charset=utf-8",
  },
  redirect: "follow",
  referrer: "no-referrer",
};

const send = (method, payload) => (
  async function(uri, config) {
    // Create an array of source config objects to be merged.
    let sources = [config];
    if (method === "POST") {
      sources.push({ body: JSON.stringify(payload) });
    }
    config = Object.assign({
      method: method,
      ...baseConfig,
    }, ...sources);

    return await fetch(uri, config);
  }
);

const get = (uri, config = {}) => (
  send("GET")(uri, config)
);


const post = (uri, data, config = {}) => (
  send("POST", data)(uri, config)
);

export {get, post};

나는 개인적으로 이 버전을 가장 좋아한다. 왜냐하면 get와 post 함수는 새로 만든 send 함수에 대한 매우 얇은 포장이기 때문이다.이로 인해 후자는 디버깅의 단점이 되었다. 만약 오류가 잠시 후에도 존재한다면, 그것들은 계속 존재할 것이다.
재구성은 까다로운 업무이다. 어려운 것이 아니라 더욱 깊이 있는 디자인 사고가 필요하고 절대적인 옳고 그름이 없기 때문이다.의심할 여지없이 너는 모든 사람을 위해 준비를 하지 않을 것이다.코드를 재사용할 수 있도록 재구성하는 것은 일부 사람들을 놀라게 할 수도 있다. 특히 권력형이 수익보다 훨씬 클 때.따라서 균형은 노력이 필요하다.또 다른 요소, 예를 들어 명명약정과 함수 파라미터는 접근성을 높이는 데 도움을 줄 수 있지만 시종 어려울 것이다.그러나 결국, 당신이 먼저 자신을 위해 재구성해야 한다는 것을 기억하십시오. 왜냐하면 당신이 작성한 코드와 상호작용을 할 수 있기 때문입니다.
최초 출시 here