Cet article vous apporte principalement un exemple d'explication du modèle d'objet d'accès aux données du modèle de conception JS. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.
Problème
La plupart des sites Web stockent certaines données (telles que le jeton utilisateur) sur le front-end pour transférer des valeursentre les pages. Pour certaines applications Web à grande échelle, Il peut stocker beaucoup de données, la gestion des données deviendra compliquée et un grand projet est développé conjointement par plusieurs programmeurs. À ce stade, vous rencontrerez un problème : comment vous assurer que vos propres données n'écraseront pas d'autres données. les humains ? Étant donné que tout le monde utilise le même objet WebStorage sur une page, vous ne pouvez pas enregistrer les clés utilisées par tout le monde. À ce stade, vous pouvez utiliser le modèle d'objet d'accès aux données pour résoudre le problème.
Introduction
HTML5 propose deux nouvelles méthodes de stockage des données sur le client : localStorage et sessionStorage. Ce sont deux mécanismes de stockage fournis par l'API Web Storage. La différence est que le premier est un stockage permanent. , et ce dernier est un transfert de données limité à la fenêtre actuelle, et les données qui y sont stockées seront supprimées à la fin de la session en cours. Le contenu spécifique de localStorage et sessionStorage ne sera pas présenté ici. Nous discuterons principalement de la manière de les utiliser raisonnablement dans le développement réel.
Modèle d'objet d'accès aux données (DAO)
Le modèle d'objet d'accès aux données encapsule l'accès et le stockage des sources de données et fournit une classe d'objet d'accès aux données responsable de la gestion et de l'exploitation des données stockées. format de stockage de données, similaire à la couche DAO en arrière-plan.
Puisque WebStorage utilise Key-Value pour accéder aux données et ne peut stocker que des chaînes (tout type sera converti en chaîne lors du stockage et une conversion de type est requise lors de la lecture), nous pouvons donc normaliser le format de la clé , comme nom du module + Clé, développeur + Clé, etc. Vous pouvez également ajouter un préfixe à la valeur pour décrire les données, par exemple en ajoutant un horodatage de la date d'expiration des données pour gérer le cycle de vie des données. L'équipe projet de format spécifique peut le définir elle-même, principalement pour faciliter la gestion et éviter les conflits. Après s'être mise d'accord sur les spécifications, elle peut commencer à définir les objets d'accès aux données.
Ce qui suit prend localStorage comme exemple pour présenter la définition et l'utilisation des classes d'objets d'accès aux données.
Exemple de code
Structure de base de la classe DAO
La structure de base de la classe d'objets d'accès aux données est la suivante Nous ajoutons un préfixe à la valeur clé pour éviter la valeur clé. conflit, et dans Ajoutez l'horodatage et le séparateur d'expiration des données à la valeur, puis déterminez si elles ont expiré lors de l'obtention de la valeur. Cela permet une gestion plus flexible du cycle de vie des données stockées. Une méthode de rappel est également utilisée ici pour faciliter l'obtention des résultats spécifiques du processus d'accès aux données et l'exécution des opérations associées si nécessaire.
/**
* LocalStorage数据访问类
* @param {string} prefix Key前缀
* @param {string} timeSplit 时间戳与存储数据之间的分割符
*/
var Dao = function (prefix, timeSplit) {
this.prefix = prefix;
this.timeSplit = timeSplit || '|-|';
}
// LocalStorage数据访问类原型方法
Dao.prototype = {
// 操作状态
status: {
SUCCESS: 0, // 成功
FAILURE: 1, // 失败
OVERFLOW: 2, // 溢出
TIMEOUT: 3 // 过期
},
// 本地存储对象
storage: localStorage || window.localStorage,
// 获取带前缀的真实键值
getKey: function (key) {
return this.prefix + key;
},
// 添加（修改）数据
set: function (key, value, callback, time) {
...
},
// 获取数据
get: function (key, callback) {
...
},
// 删除数据
remove: function (key, callback) {
...
}
}Ajouter (modifier) des données
/**
* 添加（修改）数据
* @param key 数据字段标识
* @param value 数据值
* @param callback 回调函数
* @param time 过期时间
*/
set: function (key, value, callback, time) {
// 默认为成功状态
var status = this.status.SUCCESS,
key = this.getKey(key);
try {
// 获取过期时间戳
time = new Date(time).getTime() || time.getTime();
} catch (e) {
// 未设置过期时间时默认为一个月
time = new Date().getTime() + 1000 * 60 * 60 * 24 * 30;
}
try {
// 向本地存储中添加（修改）数据
this.storage.setItem(key, time + this.timeSplit + value);
} catch (e) {
// 发生溢出
status = this.status.OVERFLOW;
}
// 执行回调并传入参数
callback && callback.call(this, status, key, value);
}Obtenir des données
/**
* 获取数据
* @param key 数据字段标识
* @param callback 回调函数
*/
get: function (key, callback) {
var key = this.getKey(key),
status = this.status.SUCCESS, // 获取数据状态
value = null; // 获取数据值
try {
// 从本地存储获取数据
value = this.storage.getItem(key);
} catch (e) {
// 获取数据失败
status = this.status.FAILURE;
value = null;
}
// 如果成功获取数据
if (status !== this.status.FAILURE) {
var index = value.indexOf(this.timeSplit),
timeSplitLen = this.timeSplit.length,
// 获取时间戳
time = value.slice(0, index);
// 判断数据是否未过期
if (new Date(1*time).getTime() > new Date().getTime() || time == 0) {
// 获取数据值
value = value.slice(index + timeSplitLen);
} else {
// 数据已过期，删除数据
value = null;
status = this.status.TIMEOUT;
this.remove(key);
}
}
// 执行回调
callback && callback.call(this, status, value);
// 返回结果值
return value;
}Supprimer des données
/**
* 删除数据
* @param key 数据字段标识
* @param callback 回调函数
*/
remove: function (key, callback) {
// 设置默认状态为失败
var status = this.status.FAILURE,
key = this.getKey(key),
value = null;
try {
// 获取数据值
value = this.storage.getItem(key);
} catch (e) {
// 数据不存在，不采取操作
}
// 如果数据存在
if (value) {
try {
// 删除数据
this.storage.removeItem(key);
status = this.status.SUCCESS;
} catch (e) {
// 数据删除失败，不采取操作
}
}
// 执行回调并传入参数，删除成功则传入被删除的数据值
callback && callback.call(this, status, status > 0 ? null : value.slice(value.indexOf(this.timeSplit) + this.timeSplit.length));
}Utilisation
var dao = new Dao('myModule_');
// 添加/修改数据
dao.set('token', 'abc', function () { console.log(arguments); });
// 获取数据
var value = dao.get('token', function () { console.log(arguments); });
console.log(value);
// 删除数据
dao.remove('token', function () { console.log(arguments); });Écrit à la fin
En fait, le mode objet d'accès aux données est plus adapté aux opérations de base de données côté serveur, telles que l'exploitation de MongoDB dans nodejs en encapsulant l'ajout, la suppression, la modification et la requête. opérations de la base de données, nous pouvons faciliter la gestion de notre stockage frontal, nous n'avons pas à nous soucier du fonctionnement de la base de données. DAO nous a fourni une interface pratique et unifiée, nous n'avons donc pas à nous soucier d'affecter celle des autres. données lors du développement de l’équipe.
Recommandations associées :
modèle de conception php DAO (Data Access Object Pattern)
Yii Learning Summary Data Access Object ( DAO), tutoriel yiidao_PHP
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
