JavaScript 객체를 사용하여 프로젝트를 구성합니다.

안녕, 세상!본문은 프로젝트 템플릿이다.완전한 항목인 것 같지만, 자바스크립트 (즉 HTML이나 CSS가 없음) 일 뿐입니다.
나는 자바스크립트의 대상과 클래스를 좋아하지 않는다. 내가 기본 원리를 이해하지 못하기 때문이 아니라, 함수식 프로그래밍이 더욱 간단한 방법이라고 생각하기 때문에 나는 별로 걱정할 필요가 없다고 생각한다.이것들은 모두 나의 오랜 생각이다. 지금까지 나의 모든 프로젝트는 함수식 프로그래밍이었지만CodeCademy의JavaScript 과정을 배울 때;나는 대상 프로그래밍에 대한 나의 열정을 발견했다. 특히 Getter와setter를 사용하면 더욱 간단하다고 생각한다.
그래서 내가 자바스크립트 대상 모듈을 완성한 후에 그들(Code Cademy)은 프로젝트, 즉 식기를 구축할 것이다.나는 자유로운 사용자로 접근할 수 없지만, 프로젝트를 만드는 목적, 즉 현실 프로젝트에서 Getter와setter를 사용하는 것을 이해한다.
한 가지 문제가 있다. 나는 밥을 하는 사람이 무엇을 하는지 모르고 보통 어떻게 일을 하는지 모른다. 그러나 나는'능수'와'세터'를 연습하는 것이 좋은 생각이다.예약 응용.너무 좋아요, 그렇죠?네, 알고 있습니다. 그래서 그것은 단지 상업 사용자가 있는 사람을 위해 예약한 것일 뿐입니다.
만약 내가 Elon Musk라고 가정한다면, 나는 이 앱으로 계정을 만들 수 있다. 이렇게 하면 다른 사용자들이 나와 예약할 수 있다.
현재, Elon Musk는 유일하게 비즈니스 계정을 가진 사용자가 아닙니다. 우리는 클래스가 아닌 공장 함수를 사용하여 우리가 원하는 모든 비즈니스 계정을 복제하고 보유할 것입니다.
이 앱은 기본일 수도 있지만 예약 앱을 만드는 데 어려움을 겪는 모든 부분을 포함하고 있다.본 논문의 목적은 예약 프로그램을 만드는 방법 중 하나를 보여주는 것이 아니라 Getter와 Setter가 이런 프로젝트에서 어떻게 편리하는지 보여주는 것입니다.
만약 자바스크립트의 Getter와setter나 자바스크립트의 대상을 모른다면, 나는 네가 가서 보는 것을 건의한다. CodeCademy's JS Objects Course
충분히 썼으니 인코딩을 시작합시다.전체 코드를 아래로 스크롤하거나, 액세스만 하면 됩니다. GitHub for the code

// alert: am tired of using John Doe, i wanna use Elon Musk
const elonMusk = {
  _hoursfree: [10, 12, 9], // currently hard-coded, but will change in time
};

_ 속성 앞에 밑줄(hoursFree을 친 이유는 내가 일부러 그것을 직접 방문하고 싶지 않았기 때문이다.프로그래머는 이 점을 알고 견지해야 한다.Elon Musk에 액세스할 여유 시간이 필요하므로 JavaScript를 사용하여 프로그램을 가져옵니다.

const elonMusk = {
  _hoursFree: [10, 12, 9],

  get hoursFree() {
    return this._hoursFree; // can now be accessed legitimately
  },
};

지금 저희가 ElonMusk 대상에게 더 많은 속성을 추가하고 싶어요.

const elonMusk = {
  _hoursFree: [10, 12, 9],
  acceptedPurpose: 'any',
  pendingMeetongs: [], // meetings yet to be approved by Elon Musk
  declinedMeetings: [], // meetings not approved by Elon Musk
  approvedMeetings: [], // meetings approved by Elon Musk
  canceledMeetings: [], // meetings already approved but later canceled maybe something came up
  _feedback: '', // feedback to the booking user (user making the booking)

  get hoursFree() {
    return this._hoursFree;
  },

  get feedBack() {
    return this._feedback); // simply return a feedback
  },
};

