JavaScript에서 프런트 엔드 캐싱을 구현하는 방법

零到壹度
풀어 주다: 2018-04-21 11:35:50
원래의
2135명이 탐색했습니다.

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

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

cache.js 파일 만들기:

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

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

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

  1. function getDicts() {  
        $.post(getContextPath() + "/api/sys/getDictList",  
                clsCodes,  
                function(resultBean, status, xhRequest) {  
                    if (resultBean.data != undefined) {  
                        dicts = resultBean.data;  
                    }  
                },   
                'json');  
    }
    로그인 후 복사

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

백엔드 컨트롤러:

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

/** 
 * 根据多个分类编号获取多个字典集合 
 * @param clsCodes 
 * @return {{"clsCode" : {"code1":"name1,"code2":"name2"...}}, ...} 
 */  
@SuppressWarnings({ "unchecked", "rawtypes" })  
@ResponseBody  
@RequestMapping("getDictList")  
public ResultBean getDictList(@RequestParam(value = "clsCodes[]", required = true) String[] clsCodes) {  
    ResultBean rb = new ResultBean();  
      
    Map<String, Map<String, String>> dictCache = (Map<String, Map<String, String>>) CacheManager.getInstance().get(CacheConstants.DICT);  
    Map dictMap = new LinkedHashMap<>(); //使用LinkedHashMap保证顺序  
  
    if(dictCache != null){  
        for(String  clsCode: clsCodes){  
            dictMap.put(clsCode, dictCache.get(clsCode));  
        }  
    }else{  
        rb.setMessage("缓存中拿不到字典信息!");  
        rb.setSuccess(false);  
    }  
  
    rb.setData(dictMap);  
    return rb;  
}
로그인 후 복사


관련 권장 사항:

프런트 엔드 캐싱 메커니즘 요약

프런트엔드용으로 작성된 http 캐싱에 대한 자세한 설명

프런트엔드를 위한 여러 로컬 캐싱 메커니즘

JS를 사용하여 프런트엔드 캐싱 구현

위 내용은 JavaScript에서 프런트 엔드 캐싱을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