• 【JavaScript框架封装】实现一个类似于JQuery的缓存框架的封装


    // 缓存框架
    (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);
  • 相关阅读:
    寒假记录六
    寒假记录5
    寒假记录4
    寒假记录3
    寒假记录2
    寒假记录1
    hive数据库课堂测试
    第一周
    个人总结
    课程总结
  • 原文地址:https://www.cnblogs.com/52tech/p/9343235.html
Copyright © 2020-2023  润新知