Front-End-Cache für JS-Operationen

Dieses Mal werde ich Ihnen den JS-Operations-Front-End-Cache vorstellen. Was sind die Vorsichtsmaßnahmen für den JS-Operations-Front-End-Cache?

Im Front-End-Browser können einige Daten (z. B. Daten im Datenwörterbuch) bei der ersten Anfrage abgerufen und im js -Objekt gespeichert werden Sie müssen bei Bedarf jedes Mal eine Anfrage an den Server stellen. 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.

Konkrete Umsetzungsideen und -methoden:

Erstellen Sie eine Cache.js-Datei:

1. Definieren Sie auf der Front-End-Seite, welche Daten gleichzeitig aus dem Front-End-Cache abgerufen werden müssen, und definieren Sie ein Objekt zum Speichern der Daten:

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

2. Auf der Front-End-Seite definiert eine Funktion , um die Back-End-Schnittstelle aufzurufen, um Daten abzurufen und diese dann im lokalen Cache-Objekt (dicts) zu speichern.

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

Wenn die Hauptseite geladen ist, rufen Sie diese Methode auf, um die Daten einmal 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 zum Abfragen der Datenbank (oder zum Abfragen des Server-Cache, wie im Beispiel unten) gemäß der Front-End-Anfrage, 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,>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ausführliche Erläuterung der Shiro-Autorisierungsimplementierung

Wie Vue ProxyTable das Debugging von domänenübergreifenden Schnittstellenanforderungen implementiert

Das obige ist der detaillierte Inhalt vonFront-End-Cache für JS-Operationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!