JS 작업 프런트엔드 캐시

이번에는 JS 연산 프론트엔드 캐시를 가지고 가겠습니다. JS 연산 프론트엔드 캐시의 주의사항은 무엇인가요? 다음은 실제 사례입니다.

프런트 엔드 브라우저에서는 첫 번째 요청 중에 일부 데이터(예: 데이터 사전의 데이터)를 jsobject에서 검색하고 저장할 수 있으므로 매번 요청할 필요가 없습니다. 앞으로는 서버가 없어져야 합니다. 드롭다운 상자를 채우기 위해 데이터 사전을 많이 사용하는 페이지의 경우 이 접근 방식을 사용하면 서버 방문을 크게 줄일 수 있습니다. 이 방법은 iframe을 사용하는 frames에 특히 효과적입니다.

구체적인 구현 아이디어 및 방법:

캐시.js 파일 만들기:

1. 프런트엔드 페이지에서 프런트엔드 캐시에서 한 번에 가져와야 하는 데이터를 정의하고 데이터를 저장할 개체를 정의합니다.

/**
 * 定义需要在用户登录的时候获取到本地的数据字典类别
 */
var clsCodes = {clsCodes :
    [BOOL,
     STATUS,
     USER_TYPE,
     REPORT_STATUS
   ]
};
 
/**
 * 获取数据字典到本地
 */
var dicts;

2. 프런트 엔드 페이지에서 함수를 정의 하여 백엔드 인터페이스를 호출하여 데이터를 얻은 다음 이를 로컬 캐시 개체(dicts)에 저장합니다.

rreee

메인 페이지가 로드되면 이 메서드를 호출하여 데이터를 한 번 가져와 캐시합니다. 이런 방식으로 나중에 동일한 데이터가 필요할 경우 로컬 개체 사전에서 직접 가져올 수 있습니다.

백엔드 컨트롤러:

3. 프런트엔드 요청에 따라 데이터베이스를 쿼리(또는 아래 예와 같이 서버 캐시에 쿼리)하여 데이터를 가져와 프런트엔드로 반환하는 인터페이스를 정의합니다.

function getDicts() {
  $.post(getContextPath() + /api/sys/getDictList,
      clsCodes,
      function(resultBean, status, xhRequest) {
        if (resultBean.data != undefined) {
          dicts = resultBean.data;
        }
      }, 
      'json');
}

이 기사의 사례를 읽은 후 더 흥미로운 정보를 보려면 중국 웹사이트의 PHP 기타 관련 기사를 주목하세요!

추천 도서:

Shiro 인증 구현 상세 설명

vue ProxyTable 인터페이스 교차 도메인 요청 디버깅 구현 방법

위 내용은 JS 작업 프런트엔드 캐시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!