javascript 대상 실전 사상 공유

그동안 많은 초보 자 들 이 기초 지식 을 배 웠 는데 프로젝트 를 어떻게 하 느 냐 고 자주 물 어 봤 습 니 다.평소에 회사 에서 일 할 때 무엇 을 합 니까?사실 나 는 네가 방법 을 잘 찾 으 면 아무 사이트 나 열 어도 너의 프로젝트 라 고 말 하고 싶다.
대상 을 대상 으로 하 는 것 은 자바 script 뿐만 아니 라 다른 언어 에 도 적용 된다.
만물 은 모두 대상 이기 때문에 모든 사물 은 특징(속성)과 동작(방법)이 있 습 니 다.보통 필요 한 파일 을 얻 거나 웹 페이지 를 방문 하여 한 화면 을 볼 때 머 릿 속 에 추출 된 속성 과 방법 을 가 지 는 능력 이 있어 야 합 니 다.그러면 당신 이 합격 입 니 다.
카 트

아마 많은 사람들 이 카 트 를 타 본 적 이 있 을 것 이다.나 는 관심 을 가지 지 않 고 어떤 것 도 할 것 이다.먼저 거시적 으로 생각 한 다음 에 세부 사항 을 처리 한 다음 에 조립 하면 마치 자동 차 를 조립 하 는 이치 와 같다.예 를 들 어 위의 그림 에서 빨간색 은 속성 이 고 노란색 은 방법 이 며 속성 과 방법 을 추상 화하 면 다른 것 은 모두 죽는다.
만약 에 처음 배 운 친구 라면 이런 전역 화 된 변 수 를 함수 프로 그래 밍 이 라 고도 할 수 있 습 니 다.단점 은 복잡 하고 코드 가 불필요 하 다 는 것 입 니 다.

//    
  var name = 'macbook pro'
  var description = ''。'
  var price = 0;
  //    
  addOne:funcion(){alert('      ')},
  reduceOne:function(){alert('      ')},

  //     
  var card = ['macbook pro' ,'dell']
  var sum = 2,
  var allPrice = 22000,
  //     
  function addToCart:function(){
      alert('      ')
    }


  addToCart()

만약 단일 모델 의 사상 이 라면 이렇게 할 수 있 지만,이렇게 하 는 것 은 그다지 좋 지 않다.대상 이 너무 많 으 면 변수 가 중복 되 고 프로젝트 가 작 으 면 받 아들 일 수 있 습 니 다.

var product={
    name:'macbook pro',
    description:'',
    price:6660,
    addOne:funcion(){},
    reduceOne:function(){},
    addToCart:function(){
      alert('      ')
    }
  }

  /*   */
  var cart={
    name:'   ',
    products:[],
    allPrice:5000,
    sum:0
  }

만약 일정한 경험 이 있 는 사람 이 라면 이렇게 할 수 있 을 것 이다.

function Product(name,price,des) {
    /*                */
    this.name = name;
    this.price = price;
    this.description = des;
  }
  Product.prototype={
    addToCart:function(){
      alert('      ')
    }
    addOne:funcion(){},
    reduceOne:function(){},
     /*    */
    bindDom:function(){
    //          ，
    //  
    var str = ''
    str +='<div>   :'+this.privce+'</div>'
    return str
    },

  }

function Card(products,allPrice,sum) {
    /*                */
    this.products = products;
    this.allPrice = allPrice;
    this.sum = sum
  }
  Product.prototype={
    getAllPrice:function(){
      alert('          ')
    }
  }

여러 대상 만 들 기

//      
 var products= [
    {name:'macbook',price:21888},
    {name:'dell',price:63999}
  ]

 var str = ''
 for(var i = 0,len=products.length;i<len;i++) {
    var curName = products[i].name
    var curName = new Product()
    curName.name=products[i].name;
    curName.price=products[i].price;
    str+= curName.bindDom()
  }

위의 이러한 방식 은 결합 성 을 낮 추 었 습 니 다.어떤 언어 를 사용 하 든 그 어떠한 자바 script 프레임 워 크(템 플 릿 엔진,jquery,react 등)를 사용 하 든 위의 코드 에서 벗 어 날 수 없 는 사상 입 니 다.
다시 말 하면 현재 mvvm 의 모드,예 를 들 어 vue,그들 은 dom 를 가 져 올 필요 가 없습니다.그러면 렌 더 링 할 때 하나의 구성 요 소 를 정의 하면 됩 니 다.속성 은 모두{{}}로 정의 되 고 나머지 는 템 플 릿 을 바 꾸 면 해 결 됩 니 다.

data:{
    name ='',
    price='',
    description = ''
},
methods:{
   addToCart:function(){
      alert('      ')
    }
  addOne:funcion(){},
  reduceOne:function(){}, 
}

그리고 page 급 구성 요 소 는 이 제품 구성 요 소 를 도입 하고 이 제품 구성 요 소 를 순환 하면 됩 니 다.
구성 요소 화의 장점
코드 분류 관리
코드 선명 도
유지 보수 가 용이 하 다
문 제 를 쉽게 발견 하 다.
코드 가 독성 이 좋다
팀워크 가 용이 하 다.
물론 이 글 은 추상 적 인 사고 능력 을 단련 시 키 기 위해 서 입 니 다.자바 script 모듈 화 과정 과 도 어 울 리 지만 저 는 여러분 이 모든 웹 페이지 를 조회 할 때 이 모듈 을 분석 하 기 를 바 랍 니 다.이 모듈 을 어떻게 디자인 하 시 겠 습 니까?디 결합 과 버 전 을 교체 하여 유지 할 수 있 고 팀 개발 에 유리 합 니까?
잘못 이 있 으 면 지적 하여 바로잡아 주 십시오