// 缓存框架
(function (xframe) { /**
* 实现了缓存框架的临时存储功能(内存存储)
* @type {{data: Array, get: (function(*): *), add: xframe.cache.add, delete: (function(*): boolean), update: (function(*, *): boolean), isExist: (function(*): boolean)}}
*/
xframe.cache = {
data: [], // 用于存储本地的数据信息
/**
* 用于获取本地存储的json数据信息
* @param key
* @return {*}
*/
get: function (key) {
var value = null;
this.data.each(function () {
if (key.trim() === this.key.trim()) {
value = this.value;
}
});
return value;
},
/**
* 向本地存储添加数据信息
* @param key
* @param value
*/
add: function (key, value) {
this.data.push({
key: key.trim(),
value: value.trim()
});
},
/**
* 删除指定的key的数据信息
* @param key
* @return {boolean}
*/
delete: function (key) {
// 删除指定的key对应的数据信息
var status = false, // 定义一个状态码,用于标记删除是否成功的状态信息
self = this;
this.data.forEach(function (element, index) {
// 遍历本地的数据存储信息,进行比对数据信息
if (key.trim() === element.key.trim()) {
// 指定开始的位置,开始删除数组中的数据信息
self.data.splice(index, 1);
status = true;
}
});
return status;
},
/**
* 修改指定的元素的数据信息
* @param key
* @param value
*/
update: function (key, value) {
var status = false;
this.data.forEach(function (element) {
if (key.trim() === element.key) {
// key不变,只修改数值信息, 注意element是一个json对象,这个对象里面包含了两个属性element.key和element.value这两个
element.value = value.trim();
status = true;
}
});
return status;
},
/**
* 检测一个指定的数据是否存在
* @param key
* @return {boolean}
*/
isExist: function (key) {
// 用于检测某一个数据信息是否存在
this.data.forEach(function () {
if (key.trim() === this.key) {
return true;
}
});
return false;
}
} /**
* 实现了一个Cookie框架的封装(注意在把HTML转换为实体存储的时候这里默认是去掉了最末尾的分号)
* @type {{getCookie: xframe.cookie.getCookie, setCookie: xframe.cookie.setCookie, deleteCookie: xframe.cookie.deleteCookie, clearAllCookies: xframe.cookie.clearAllCookies}}
*/
xframe.cookie = {
/**
* 根据cookie的名字获取Cookie的详细信息
* @param name
* @return {*}
*/
getCookie: function (name) {
// 去除转义字符
var name = name.escapeHTML(),
// 读取文档中的所有cookie属性
allCookies = document.cookie; // 下面是一些Cookie的数据格式信息(默认返回的是一个字符串)
// H_PS_645EC=af88R0s3e76Ig1PlwkvrhnGGtg4qt5pcZNPKBUntPI2vGearAlyZyjXjmKYn%2BkggUXbNjhg;
// 1. 查找名称为name的cookie信息script3&amp5;
//name = name.substring(0, name.length-1); // 当前步骤是为了去除掉末尾的分号(转换为标准形式);
name += '=';
// 等号右边的就是获取的数值,左边就是cookie的名称信息
// 2. 获取'name='这个字符串在整个Cookie信息字符串中出现的位置下标
var pos = allCookies.indexOf(name);
// 3. 判断是否存在这个cookie的信息
if (pos !== -1) {
// 如果存在的话,就继续处理
// 3. 计算'cookie='等号后面的位置
var start = pos + name.length;
// 3. 从'cookie='的位置开始向后搜索, 一直到;的位置结束, 从start的位置向后搜索信息
var end = allCookies.indexOf(';', start);
if (end === -1) {
// 如果为-1的话, 说明cookie信息列表里面只有一个Cookie信息
end = allCookies.length;
}
// 4. 提取Cookie的数值信息
var value = allCookies.substring(start, end);
// 5.处理之后反转义后返回(反转义的目的是将内容进行加密处理,防止攻击)【测试状态OK,由于之前的内部存储,必须先删除所有的,在执行就ok了】
return value.unescapeHTML();
} else {
// 没有找到, 说明不存在这个cookie信息
return '';
} // 默认情况下返回一个空的字符串
return '';
},
/**
* 根据传入的参数信息设置浏览器的cookie
* @param name
* @param value
* @param days
* @param path
*/
setCookie: function (name, value, days, path) {
var name = name.escapeHTML(),
value = value.escapeHTML(),
expires = new Date(),
_expires,
res; //name = name.substring(0, name.length-1); // 当前步骤是为了去除掉末尾的分号(转换为标准形式); // 设置cookie的过期时间(单位是毫秒)
expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
if (path === '') {
path = '';
} else {
path = (';path=' + path);
} if (typeof expires === 'string') {
_expires = '';
} else {
// 使用UTC标准时间
_expires = (';expires=' + expires.toUTCString());
} // 设置cookie信息,【注意要点:】(设置COokie的时候,只要遇到分号就会立即结束,只会保存分号之前的内容)
res = name + '=' + value + _expires + path;
// document.cookie="userId=828; userName=hulk";
document.cookie = res;
},
/**
* 根据名称信息和路径信息删除cookie
* @param name
* @param path
*/
deleteCookie: function (name, path) {
var name = name.escapeHTML(),
expires = new Date();
if (path === '') {
path = '';
} else {
path = (';path=' + path);
} // 删除之后重新设置cookie
document.cookie = name + '=' + ';expires=' + expires.toUTCString() + path;
},
/**
* 清空所有的cookie信息
*/
clearAllCookies: function () {
// 1. 获取浏览器中存储的所有cookie信息
// "name&amp=xiuxiu&amp; name=xiuxiu; script=<script>alert(2); script2=<script>alert(2); script3=<script>alert(2); script3&amp=&ltscript&gtalert(2); script4&amp=&ltscript&gtalert(2); a&amp=&lta&gtalert(2)&lt/a&gt&amp"
var cookies = document.cookie.split(';');
if (cookies.length) {
cookies.forEach(function (element) {
// 拿到字符串:name&amp=xiuxiu&amp
var index = element.indexOf('='),
name = element.substring(0, index); // 实现思路:要想删除某一个COOkie信息,只需要将cookie的name对应的值设置为空即可
document.cookie = name + '=' + ';expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
});
} }
} // 本地存储框架localstorage的本地存储
xframe.store = (function (xframe) {
// 定义一个API,用于定义实现的本地存储的API接口
var api = {},
localStorageName = 'localStorage',
globalStorageName = 'globalStorage',
win = window,
doc = window.document,
storage; // 首先先定义要实现的功能接口
api.set = function (key, value) { }
api.get = function (key) { }
api.remove = function (key) { }
api.clear = function () { } /*
* a) sessionStorage和localStorage都是window的属性,也是Storage对象的实例,即:window.sessionStorage instanceof Storage返回True,window.localStorage instanceof Storage 返回True,也因此两者享有Storage的属性和方法。
b) sessoinStorage存储的数据在页面会话结束时会被清空,页面会话在浏览器窗口关闭前持续存在,包含页面刷新和恢复。若新开标签或窗口将新建一个会话,再次获取sessionStorage将只限于当前会话,与先前会话的无关。localStorage存储的数据不会
c) window.globalStorage自Gecko 13 (Firefox 13)起不再支持。
*
* */
if (localStorageName in win && win[localStorageName]) {
// 拿到本地存储的这个数据项
storage = win[localStorageName]; // 实现我自己定义的接口
/**
* 设置本地存储的内容
* @param key
* @param value
*/
api.set = function (key, value) {
storage.setItem(key, value);
}
/**
* 获取本地存储的内容
* @param key
* @return {*}
*/
api.get = function (key) {
return storage.getItem(key);
}
/**
* 移出其中的某一项
* @param key
*/
api.remove = function (key) {
storage.removeItem(key);
}
/**
* 清空本地存储的所有内容
*/
api.clear = function () {
storage.clear();
}
} else if (globalStorageName in win && win[globalStorageName]) {
// HTML5中的localStorage替换了原来的globalStorgae
// 1. 拿到本地存储的对象(这是一个Json对象)[Firefox浏览器]
storage = win[globalStorageName][win.location.hostname];
api.set = function (key, value) {
storage[key] = value;
}
api.get = function (key) {
return storage[key] && storage[key].value;
}
api.remove = function (key) {
// delete用来删除一个对象的属性。
delete storage[key];
}
api.clear = function () {
for (var key in storage) {
delete storage[key];
}
}
} else if (doc.documentElement.addBehavior) {
// 如果可以给一个对象添加行为的话
// 单独定义一个获取本地存储的对象storage
function getStorage() {
// 如果已经获取到了Storage对象的话
if (storage) {
return storage;
}
storage = doc.body.appendChild(doc.createElement('div'));
storage.style.display = 'none';
// userData 64KB IE专用
storage.addBehavior('#default#userData');
// 这个是微软自定义的一个本地存储,相比之下有更大的容量
storage.load(localStorageName);
return storage;
} api.set = function (key, value) {
var storage = getStorage();
// 设置属性
storage.setAttribute(key, value);
// 保存属性信息
storage.save(localStorageName);
}
api.get = function (key) {
var storage = getStorage();
return storage.getAttribute(key);
}
api.remove = function (key) {
var storage = getStorage();
storage.removeAttribute(key);
// 移出数据之后记得保存一下数据
storage.save(localStorageName);
}
api.clear = function () {
// 1. 获取Storage对象
var storage = getStorage();
// 2.获取storage对象存储的所有属性信息
var attributes = storage.XmlDocument.documentElement.attributes;
storage.load(localStorageName);
// 3. 遍历所有的属性信息,并从本地移出数据
[].slice.call(attributes).forEach(function (element) {
storage.removeAttribute(element.name);
})
// 4. 移出完毕之后,开始保存信息到本地存储
storage.save(localStorageName);
} return api;
} // 把立即函数里面的私有成员暴露出去(如果在立即函数内部不暴露出去需要使用的成员,在外部是无法访问到内部的私有成员变量的)
xframe.storage = api; })(xframe);
})(xframe);

