JS-Methode zur Implementierung von Front-End-Caching

Dieser Artikel stellt hauptsächlich die Methode von JS zur Implementierung des Front-End-Cachings im Detail vor. Er hat einen gewissen Referenz- und Lernwert für JS-Freunde, die sich für JS interessieren.

Im Front-End-Browser können einige Daten (z. B. Daten im Datenwörterbuch) abgerufen und im js--Objekt gespeichert werden, wenn sie in Zukunft benötigt werden Fordern Sie den Server jedes Mal an. Bei Seiten, die häufig Datenwörterbücher zum Füllen von Dropdown-Feldern verwenden, kann dieser Ansatz die Serverbesuche erheblich reduzieren. Diese Methode funktioniert besonders gut mit Frames, die Iframes verwenden.

Spezifische Implementierungsideen und -methoden:

Erstellen Sie eine Cache.js-Datei:

1. Definieren Sie auf der Frontend-Seite, welche Daten vom Frontend abgerufen werden müssen gleichzeitig zwischenspeichern und ein Objekt definieren, um diese Daten zu speichern:

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

2. Definieren Sie auf der Front-End-Seite eine Funktion , um die Backend-Schnittstelle aufzurufen, um Daten abzurufen. und speichern Sie es dann in lokalen Cache-Objekten (Dicts).

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

Rufen Sie diese Methode auf, wenn die Hauptseite geladen wird, um die Daten sofort abzurufen und zwischenzuspeichern. Wenn Sie in Zukunft dieselben Daten benötigen, können Sie diese auf diese Weise direkt aus den lokalen Objektdikten abrufen.

Backend-Controller:

3. Definieren Sie eine Schnittstelle,

fragen Sie die -Datenbank ab (oder fragen Sie den Server-Cache ab, wie im Beispiel unten). ), um Daten abzurufen und an das Front-End zurückzugeben:

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich sein wird! !

Verwandte Empfehlungen:

Detaillierte Erklärung der sechs Fehlertypen in JavaScript

Wie man Javascript verwendet, um eine bestimmte Anzahl von Fehlern zufällig zu generieren Passwörter

Instanz von Javascript, das die Verlaufsfarbe berechnet

Das obige ist der detaillierte Inhalt vonJS-Methode zur Implementierung von Front-End-Caching. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!