JS 디자인 모드 의 데이터 액세스 대상 모드 의 실례 설명

머리말
HTML 5 는 클 라 이언 트 에 데 이 터 를 저장 하 는 두 가지 새로운 방법 을 제공 합 니 다.localStorage,sessionStorage 는 웹 Storage API 가 제공 하 는 두 가지 저장 체제 로 전 자 는 영구적 인 저장 에 속 하고 후 자 는 현재 창의 데이터 전달 에 국한 되 며 그 안에 저 장 된 데 이 터 는 현재 세 션 이 끝 날 때 삭 제 됩 니 다.localStorage,sessionStorage 의 구체 적 인 내용 은 여기 서 더 이상 소개 하지 않 겠 습 니 다.우 리 는 주로 실제 개발 에서 그들 을 어떻게 합 리 적 으로 사용 하 는 지 토론 합 니 다.
문제.
대부분의 사 이 트 는 일부 데이터(예 를 들 어 사용자 Token)를 전단 에 저장 하여 페이지 간 의 전 가 를 실현 한다.일부 대형 웹 응용 에 있어 저 장 된 데이터 가 매우 많 고 데이터 관리 가 복잡 해 질 수 있 으 며 하나의 대형 프로젝트 는 여러 명의 프로그래머 가 공동으로 개발 한 것 이다.이 럴 때 문제 가 생 긴 다.자신의 데이터 가 다른 사람 을 덮어 쓰 지 않도록 어떻게 확보 할 것 인가?한 페이지 에서 모두 가 같은 WebStorage 대상 을 사용 하기 때문에 모두 가 사 용 했 던 Key 를 기록 할 수 는 없 잖 아 요.이 럴 때 데이터 액세스 대상 모드 로 해결 할 수 있 습 니 다.
데이터 액세스 대상 모드(DAO)
데이터 액세스 대상 모드 는 데이터 원본 의 접근 과 저장 을 봉인 하고 데이터 액세스 대상 클래스 를 제공 하여 저 장 된 데 이 터 를 관리 하고 조작 하 며 데이터 저장 형식 을 규범화 하 며 백 엔 드 의 DAO 층 과 유사 합 니 다.
WebStorage 는 Key-Value 방식 으로 데 이 터 를 액세스 하고 문자열 만 저장 할 수 있 기 때문에(모든 유형 이 저 장 될 때 문자열 로 전환 되 고 읽 을 때 형식 변환 이 필요 합 니 다)우 리 는 Key 의 형식 을 규범화 할 수 있 습 니 다.예 를 들 어 모듈 명+Key,개발 자+Key 등 값 에 접 두 사 를 추가 하여 데 이 터 를 설명 할 수 있 습 니 다.데이터 만 료 날짜 의 시간 스탬프 를 추가 하면 데이터 의 생명 주 기 를 관리 할 수 있 습 니 다.구체 적 인 형식 프로젝트 그룹 은 스스로 정의 할 수 있 는데 주로 관리 하기 편리 하고 충돌 을 방지 하 며 규범 을 정 한 후에 데이터 방문 대상 을 정의 할 수 있 습 니 다.
다음은 localstorage 를 예 로 들 어 데이터 액세스 대상 클래스 의 정의 와 사용 을 소개 합 니 다.
코드 예제
DAO 류 기본 구조
데이터 액세스 대상 클래스 의 기본 구 조 는 다음 과 같 습 니 다.우 리 는 키 값 충돌 을 피하 기 위해 접 두 사 를 추가 하 였 으 며,값 에 데이터 만 료 시간 스탬프 와 구분자 를 추가 하여 값 을 가 져 올 때 만 료 여 부 를 판단 하여 저장 수의 생명 주 기 를 더욱 유연 하 게 관리 할 수 있 습 니 다.데이터 접근 과정의 구체 적 인 결 과 를 쉽게 얻 고 필요 할 때 관련 작업 을 수행 할 수 있 도록 리 셋 방식 도 사용 했다.

/**
 * LocalStorage     
 * @param {string} prefix Key  
 * @param {string} timeSplit               
 */