acceptedPurpose 부동산은 엘론 머스크가 받아들이고자 하는 현재의 목적을 대표할 뿐이다.예를 들어 응용 프로그램의 디자인에 회의의 목적이 포함되어 있어 상황에 따라 매주 또는 매일 설정할 수 있다.엘론 머스크 지음.비즈니스, 홈, 엔터테인먼트 또는 기타 어플리케이션에서 제공하는 acceptedPurpose 옵션을 가정합니다.
그래서 지금 우리는 엘론 머스크가 비즈니스 회의든 오락 회의든 가정 회의든 어떤 종류의 회의에 참가할 수 있다고 가정한다.현재의 하드 인코딩은 나중에 변경될 것입니다.
이제 setter를 사용하기 시작합시다.만약 우리가 엘론 머스크와의 만남을 예약하고 싶다면, 우리는 어떻게 할 것인가

  // still in the elonMusk object, just under the feedBack getter
  set newMeeting(time) {
    if (this._hoursFree.indexOf(time) !== -1) {
      this.pendingMeetings.push(time);
      this._feedback =
        'Your meeting was sent successfully. Elon Musk can now review and approve or decline';
    } else {
      this._feedback = 'Time not suitable for Elon Musk';
    }
  },

// outside of the elonMusk object
elonMusk.newMeeting = 10
console.log(elonMusk.feedBack)

이것은 매우 기본적인 것이다. 아직 회의를 안배해야 할 일이 더 많으니, 우리는 계속 토론할 것이다.우선 분석해 봅시다.

사용자가 제공한 시간과 그가 제공한 여가 시간을 비교함으로써 사용자가 제공한 시간이 Elon Musk에 적합한지 확인합니다.

사실이라면 pendingMeetings 그룹에 시간을 추가합니다.그리고 피드백을 주었다.

만약 가짜라면 저희는 이 예약을 진행하는 사용자에게 피드백을 돌려주기만 하면 됩니다.

회의는 시간만 포함해서는 안 된다. 엘론 머스크는 당연히 이번 회의에 대한 정보를 더 필요로 한다. 즉,

모임을 만들려면 다음과 같이 하십시오.

// still in the elonMusk object, just under the feedBack getter
  set newMeeting(meeting) {
    const { name, time, purpose } = meeting;

    if (
      this._hoursFree.indexOf(time) !== -1 &&
      this.acceptedPurpose === 'any'
    ) {
      this.pendingMeetings.push(meeting);

      this._feedback = `${name}, your meeting was sent successfully. Elon Musk can now review and approve or decline`;
    } else if (this.acceptedPurpose === purpose.toLowerCase()) {
      this.pendingMeetings.push(meeting);

      this._feedback = `${name}, your meeting was sent successfully. Elon Musk can now review and approve or decline`;
    } else {
      this._feedback = `${name}, this meeting is not suitable for Elon Musk`;
    }
  },
  }

// outside of the elonMusk object
const clientMeeting = {id: 10, name: 'Bill Gates', time: 10, purpose: 'fun'};

elonMusk.newMeeting = clientMeeting;
console.log(elonMusk.feedBack);

우리는 단지 그것을 좀 맵게 할 뿐이니 이해하기 어렵지 않을 것이다.우리는 회의 대상을 구성하기 위해 id, 이름, 시간 목적을 포함한다.
다음 조건이 충족되면 회의가 성공적으로 전송됩니다.

예약 사용자의 만남 시간이 acceptedPurpose 엘론뮤직 그룹 중 하나라면 엘론뮤직hoursFree의any로 설정합니다.

엘론뮤직acceptedPurpose은 예약자

가 제공한 용도와 비슷하다
이제 회의를 승인, 거부 및 취소합니다.

승인 회의:

// still in the elonMusk object, right under the newMeeting
  set approveMeeting(id) {
    const previewingMeeting = this.pendingMeetings.filter((meeting) => {
      return meeting.id === id; // filter out a meeting with its id and preview
    })[0];

    // approve previewing meeting and mark the previewingMeeting.time as a booked hour
    this.approvedMeetings.push(previewingMeeting); // note that approvedMeetings with a 'd' is the array while approveMeeting without a 'd' is the setter
    this._hoursFree.splice(this._hoursFree.indexOf(previewingMeeting.time), 1);

    this._feedback = `${previewingMeeting.name}, your meeting has been approved, time of meeting: ${previewingMeeting.time}`;
  },

// outside the elonMusk object;
elonMusk.newMeeting = clientMeeting //clientMeeting already declared before, scroll up
elonMusk.approveMeeting = clientMeeting.id;
console.log(elonMusk.feedBack);

