“;本地存储”;在RequireJS中

Prototype of "localstorage" in RequireJS

本文关键字：RequireJS 存储      更新时间：2023-09-26

我目前已经向"localStorage"添加了一些方法。

/**
 *
 * MOVED TO: https://github.com/iFind/html5MultidimensionalStorage
 *
 * This methods extends the default HTML5 Storage object and add support
 * to set and get multidimensional data
 *
 * @example Storage.setObj('users.albums.sexPistols',"blah");
 * @example Storage.setObj('users.albums.sexPistols',{ sid : "My Way", nancy : "Bitch" });
 * @example Storage.setObj('users.albums.sexPistols.sid',"Other songs");
 *
 * @example Storage.getObj('users');
 * @example Storage.getObj('users.albums');
 * @example Storage.getObj('users.albums.sexPistols');
 * @example Storage.getObj('users.albums.sexPistols.sid');
 * @example Storage.getObj('users.albums.sexPistols.nancy');
 *
 * This is just a prototype and is not recommended to use at production apps
 * USE AT YOUR OWN RISK
 *
 * @author Klederson Bueno <klederson@klederson.com>
 * @author Gabor Zsoter <helo@zsitro.com>
 */
//Add Storage support for objects
Storage.prototype.__walker = function(path,o) {
    //Validate if path is an object otherwise returns false
    if(typeof path !== "object")
    return undefined;
    if(path.length === 0){
    return o;
    }
    for(var i in path){
    var prop = path[i];
    //Check if path step exists
    if(o.hasOwnProperty(prop)){
        var val = o[prop];
        if(typeof val == 'object'){
        path.splice(0,1);
        return this.__walker(path,val);
        } else {
        return val;
        }
    }
    }
};
Storage.prototype.setObj = function(key, value) {
    var key = encodeURIComponent(key);
    var path = key.split('.');
    //First level is always the localStorage key pair item
    var _key = path[0];
    var os = this.getItem(_key) !== null ? JSON.parse(this.getItem(_key)) : null; //general storage key pair element
    path.splice(0,1);
    if(os === null) {
    os = {};
    this.setItem(_key,JSON.stringify(os));
    }
    var innerWalker = function(path,o) {
    //Validate if path is an object otherwise returns false
    if(typeof path !== "object")
        return undefined;
    if(path.length == 1) {
        o[path[0]] = value;
        return o;
    } else if(path.length === 0) {
        os = value;
        return os;
    }
    var val = null;
    for(var i in path){
        var prop = path[i];
        //Check if path step exists
        if(o.hasOwnProperty(prop)) {
        val = o[prop];
        if(typeof val == 'object'){
            path.splice(0,1);
            return innerWalker(path,val);
        }
        } else {
        //create depth
        o[prop] = {};
        val = o[prop];
        path.splice(0,1);
        return innerWalker(path,val);
        }
    }
    };
    innerWalker(path,os);
    this.setItem(_key,JSON.stringify(os));
};
Storage.prototype.getObj = function(key) {
    var key = encodeURIComponent(key);
    key = key.split('.');
    //First level is always the localStorage key pair item
    var _key = key[0];
    var o = this.getItem(_key) ? JSON.parse(this.getItem(_key)) : null;
    if(o === null)
    return undefined;
    key.splice(0,1);
    return this.__walker(key,o);
};

在另一门课上，我会：

define(['jquery', '_Errors'], function($, Errors) {
[...]
    localStorage.getObj('blabla');
[...]
});

在我迁移到RequireJS之前，我只是把所有的函数/原型都放在一个名为functions.js的文件中——这还可能吗？还是需要指定要在每个文件中使用的所有函数？

加载functions.js文件有两个常用选项：

  1. 在RequireJS的外部加载修改Storage的文件。这意味着将其放入自己的script元素中。我会在RequireJS加载之前加载它，这样RequireJS加载的所有内容都会从该文件所做的更改中受益。

  2. 让RequireJS加载functions.js。你需要这样的配置：

    paths: {
    functions: "path/to/functions.js"
},
shim: {
    functions: {
        // This should be something that only your file creates.
        // In some circumstances it is used by RequireJS to check whether something
        // has loaded.
        exports: 'Storage.prototype.getObj'
    }
}

    但是需要使用functions添加的函数的每个模块都需要将其列为依赖项：

    define(['jquery', '_Errors', 'functions'], function ($, Errors) {
    [...]
    localStorage.getObj('blabla');
    [...]
});

每当我加载进行修改的东西时，就开始修改Element、Node或Storage，我更喜欢使用上面的第一个选项。我希望所有这些都先加载，这样之后的所有内容都能看到相同的环境。所以它都是在RequireJS之外加载的。如果您发现由于加载了很多这样的小文件而导致性能出现问题，那么您可以始终自定义优化步骤，将这些文件连接起来，并在r.js生成的捆绑包开始时添加它们。

相关文章：