【JavaScript框架封装】实现一个类似于JQuery的缓存框架的封装的更多相关文章

  1. 【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建

    /* * @Author: 我爱科技论坛 * @Time: 20180715 * @Desc: 实现一个类似于JQuery功能的框架 * V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架. ...

  2. 分析一个类似于jquery的小框架

    在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , und ...

  3. 【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装

    // DOM框架(选择器框架) (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现 ...

  4. 【JavaScript框架封装】实现一个类似于JQuery的动画框架的封装

    // 动画框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 ...

  5. 【JavaScript框架封装】实现一个类似于JQuery的选择框架的封装

    // 选择框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 ...

  6. 【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装

    // 属性框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 获取/设置某一个元素 ...

  7. 【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装

    // 事件框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 实现一个浏览器的基本 ...

  8. 【JavaScript框架封装】实现一个类似于JQuery的内容框架的封装

    // 内容框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * .html()用为读 ...

  9. 分析一个类似于jquery的小框架 (2)

    核心构造函数 (function ( window, undefined ) { // 定义Itcast构造函数 function Itcast ( selector ) { return new I ...

随机推荐

  1. mysql 与elasticsearch实时同步常用插件及优缺点对比(ES与关系型数据库同步)

    前言: 目前mysql与elasticsearch常用的同步机制大多是基于插件实现的,常用的插件包括:elasticsearch-jdbc, elasticsearch-river-MySQL , g ...

  2. 用 Python 理解 Web 并发模型

    用 Python 理解 Web 并发模型 http://www.jianshu.com/users/1b1fde012122/latest_articles   来源:MountainKing 链接: ...

  3. Internal Temporary Tables

    8.4.4 How MySQL Uses Internal Temporary Tables 这是MySQL手册中的一节,尝试补充了一些解释.用的版本是MySQL5.6.15社区版 In some c ...

  4. eclipse快捷键深入理解

    1.Eclipse 中的重构功能使其成为了一个现代的 Java 集成开发环境 (IDE),而不再是一个普通的文本编辑器.使用重构,您可以轻松更改您的代码,而不必担心对别处造成破坏. 2.Eclipse ...

  5. POJ 2079

    呃,不知道我用的算不算卡壳,总有点枚举的意思. 先求凸包,然后,枚举其中一点,再枚举另一点作为结尾,这个向量旋转一周后,求出最大值面积.这里面用的是旋转卡壳判断的那个式子. PS:下一篇和这题是一样题 ...

  6. UVA1630 Folding 区间DP

    Folding Description   Bill is trying to compactly represent sequences of capital alphabetic characte ...

  7. declare-styleable的使用

    declare-styleable:declare-styleable是给自定义控件添加自定义属性用的. 1.首先,先写attrs.xml 在res-vlaues文件夹下创建资源文件attrs.xml ...

  8. C语言 - typedef struct 与struct

    c语言中可以选择的数据类型太少了. Java中有一些高级的数据结构. 结构中能够存放基本的数据类型以及其他的结构. 结构定义,一般放在程序的开头部分. 一般放在include之后. #include ...

  9. 委托delegate,Action,Func,Predicate

    C#委托的介绍(delegate.Action.Func.predicate) 委托是一个类,它定义了方法的类型,使得可以将方法当作另一个方法的参数来进行传递.事件是一种特殊的委托. 1.委托的声明 ...

  10. EOJ 2822 内存显示

    一个 int 类型变量或 double 类型变量在连续几个字节的内存中存放.读取数值时,当数值中包含小数点时类型为 double,否则类型为 int.将读入的数值存放在 int 类型变量或 doubl ...