approveMeetingsetter는 아무런 조건문구도 없다. 왜냐하면 이 점에 직접 도달해야 한다는 뜻이기 때문이다.회의를 승인합니다.따라서 Elon이 클릭할 때 회의가 승인되어 approvedMeetings 배열로 전송되는 승인 회의 버튼 덕분입니다.
만약 회의가 비준을 얻게 된다면, 그것은 엘론 머스크의 특정 시간이 이미 예약되었다는 것을 의미한다.이를 위해 우리는 특정 시간에 두 번 또는 두 번 이상의 회의가 안배되지 않도록 예정된 시간을 취소하도록 노력해야 한다.그래서 우리는 이 시간을 없애기 위해 조립 방법을 사용했다.콘솔에 현재hoursFree를 기록하여 결과를 볼 수 있습니다console.log(elonMusk.hoursFree).

모임 거부:

// still in the elonMusk object, right under the approveMeeting
  set declineMeeting(id) {
    const previewingMeeting = this.pendingMeetings.filter((meeting) => {
      return meeting.id === id; // filter out a meeting with its id and preview
    })[0];


    this.declinedMeetings.push(previewingMeeting); // note that declinedMeetings with a 'd' is the array while declineMeeting without a 'd' is the setter

    this._feedback = `${previewingMeeting.name}, your meeting was declined for reasons best known to Elon Musk`;
  },

// outside the elonMusk object;
elonMusk.newMeeting = clientMeeting //clientMeeting already declared before, scroll up
elonMusk.declineMeeting = clientMeeting.id;
console.log(elonMusk.feedBack);

주의해야 할 것은 delineMeeting setter는 엘론 머스크(Elon Musk)의 수동 체감이며, 자동 체감은 pendingBookings 그룹에 추가되지 않았다는 것이다.다시 말해 pendingBookings 배열에 추가된 가입은 비즈니스 계정 소유자(Elon Musk now)의 승인이 필요한 가입입니다.hoursFree 수조와 acceptedPurpose 문자열에 제공된 시간이나 목적이 엘론 사향에 적합하지 않을 때 자동으로 감소합니다.

회의를 취소하려면 다음과 같이 하십시오.

// still in the elonMusk object, right under the declineMeeting
    set cancelMeeting(id) {
    // the meeting has to be approved first
    const previewingMeeting = this.approvedMeetings.filter((meeting) => {
      return meeting.id === id;
    })[0];

    this._hoursFree.push(previewingMeeting.time); // make the hour of the canceled meeting a free hour
    this.canceledMeetings.push(previewingMeeting); // add canceled meeting to the array of canceled meetings
    this.approvedMeetings.splice(previewingMeeting, 1); // remove canceled meeting from approved meeting array

    this._feedback = `${previewingMeeting.name}, your meeting with Elon Musk scheduled at ${previewingMeeting.time} has been canceled by Elon Musk. Don't ask me why? am not Elon Musk.`;
  },

// outside the elonMusk object
elonMusk.newMeeting = clientMeeting; //clientMeeting already declared above
elonMusk.approveMeeting = clientMeeting.id; // approve meeting first
elonMusk.cancelMeeting = clientMeeting.id;
console.log(elonMusk.feedBack);

아주 간단합니다.setter를 추가해서 hoursFree 그룹에서 여가 시간을 삭제할 수 있습니다.회의가 취소되면 예약된 시간은 자동으로 유휴 시간으로 간주됩니다.그러나 엘론 머스크가 그 시간을 더 이상 자유롭게 하고 싶지 않다면, 그는 단추 하나만 누르면 그 시간의 자유를 취소할 수 있다.

유휴 시간 취소 요청:

// still in the elonMusk object, right under the cancelMeeting
  set requestHourCancelation(hr) {
    if (this._hoursFree.indexOf(hr) !== -1) {
      this._hoursFree.splice(this._hoursFree.indexOf(hr), 1);
    }
  }

// outside of the elonMusk object
elonMusk.requestHourCancelation = 10;
console.log(elonMusk.hoursFree);

Elon Musk 가입 객체:

const elonMusk = {
  _hoursFree: [10, 12, 9],
  acceptedPurpose: 'family',
  pendingMeetings: [], // meetings yet to be approved by Elon Musk
  declinedMeetings: [], // meetings not approved by Elon Musk
  approvedMeetings: [], // meetings approved by Elon Musk
  canceledMeetings: [], // meetings already approved but later canceled maybe something came up
  _feedback: '', // feedback to the booking user (user making the booking)

  get hoursFree() {
    return this._hoursFree;
  },

  get feedBack() {
    this._feedback; // simply return a feedback.
  },

  set newMeeting(meeting) {
    const { name, time, purpose } = meeting;

    if (
      this._hoursFree.indexOf(time) !== -1 &&
      this.acceptedPurpose === 'any'
    ) {
      this.pendingMeetings.push(meeting);

      this._feedback = `${name}, your meeting was sent successfully. Elon Musk can now review and approve or decline`;
    } else if (this.acceptedPurpose === purpose.toLowerCase()) {
      this.pendingMeetings.push(meeting);

      this._feedback = `${name}, your meeting was sent successfully. Elon Musk can now review and approve or decline`;
    } else {
      this._feedback = `${name}, this meeting is not suitable for Elon Musk`;
    }
  },

  set approveMeeting(id) {
    const previewingMeeting = this.pendingMeetings.filter((meeting) => {
      return meeting.id === id;
    })[0];

    // approve previewing meeting and mark the previewingMeeting.time as a booked hour
    this.approvedMeetings.push(previewingMeeting); // note that approvedMeetings is the array while approveMeeting is the setter
    this._hoursFree.splice(this._hoursFree.indexOf(previewingMeeting.time), 1);

    this._feedback = `${previewingMeeting.name}, your meeting has been approved, time of meeting: ${previewingMeeting.time}`;
  },

  set declineMeeting(id) {
    const previewingMeeting = this.pendingMeetings.filter((meeting) => {
      return meeting.id === id;
    })[0];

    this.declinedMeetings.push(previewingMeeting); // note that declinedMeetings is the array while declineMeeting is the setter

    this._feedback = `${previewingMeeting.name}, your meeting was declined for reasons best known to Elon Musk`;
  },

  set cancelMeeting(id) {
    // the meeting has to be approved first
    const previewingMeeting = this.approvedMeetings.filter((meeting) => {
      return meeting.id === id;
    })[0];

    this._hoursFree.push(previewingMeeting.time); // make the hour of the canceled meeting a free hour
    this.canceledMeetings.push(previewingMeeting); // add canceled meeting to the array of canceled meetings
    this.approvedMeetings.splice(previewingMeeting, 1); // remove canceled meeting from approved meeting array

    this._feedback = `${previewingMeeting.name}, your meeting with Elon Musk scheduled at ${previewingMeeting.time} has been canceled by Elon Musk. Don't ask me why? am not Elon Musk.`;
  },

  set requestHourCancelation(hr) {
    if (this._hoursFree.indexOf(hr) !== -1) {
      this._hoursFree.splice(this._hoursFree.indexOf(hr), 1);
    }
  },
};

여러 엔터프라이즈 소유주:
만약 우리가 빌 게이츠에게 그의 상업 계좌를 가지게 하고 싶다면, 아마도 래리 페치도 있을 것이다. 우리는 elonMusk 대상의 코드를 복사해서 붙일 필요가 없다.필요 없어요.elonMusk 대상 중의 Getter와setter는 다른 대상과 유사하기 때문에 (당연히 그래야 한다) 모든 사용자에게 실례를 만들 수 있습니다.
일반적으로, 이것은 자바스크립트 클래스를 통해 실현할 수 있지만, 우리는 여기서 클래스를 사용하지 않고, 내가 최근에 Codecademy에서 배운 공장 함수를 사용합니다.일반 도메인 이름 형식.
이렇게 하는 거야.

