프런트엔드 캐싱을 구현하는 JS 메서드-JS 튜토리얼-php.cn

프런트엔드 캐싱을 구현하는 JS 메서드

韦小宝

풀어 주다： 2018-01-15 11:21:30

원래의

2561명이 탐색했습니다.

이 글은 주로 JS의 프런트엔드 캐싱 구현 방법을 자세히 소개합니다. JS에 대한 확실한 참고자료와 학습 가치가 있습니다. JS에 관심이 있는 친구들은 이 글을 참고하세요.

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

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

cache.js 파일 만들기:

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

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

로그인 후 복사

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

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

로그인 후 복사

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

백엔드 컨트롤러:

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, string="">> dictCache = (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;
}</string,></string,>

로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다! !