js 의 디자인 원칙 과 프로 그래 밍 기법

10149 단어
1 설계 원칙
1.1 단일 직책 원칙 (SRP)
의미: 모든 대상 / 방법 은 하나의 직책 만 한다.
예: 단일 모드 에서 div 를 만 드 는 방법: 단일 예 를 가 져 오고 div 를 분리 하여 실현 합 니 다.
var getSingle = function(fn:Function) {
  var result:any
  return function () {
    return result || (result = fn.apply(this,arguments))
  }
}

var createDiv = function () {
  var div = document.createElement('div')
  div.innerHTML = '          div'
  document.body.appendChild(div)
  return div
}

var createSingleDiv = getSingle(createDiv)
var div1 = createSingleDiv()
var div2 = createSingleDiv()
div1 === div2 //true

좋 은 점:
  • 단일 방법 / 대상 의 복잡성 을 낮 추 었 다
  • 코드 의 재 활용 과 유닛 테스트
    • 에 유리 하 다.
  • 한 직책 이 변화 할 때 다른 직책 에 영향 을 주지 않 는 다.

    • 직책 분리 원칙:
  • 직책 간 에 서로 독립 되 고 서로 영향 을 주지 않 는 다
  • 두 직책 이 항상 동시에 변화 한다 면 분리 할 필요 가 없다
  • 함께 있 는 몇 가지 직책 이 아무런 변화 가 없 으 면 분리 할 필요 가 없다
    • 나 쁜 점:
  • 코드 의 복잡 도 증가
  • 대상 간 상호 연계 의 난이 도 를 높 였 다
    • 1.2 최소 지식 원칙 (LKP)
    의미: 하나의 소프트웨어 실 체 는 가능 한 한 다른 실체 와 상호작용 을 적 게 해 야 한다. 소프트웨어 실 체 는 대상, 유형, 모듈, 시스템, 변수, 함수 등 을 포함한다.
    예: 중개인 모드, 상점 구 매, 핸드폰 구 매, 핸드폰 의 색상, 구 매 수량, 핸드폰 메모 리 를 선택 할 수 있 습 니 다. 재고 가 충분 하면 구 매 단 추 를 클릭 할 수 있 습 니 다. 재고 가 충분 하지 않 으 면 단 추 를 클릭 할 수 없고 재고 가 부족 한 정 보 를 표시 할 수 있 습 니 다. 입력 상자 와 드 롭 다운 상자 에 사건 이 발생 했 을 때 중개인 에 게 변경 이 발생 했다 고 알려 야 합 니 다.중개인 에 게 다음 행 위 를 집행 하 게 하 다.실현: index.html
    
      : 
        : 
          : 
    
          : 

    
          : 

    
          :
    main.js 
    
var goods = { //     
  "red|32G": 3,
  "red|16G": 0,
  "blue|32G": 1,
  "blue|16G": 6
};

Function.prototype.after = function (fn) {
  var self = this;
  return function () {
    var ret = self.apply(this, arguments);
    if (ret === 'nextSuccessor') {
      return fn.apply(this, arguments);
    }
    return ret;
  }
};

var colorCheck = function (obj,color,memory,number,stock,nextBtn) {
  if (obj === colorSelect) { //              
    colorInfo.innerHTML = color;
  }
  if(!color) {
    nextBtn.disabled = true;
    nextBtn.innerHTML = '       ';
  } else {
    return 'nextSuccessor'
  }
}

var memoryCheck = function (obj,color,memory,number,stock,nextBtn) {
  if (obj === memorySelect) {
    memoryInfo.innerHTML = memory;
  }
  if(!memory) {
    nextBtn.disabled = true;
    nextBtn.innerHTML = '       ';
  } else {
    return 'nextSuccessor'
  }
}

var numCheck = function (obj,color,memory,number,stock,nextBtn) {
  if (obj === numberInput) {
    numberInfo.innerHTML = number;
  }
  if(!Number.isInteger(number - 0) || number <= 0) {
    nextBtn.disabled = true;
    nextBtn.innerHTML = '          ';
  } else if(number > stock){
    nextBtn.disabled = true;
    nextBtn.innerHTML = '    ';
  } else {
    nextBtn.disabled = false;
    nextBtn.innerHTML = '     ';
  }
}

var checkBtn = colorCheck.after(memoryCheck).after(numCheck)

var mediator = (function () {
  var colorSelect = document.getElementById('colorSelect'),
    memorySelect = document.getElementById('memorySelect'),
    numberInput = document.getElementById('numberInput'),
    colorInfo = document.getElementById('colorInfo'),
    memoryInfo = document.getElementById('memoryInfo'),
    numberInfo = document.getElementById('numberInfo'),
    nextBtn = document.getElementById('nextBtn');
  return {
    changed: function (obj) {
      var color = colorSelect.value, //   
        memory = memorySelect.value, //   
        number = numberInput.value, //   
        stock = goods[color + '|' + memory]; //               
      checkBtn(color,memory,number,stock,nextBtn)
     
    }
  }
})();


//     ：
colorSelect.onchange = function () {
  mediator.changed(this);
};
memorySelect.onchange = function () {
  mediator.changed(this);
};
numberInput.oninput = function () {
  mediator.changed(this);
};

    좋 은 점:
  • 대상 간 의존 감소
    • 원칙:
  • 대상 간 의 상호작용 을 최대한 줄 이 고 두 대상 간 에 직접 통신 할 필요 가 없다 면 제3자 대상 을 도입 하여 두 대상 간 의 통신 을 부담 할 수 있다
  • 한 대상 이 다른 대상 을 인용 해 야 할 때 대상 이 필요 한 인터페이스 만 노출 시 켜 대상 간 의 관 계 를 최소 범위 (광의)
    • 로 제한한다.
    나 쁜 점:
  • 유지 하기 어 려 울 정도 로 거대 한 제3자 대상
    • 을 증가 시 킬 수 있다.
    1.3 개방 폐쇄 원칙 (OCP)
    의미: 소프트웨어 실 체 는 확장 할 수 있어 야 하지만 수정 할 수 없습니다. 소프트웨어 실 체 는 대상, 클래스, 모듈, 시스템, 변수, 함수 등 을 포함 합 니 다.프로그램의 기능 을 수정 하거나 이 프로그램 에 새로운 기능 을 추가 해 야 할 때 코드 를 수정 하 는 방식 이 아니 라 코드 를 추가 하 는 방식 을 사용 할 수 있 습 니 다.
    예: 한 배열 을 다른 배열 로 매 핑 하 는 방법: 매 핑 절 차 는 변 하지 않 습 니 다 (순환 적 으로 옮 겨 다 니 며). 매 핑 하 는 방법 은 가 변 적 입 니 다. 매 핑 하 는 방법 을 리 셋 함수 에 넣 어 밀봉 하여 실현 합 니 다.
    var arrMap = function(arr,callback) {
  var i = 0,
    length = arr.length,
    value,
    ret = []
  for(;i

    좋 은 점:
  • 소스 코드 수정 으로 인 한 부작용 피하 기
  • 유지 보수 소스 코드 의 원 가 를 낮 춘 다
  • 시스템 의 안정 적 인 부분 과 변화 하기 쉬 운 부분 을 분리 하여 나중에 변 경 된 부분 을 교체 하 는 데 편리 하 다
    • 원칙:
  • 다 태 성 (무엇 을 하 는 지 누구 와 분리 하 는 지) 을 이용 하여 프로그램 이 변화 할 곳 을 찾아내 고 이 변 화 를 봉인 한다
  • 수정 이 불가피 한 경우 상대 적 으로 수정 하기 쉬 운 부분 을 가 급 적 수정
    • 2 프로 그래 밍 기술
    2.1 인터페이스 프로 그래 밍
    의미: 인터페이스 프로 그래 밍 은 추상 적 인 프로 그래 밍 을 대상 으로 하 는 것 이다. 관심 사 는 대상 의 유형 에서 대상 으로 이동 하 는 행위 에서 대상 의 초 유형 에 대한 추상 적 인 방법 으로 프로 그래 밍 한다.
    인 터 페 이 스 는 대상 이 응답 하 는 요청 의 집합 을 가리 키 는 동시에 일부 언어 가 제공 하 는 키 워드 를 가리킨다. 예 를 들 어 자바 의 interface 는 클래스 와 클래스 간 의 관 계 를 구축 하 는 것 을 전문 적 으로 책임 진다.
    2.1.1 추상 류
  • 차 를 우려 내 는 것 과 커피 를 우려 내 는 것 이 모두 원 료 를 물 에 붓 는 작업 을 할 때 우 리 는 차 를 우려 내 는 것 과 커피 를 우려 내 는 것 을 음료 (대상 의 다 형 성 을 나타 낸다)
    • 로 바 꿀 수 있다.
  • 음료 류 에 원 료 를 물 에 붓 는 추상 적 인 방법 을 쓰 고 음료 에서 물 려 받 은 차 와 커피 를 우려 내 는 자 류 에 원 료 를 물 에 붓 는 방법
    • 을 다시 쓰 도록 한다.
    abstract class Beverage {
  abstract operation():void
}


class Tea extends Beverage{
  operation() {
    console.log('       ')
  }
}

class Coffee  extends Beverage {
  operation() {
    console.log('       ')
  }
}

    2.1.2 인터페이스
    2.2 의 예 는 음료 수 를 하나의 인터페이스 로 추상 화 할 수 있다.
    interface Beverage {
  operation: Function
}

class Tea implements Beverage{
  operation() {
    console.log('       ')
  }
}

class Coffee implements Beverage {
  operation() {
    console.log('       ')
  }
}

    2.2 코드 재 구성
    2.2.1 추출 함수
    함수 에 큰 코드 가 독립 될 수 있다 면 이 코드 를 다른 독립 된 함수 에 넣 는 것 이 좋 습 니 다.
    예: 페이지 로 딩 이 완 료 된 후에 원형 을 만 들 고 일부 페이지 의 저작권 정 보 를 인쇄 하 는 방법: 원형 을 만 들 고 저작권 정 보 를 분리 하여 실현 합 니 다.
    window.onload = function () {
  createCircle()
  log()
}

function createCircle() {
  var canvas = document.getElementById('canvas')

  if(canvas.getContext) {
    var ctx = canvas.getContext('2d')

    ctx.fillStyle='red';
    ctx.arc(20,20,20,0,2*Math.PI)
    ctx.fill()
  }
}

function log() {
  console.log('    ')
}

    2.2.2 중복 되 는 조건 부 세 션 통합
    만약 에 모든 if else 판단 에서 같은 코드 를 실행 하면 이 코드 를 하나의 단독 함수 에 기록 하고 판단 에서 추출 하여 판단 문 이 끝 난 후에 예 를 들 수 있 습 니 다. 페이지 를 뛰 어 넘 고 현재 페이지 가 비정 수 일 때 첫 페이지 로 뛰 어 넘 을 수 있 습 니 다.현재 페이지 가 전체 페이지 보다 클 때 마지막 페이지 로 이동 합 니 다.나머지 상황 은 정상 적 인 점프 방법: 점프 페이지 를 추출 하여 판단 문 뒤에 놓 고 실현 한다.
    function paging(currPage,totalPage) {
  if(currPage <= 0) {
    currPage = 1
  } else if (currPage >= totalPage) {
    currPage = totalPage
  }
  jump(currPage)
}

    2.2.3 조건 부 분기 문 구 를 함수 로 추출
    판단 문 이 너무 길 면 이 문 구 를 함수 예 로 추출 할 수 있 습 니 다. 현재 활동 이 시작 되 었 고 사용자 가 이미 신청 을 했 거나 현재 활동 이 끝 났 을 때 사용 자 는 현재 활동 의 상세 한 상황 에서 그림 을 그 리 는 방법 을 할 수 있 습 니 다. 판단 문 구 를 실제 상황 에서 추출 할 수 있 습 니 다.
    function canPhoto (activityState,userState) {
  return (activityState === '   ' && userState === '   ') || activityState === '   '
}

function photoActivity(activityState,userState) {
  if(canPhoto(activityState,userState)) {
    doSomething()
  }
}

    2.2.4 합 리 적 인 순환
    일부 문 구 는 중복 되 는 작업 을 한다 면 작업 을 한 배열 에 넣 고 순환 예 를 들 수 있 습 니 다. XHR 대상 (IE9 이하 브 라 우 저) 을 만 드 는 방법: 대상 을 만 드 는 인 자 를 배열 에 넣 고 순환 할 수 있 습 니 다.
    var createXHR = function () {
  var versions = ['MSXML2.XMLHttp.6.0ddd', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
  for (var i = 0, version; version = versions[i++];) {
    try {
      return new ActiveXObject(version);
    } catch (e) {}
  }
};
var xhr = createXHR();

    2.2.5 내장 조건 분기 대신 함수 로 물 러 납 니 다.
    조건 이 너무 다 층 으로 묶 여 있 을 때, 이러한 조건 들 을 가능 한 한 한 한 한 층 의 조건 분기 로 분리 할 수 있 으 며, 일부 조건 분기 에 들 어 갈 때, 함 수 를 즉시 종료 시 킬 수 있다.
    2.2.6 전달 대상 매개 변수 가 너무 긴 매개 변수 목록 을 대체 합 니 다.
    매개 변수 목록 이 너무 길 면 매개 변 수 를 대상 에 넣 는 것 을 고려 할 수 있 습 니 다. 매개 변수의 수량 과 순 서 를 걱정 하지 않 아 도 됩 니 다.
    예 를 들 어 파일 을 선별 할 때 저 희 는 파일 의 생 성 시간, 수정 시간, 유형, 작성 자, 키워드, 다운로드 량 등 정 보 를 통 해 선별 할 수 있 습 니 다. 이 매개 변 수 를 파일 의 대상 에 놓 을 수 있 습 니 다.
    2.2.7 매개 변수 수량 최소 화
    어떤 매개 변 수 는 내부 계산 을 통 해 얻 을 수 있 으 며, 이러한 매개 변 수 를 최대한 줄 이 고 함수 내부 에서 직접 계산 을 통 해 얻 을 수 있다.
    예 를 들 어 정사각형 을 그 릴 때 들 어 오 는 매개 변 수 는 너비, 높이 와 면적 이 있 지만 면적 은 너비 와 높이 로 연산 할 수 있 기 때문에 들 어 오 는 매개 변수 에서 면적 이라는 매개 변 수 를 없 앨 수 있다.
    2.2.8 세 개의 연산 자 를 적 게 사용한다.
    세 개의 연산 자 는 코드 의 가 독성 과 유지 가능성 을 증가 시 켰 으 나 생략 된 코드 량 은 무시 합 니 다.
    a === b ? a : b === doc ? b : doc === 'text' ? doc : null

    2.2.9 체인 호출 을 합 리 적 으로 활용 한다.
    체인 호출 은 디 버 깅 할 때 매우 불편 합 니 다. 체인 에 오류 가 발생 하면 이 체인 을 모두 분해 하고 debugger 와 일부 console 를 더 해 야 잘못된 위 치 를 찾 을 수 있 습 니 다.
    체인 호출 은 jquery 를 참고 할 수 있 습 니 다.
    2.2.10 분해 유형
    큰 종류의 행 위 를 입도 가 더 가 는 대상 으로 분해 하 다.
    2.2.11 return 으로 다 중 순환 종료
    다 중 순환 을 중지 해 야 할 때 전체 방법 을 종료 하고 중단 후 실행 할 함수 나 코드 를 return 뒤에 두 십시오.
    예: 15 를 더 한 10 보다 작은 두 가지 방법 을 찾 습 니 다. 이중 순환 실현:
    for(var i = 0; i < 10; i ++ ) {
  for(var j = 0; j < 10; j ++) {
    if( i + j === 15) {
      return console.log(i,j)
    }
  }
}
    CS 워크숍 003 자동 단어 수신
    MyEclipse 주석 템플릿

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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