// make a function and return all properties, getters and setters in the elonMusk object
function businessUser(businessName, _hoursFree, acceptedPurpose) {
  // the three parameters above are properties of this object that are going to vary with different business users
  return {
    businessName,
    _hoursFree,
    acceptedPurpose,
    pendingMeetings: [], // meetings yet to be approved by Elon Musk
    declinedMeetings: [], // meetings not approved by Elon Musk
    approvedMeetings: [], // meetings approved by Elon Musk
    canceledMeetings: [], // meetings already approved but later canceled maybe something came up
    _feedback: '', // feedback to the booking user (user making the booking)

    get hoursFree() {
      return this._hoursFree;
    },

    get feedBack() {
      this._feedback; // simply return a feedback.
    },

    set newMeeting(meeting) {
      const { name, time, purpose } = meeting;

      if (
        this._hoursFree.indexOf(time) !== -1 &&
        this.acceptedPurpose === 'any'
      ) {
        this.pendingMeetings.push(meeting);

        this._feedback = `${name}, your meeting was sent successfully. ${this.businessName} can now review and approve or decline`;
      } else if (this.acceptedPurpose === purpose.toLowerCase()) {
        this.pendingMeetings.push(meeting);

        this._feedback = `${name}, your meeting was sent successfully. ${this.businessName} can now review and approve or decline`;
      } else {
        this._feedback = `${name}, this meeting is not suitable for ${this.businessName}`;
      }
    },

    set approveMeeting(id) {
      const previewingMeeting = this.pendingMeetings.filter((meeting) => {
        return meeting.id === id;
      })[0];

      // approve previewing meeting and mark the previewingMeeting.time as a booked hour
      this.approvedMeetings.push(previewingMeeting); // note that approvedMeetings is the array while approveMeeting is the setter
      this._hoursFree.splice(
        this._hoursFree.indexOf(previewingMeeting.time),
        1
      );

      this._feedback = `${previewingMeeting.name}, your meeting has been approved, time of meeting: ${previewingMeeting.time}`;
    },

    set declineMeeting(id) {
      const previewingMeeting = this.pendingMeetings.filter((meeting) => {
        return meeting.id === id;
      })[0];

      this.declinedMeetings.push(previewingMeeting); // note that declinedMeetings is the array while declineMeeting is the setter

      this._feedback = `${previewingMeeting.name}, your meeting was declined for reasons best known to ${this.businessName}`;
    },

    set cancelMeeting(id) {
      // the meeting has to be approved first
      const previewingMeeting = this.approvedMeetings.filter((meeting) => {
        return meeting.id === id;
      })[0];

      this._hoursFree.push(previewingMeeting.time); // make the hour of the canceled meeting a free hour
      this.canceledMeetings.push(previewingMeeting); // add canceled meeting to the array of canceled meetings
      this.approvedMeetings.splice(previewingMeeting, 1); // remove canceled meeting from approved meeting array

      this._feedback = `${previewingMeeting.name}, your meeting with ${this.businessName} scheduled at ${previewingMeeting.time} has been canceled by ${this.businessName}. Don't ask me why? am not ${this.businessName}.`;
    },

    set requestHourCancelation(hr) {
      if (this._hoursFree.indexOf(hr) !== -1) {
        this._hoursFree.splice(this._hoursFree.indexOf(hr), 1);
      }
    },
  };
}

비즈니스 User 함수의 모든 내용은 우리가 100만 개의 정상적인 업무 계정을 만드는 데 필요한 것이다.세 개의 속성을 만들고 접근해 봅시다

const larryPage = businessUser('Larry Page', [15, 12, 9], 'any');
console.log(larryPage.hoursFree);
const willSmith = businessUser('Will Smith', [9, 10], 'fun');
console.log(willSmith.hoursFree);
const billGates = businessUser(
  'Bill Gates',
  [11, 10, 9, 8, 7, 6, 5, 4, 3, 2],
  'any'
); // Mr. Gates is always free.
console.log(billGates.hoursFree);

GitHub에서 코드를 가져옵니다Building a Project with JavaScript Objects.별을 남기는 것을 잊지 마라.

결론
중요한 것은 위의 모든 setter는 방법으로 바꿀 수 있고, 여전히 일을 잘 할 수 있다는 것이다. 그러나 우리가 setter에 관심을 가지기 때문에 우리는 그것을 계속 사용해도 무방하다.다음 글에서 JavaScript 클래스와 방법을 사용하여 라이브러리를 만들려고 합니다. 라이브러리는 본문과 완전히 다르고 본문보다 더 고급스럽고 재미있습니다.재미있을 거야.
나는 네가 나처럼 많은 것을 배울 수 있기를 바란다.개발자로서 당신에게 아주 좋은 프로젝트가 곧 다가올 것이니 주의하세요.읽어 주셔서 감사합니다. 만약 불평이나 이야기가 있다면, 아래에 당신의 평론을 남기는 것도 잊지 말고, 동료와 공유하는 것도 잊지 마세요.만약 네가 나를 지지하고 싶다면, 너는 할 수 있다 buy me a coffee.고맙습니다.