Méthode JS pour implémenter la mise en cache frontale

Cet article présente principalement la méthode JS pour implémenter en détail la mise en cache frontale. Il a une certaine valeur de référence et d'apprentissage pour JS. Les amis intéressés par JS peuvent se référer à cet article.

Dans le navigateur frontal, certaines données (telles que les données du dictionnaire de données) peuvent être récupérées et enregistrées dans l'objet js lorsque cela est nécessaire à l'avenir. demandez le serveur à chaque fois. Pour les pages qui utilisent beaucoup de dictionnaires de données pour remplir les listes déroulantes, cette approche peut réduire considérablement les visites sur le serveur. Cette méthode fonctionne particulièrement bien avec les frames utilisant des iframes.

Idées et méthodes d'implémentation spécifiques :

Créez un fichier cache.js :

1 Page Front-end, définissez les données qui doivent être obtenues à partir du front-end. mettre en cache immédiatement et définir un objet Pour enregistrer ces données :

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

2. Sur la page front-end, définissez une fonction pour appeler l'interface backend pour obtenir des données, et puis enregistrez-le dans les objets du cache local (dicts).

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

Appelez cette méthode lorsque la page principale est chargée pour obtenir les données en une seule fois et les mettre en cache. De cette façon, si vous avez besoin des mêmes données à l'avenir, vous pouvez les obtenir directement à partir des dictionnaires d'objets locaux.

Contrôleur backend :

3. Définissez une interface selon la requête front-end, interrogez la base de données (ou interrogez le cache du serveur, comme dans l'exemple ci-dessous. ) pour obtenir des données et les renvoyer au Front-end :

/**
 * 根据多个分类编号获取多个字典集合
 * @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,>

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun ! !

Recommandations associées :

Explication détaillée de six types d'erreurs en JavaScript

Comment utiliser javascript pour générer aléatoirement un certain nombre de mots de passe

Instance de javascript calculant la couleur du dégradé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!