ES2015+에서 객체 지향 운동

17766 단어 객체 지향ES2015+자바스크립트es6ECMAScript6

소개



객체 지향 운동 규칙(ES2015+용으로 일부 변경)



「오브젝트 지향 운동」은, 9개의 룰로 되어 있습니다만, ES2015+용으로 일부 제약을 풀고 있습니다.
  • 하나의 메소드에 대해 들여 쓰기는 1 단계까지로 한다
  • else 절을 ​​사용하지 마십시오
  • 모든 원시형과 캐릭터 라인형을 랩 하는 것
  • 1행에 대해 도트는 1개까지로 하는 것
    => (ES2015+용 추기) 단, this의 뒤의 도트는 카운트하지 않는다
  • 이름 생략
  • 모든 엔티티를 작게 한다.
  • 한 클래스에 대해 인스턴스 변수는 최대 2 개까지 있어야합니다
  • 퍼스트 클래스 컬렉션 사용
  • Getter, Setter, 속성을 사용하지 마십시오

    • 사용할 소재



    점 설치 자바스크립트로 오미쿠지 만들기 프로그램을 기반으로 합니다.

    동작 개요



    브라우저에서 처음 아래와 같은 화면이 표시됩니다.


    원 안을 클릭하면 오미쿠지 결과가 표시됩니다.


    오미쿠지는 난수를 사용하여 무작위로 표시됩니다.

    소스 파일 구성



    소스 파일의 구성은 다음과 같이 간단합니다.


    객체 지향 운동 (ES2015 + 버전) 적용



    사양의 변경 내용



    기본적으로는, 도트 인스톨판과 같은 사양입니다만, 복권의 종류 마다 맞는 확률이 변화하도록(듯이) 「중량」을 붙이고 있습니다.
    예를 들어 '나카요시'는 무게 '높음', '다이요시'는 무게 '낮음'으로, 다이요시가 나올 확률이 낮아집니다.

    운영 환경



    도트 설치판에서는 브라우저상에서 서버 없이 동작하고 있었지만, 객체 지향판에서는 서버상에서 동작시킬 필요가 있습니다.
    이유는 ES2015+의 모듈을 사용하고 있어, 그것을 사용하는 경우는 크로스 도메인 제약에 걸려 버리기 때문입니다.
    다음과 같은 환경에서 작동했습니다.
    Google 크롬 69
    node.js http-server

    운동 후 소스 파일 구성




    OmikujiBox.js와 OmikujiButton.js를 모듈화하여 별도의 파일로 만들었습니다. 이것은 "6. 모든 엔티티를 줄이기"를 적용한 결과입니다.

    운동 후 소스 파일 내용



    index.html
    <!DOCTYPE html>
<html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>おみくじ</title>
    <link rel="stylesheet" href="css/styles.css">
    </html>
    <body>
        <div id="button">?</div>
        <script type="module" src="js/main.js"></script>
    </body>
</html>

    ES 모듈을 사용하기 위해 script 태그에 type="module"을 추가했습니다.

    변경 전
    <script src="js/main.js"></script>

    변경 후
    <script type="module" src="js/main.js"></script>

    css/style.css



    아무것도 변하지 않기 때문에 할애합니다.

    js/main.js



    main.js
    import OmikujiButton from './OmikujiButton.js';
import OmikujiBox from './OmikujiBox.js';

const KUJI_WEIGHT = {
    LOW: 1,
    MIDDLE: 3,
    HIGH: 5
}
class KujiName {
    constructor(name) {
        this.name = name;
    }
    toString() {
        return this.name;
    }
}
class Kuji {
    constructor(name, weight) {
        this.name = name;
        this.weight = weight;
    }
}

(()　=> {
    'use strict';
    const omikujiBox = new OmikujiBox();
    const kujis = [
        {name: '小吉', weight: KUJI_WEIGHT.MIDDLE},
        {name: '中吉', weight: KUJI_WEIGHT.HIGH},
        {name: '末吉', weight: KUJI_WEIGHT.MIDDLE},
        {name: '大吉', weight: KUJI_WEIGHT.LOW},
        {name: '凶', weight: KUJI_WEIGHT.LOW},
    ].forEach((element) => {
        const kujiName = new KujiName(element.name);
        const kuji = new Kuji(kujiName, element.weight);
        omikujiBox.add(kuji);
    })
    const button = new OmikujiButton(omikujiBox);
})();

    js/OmikujiBox.js



    OmikujiBox.js
    export default class {
    constructor() {
        this.kujis = [];
    }
    sumOfWeight() {
        let sumOfWeight = 0;
        this.kujis.forEach(function(element) {
            let kuji = element.kuji;
            sumOfWeight += kuji.weight;
        });
        return sumOfWeight;
    }
    add(kuji) {
        this.kujis.push({"kuji": kuji});
    }
    draw() {
        let randomValue = Math.random();
        const sumOfWeight = this.sumOfWeight();
        let upperRange = 0;
        const hitElement = this.kujis.find(function(element) {
            let kuji = element.kuji;
            upperRange += (kuji.weight / sumOfWeight);
            return randomValue < upperRange;
        });
        if (hitElement) {
            let kuji = hitElement.kuji;
            return kuji.name;
        }
        return "ハズレ";// 基本的にはありえないルート
    }
}

    js/OmikujiButton.js



    OmikujiButton.js
    export default class {
        constructor(omikujiBox) {
        this.button = document.getElementById('button');
        this.button.addEventListener('click', () => {
            const kujiName = omikujiBox.draw();
            const kujiNameString = kujiName.toString();
            this.button.textContent = kujiNameString;
        });

        button.addEventListener('mousedown', () => {
            this.className = 'pushed';
        })
        button.addEventListener('mouseup', () => {
            this.className = '';
        })
    }
}

    마지막으로



    JavaScript에서 Java와 같은 클래스 기반 객체 지향을 사용할 수있게되었습니다. 이것은, 오브젝트 지향을 배우는 문턱이 낮아졌다고 하는 것으로, 매우 환영해야 할 일이라고 생각합니다.

    객체 지향 운동은 익숙하지 않으면 매우 시간이 걸립니다. 도트 인스톨판의 소스로부터 리팩토링하면서 서서히 9개의 룰을 적용해 갔습니다만, 도트 인스톨판의 소스를 제로로부터 만드는 것보다 십배는 시간이 걸렸다고 생각합니다. 그러나 이것도 익숙해지면 더 속도가 올라갈 것입니다. 운동과 같고 반복하는 것으로 몸에 익히는 것이군요. 그러니까 「연습」이라고 하는 것인가! 배고프다.
    Vue.js의 v-for로 분할 할당
    세계에서 가장 간단한 서버 측 노드로 ES6을 시작하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage