js 는 어떻게 대상 을 향 한 사고방식 으로 프로그램 을 작성 합 니까

본 고 는 주로 필자 가 대상 을 대상 으로 하 는 코드 구조 에 대한 이 해 를 소개 한다.
처음에 전단 을 하 는 것 은 하나의 기능 으로 하 는 것 이다. 페이지 의 특정한 요 소 를 조작 하여 특정한 기능 을 실현 하거나 특정한 구 조 를 바탕 으로 기능 을 실현 한다. 대상 을 대상 으로 하 는 구 조 는 사용 하지 못 하거나 구조 가 이미 제시 되 었 다.그래서 js 의 대상 을 일찍부터 알 고 있 었 음 에 도 불구 하고 실천 을 거의 하지 않 았 고 전단 개발 자 들 도 사용 하지 못 했다. 왜냐하면 프레임 워 크 를 사용 하거나 다른 사람 으로 잘 만 들 었 기 때문이다. 필 자 는 전단 소 가 데 리 고 프로젝트 를 한 적 이 있 기 때문에 그 는 너 에 게 어디 에 코드 를 쓰 면 어떤 효 과 를 얻 을 수 있 고 어느 부분 이 무엇 을 하 는 지 알려 주 었 다.나의 일 을 하나의 기능 으로 간소화 하 는 것 은 매우 간단 하 다.
그리고 더욱 깊이 있 는 전단 개발 에서 예 를 들 어 js 의 도구 파일 을 만 들 려 면 예전 에 dropbox 의 sdk 선반 으로 파 우 치 도 구 를 만 들 었 는데 그 안에 잘 봉 해 져 있 고 각 모듈 도 분리 되 었 다. 그 안에 모듈 화 를 사 용 했 는데 여 기 는 모듈 문 제 를 토론 하지 않 고 가장 간단 한 대상 만 말한다.
예 를 들 어 지금 네트워크 토폴로지 그림 을 만 드 는 util 을 만 들 려 면 jtoo 프레임 워 크 를 찾 아 기본 프레임 워 크 로 삼 아야 합 니 다. 이 를 바탕 으로 많은 기능 을 실현 해 야 합 니 다.
그러면 먼저 util 대상 을 정의 합 니 다. 대상 안에 많은 기능 이 있 습 니 다. 즉, 독립 적 인 방법 입 니 다. 이런 방법 들 은 가끔 공용 데이터 나 데이터 초기 화 등 일련의 데 이 터 를 사용 해 야 하기 때문에 먼저 util. config 설정 대상 을 만 듭 니 다.

var util = {
    config : {
        times : 0,
        id : 1,
    }
}

그리고 그 안에 여러 가지 방법 이 있 습 니 다. 우 리 는 먼저 노출, 즉 외부 에 사용 하 는 방법 을 제공 하 는 것 부터 시작 하여 init 를 초기 화하 고 확대 하 며 축소 합 니 다.

var util = {
    config : {

    },
    init : function (){},
    big : function (){},
    small : function (){},
}

이런 간단 한 기능 들 은 간단 한 함수 로 해결 할 수 있 고 복잡 한 기능 들 이 있 습 니 다. 만약 에 하나의 함수 로 쓰 면 망망 한 코드 블록 이 있 습 니 다. 보 는 것 이 어 지 럽 습 니까? 대량의 코드 가 중복 되 고 수정 하 는 것 이 귀 찮 습 니 다. 프로그램 이 어디 까지 갔 는 지 한눈 에 모 르 는 것 처럼 보이 기 때문에 단독 적 이 고 공유 하 는 코드 블록 을 기본 적 인 기능 방법 으로 제시 합 니 다.기능 을 분리 할 때 는 그의 독립 행 을 확보 하여 독립 적 인 운행 과 기능 을 완성 할 수 있 도록 해 야 한다.

addNode : function(){},//    
stateForward : function(){},//          
stateBack : function(){},//          

상기 프로 그래 밍 방법의 장점 은 앞으로 새로운 기능 을 추가 해 야 한 다 는 것 입 니 다. 그 안에 addNode 와 같은 방법 은 직접 호출 할 수 있 습 니 다. 만약 에 노드 addNode 를 추가 할 때 작업 을 할 때 안에 직접 쓸 수도 있 습 니 다. bug 가 있 으 면 어떤 부분 에 문제 가 생 겼 는 지 알 고 바다 에서 바늘 찾기 코드 를 옮 겨 다 니 지 않 습 니 다. state Forward 와 같은 방법의 실현 은 여러 부분 이 있 을 것 입 니 다.필자 의 사고방식 은 그림 의 노드 가 변화 할 때마다 상태 대상 을 util. config. state 수조 에 저장 하 는 것 이다. 물론 이 안 에는 데이터 대상 으로 보 정 도 를 저장 하 는 방법 과 보 정 데 이 터 를 보 정 도로 보 여 주 는 방법 에 의존 하여 현재 의 state 위치 statePosition 속성 을 기록 하고 statePosition 에 하 나 를 추가 하 며 util. config. state 를 이용 하여[util. config. statePosition] 이 데이터 대상 은 탁본 도 를 렌 더 링 합 니 다.
이와 같은 기능 모듈 이 완성 되 었 고 절차 가 뚜렷 하 며 코드 도 전체 보다 편안 하 다.