var Dao = function (prefix, timeSplit) {
  this.prefix = prefix;
  this.timeSplit = timeSplit || '|-|';
}
// LocalStorage         
Dao.prototype = {
  //     
  status: {
    SUCCESS: 0,   //   
    FAILURE: 1,   //   
    OVERFLOW: 2,  //   
    TIMEOUT: 3   //   
  },
  //       
  storage: localStorage || window.localStorage,
  //           
  getKey: function (key) {
    return this.prefix + key;
  },
  //   （  ）  
  set: function (key, value, callback, time) {
    ...
  },
  //     
  get: function (key, callback) {
    ...
  },
  //     
  remove: function (key, callback) {
    ...
  }
}

데이터 추가

/**
  *   （  ）  
  * @param key       
  * @param value    
  * @param callback     
  * @param time     
  */
  set: function (key, value, callback, time) {
    //        
    var status = this.status.SUCCESS,
      key = this.getKey(key);
    try {
      //        
      time = new Date(time).getTime() || time.getTime();
    } catch (e) {
      //               
      time = new Date().getTime() + 1000 * 60 * 60 * 24 * 30;
    }
    try {
      //         （  ）  
      this.storage.setItem(key, time + this.timeSplit + value);
    } catch (e) {
      //     
      status = this.status.OVERFLOW;
    }
    //          
    callback && callback.call(this, status, key, value);
  }

데이터 가 져 오기

/**
  *     
  * @param key       
  * @param callback     
  */
  get: function (key, callback) {
    var key = this.getKey(key),
      status = this.status.SUCCESS,  //       
      value = null;  //      

    try {
      //          
      value = this.storage.getItem(key);
    } catch (e) {
      //       
      status = this.status.FAILURE;
      value = null;
    }

    //         
    if (status !== this.status.FAILURE) {
      var index = value.indexOf(this.timeSplit),
        timeSplitLen = this.timeSplit.length,
        //      
        time = value.slice(0, index);
      //          
      if (new Date(1*time).getTime() > new Date().getTime() || time == 0) {
        //      
        value = value.slice(index + timeSplitLen);
      } else {
        //      ，    
        value = null;
        status = this.status.TIMEOUT;
        this.remove(key);
      }
    }

    //     
    callback && callback.call(this, status, value);
    //      
    return value;
  }

데이터 삭제

/**
  *     
  * @param key       
  * @param callback     
  */
  remove: function (key, callback) {
    //          
    var status = this.status.FAILURE,
      key = this.getKey(key),
      value = null;
    try {
      //      
      value = this.storage.getItem(key);
    } catch (e) {
      //      ，     
    }
    //       
    if (value) {
      try {
        //     
        this.storage.removeItem(key);
        status = this.status.SUCCESS;
      } catch (e) {
        //       ，     
      }
    }
    //          ，              
    callback && callback.call(this, status, status > 0 ? null : value.slice(value.indexOf(this.timeSplit) + this.timeSplit.length));
  }

사용법

var dao = new Dao('myModule_');
//   /    
dao.set('token', 'abc', function () { console.log(arguments); });
//     
var value = dao.get('token', function () { console.log(arguments); });
console.log(value);
//     
dao.remove('token', function () { console.log(arguments); });

마지막 에 쓰다
사실 데이터 액세스 대상 모델 은 서버 측의 데이터 베이스 작업 에 더욱 적합 합 니 다.예 를 들 어 nodejs 에서 MongoDB 를 조작 하고 데이터 베 이 스 를 삭제 하고 검사 작업 의 패 키 징 을 바 꾸 면 우리 가 전단 에 저 장 된 관 리 를 편리 하 게 할 수 있 습 니 다.데이터 베 이 스 를 조작 하 는 데 고민 할 필요 가 없습니다.DAO 는 우리 에 게 편리 하고 통 일 된 인 터 페 이 스 를 제공 해 주 었 습 니 다.이렇게 하면 팀 개발 에서 다른 사람의 데이터 에 영향 을 미 칠 까 봐 걱정 하지 않 아 도 된다.
이상 의 JS 디자인 모델 의 데이터 액세스 대상 모델 의 실례 설명 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 저희 도 많이 응원 해 주시 기 바 랍 니 다.