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

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123863 ...
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123863
// 缓存框架
(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天前
|
JavaScript 前端开发
JavaScript-jQuery的使用 + JS的案例
JavaScript-jQuery的使用 + JS的案例
13 0
|
7天前
|
移动开发 JavaScript 前端开发
【热门话题】Vue.js:现代前端开发的轻量级框架之旅
Vue.js,由尤雨溪于2014年创建,是一个轻量级的前端框架,因其简洁API、高效渲染和组件系统深受全球开发者喜爱。本文探讨Vue的核心理念、技术架构、开发实践及在现代Web开发中的应用。Vue遵循渐进式框架思想,提供声明式编程、组件化和响应式数据绑定。技术上,它采用双向数据绑定、虚拟DOM和生命周期钩子。开发实践中,Vue CLI和Vuex、Vue Router分别加速开发和管理状态、路由。Vue不仅适用于单页应用,还支持多页应用、移动开发和跨平台项目,拥有丰富的社区生态和插件。随着Vue 3的推出,Vue将持续创新并影响前端开发领域。
29 0
|
11天前
|
XML 前端开发 JavaScript
jQuery与javascript的区别+案例 锋芒毕露
jQuery与javascript的区别+案例 锋芒毕露
|
11天前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
14天前
|
资源调度
在 Next.js 中使用自定义服务器框架进行服务器端渲染
在 Next.js 中使用自定义服务器框架进行服务器端渲染
Next.js 的服务器端渲染框架集成
Next.js 的服务器端渲染框架集成
|
14天前
|
前端开发 网络架构 UED
React Next.js框架
React Next.js 是一个基于 React 的服务器渲染框架,用于构建高性能的现代Web应用。它提供内置的服务器渲染、静态导出、动态路由功能,并自动进行代码拆分。Next.js 还支持热模块替换、CSS-in-JS 和客户端路由,拥有丰富的插件生态系统,简化了开发过程,提升了应用的性能和用户体验。
|
14天前
|
移动开发 JavaScript 前端开发
Phaser和Three.js是两个非常流行的JavaScript游戏框架
【5月更文挑战第14天】Phaser是开源的2D游戏引擎,适合HTML5游戏开发,内置物理引擎和强大的图形渲染功能,适用于消消乐等2D游戏。Three.js是基于WebGL的3D库,用于创建3D场景和应用,支持各种3D对象和交互功能,广泛应用于游戏、可视化等领域。选择框架取决于项目需求,2D选Phaser,3D选Three.js。
18 4
|
14天前
|
JavaScript 前端开发
JS实现网页页面的框架(demo)
JS实现网页页面的框架(demo)
14 1
|
14天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?