RequireJS中的「localstorage」原型

Question

我目前已經在「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我所有的功能/原型 - 這是仍然是可能的？還是我需要指定我將在每個文件中使用的所有功能？

Answer 1

你有兩種選擇，一般以加載functions.js文件：

1. 加載修改Storage外RequireJS的文件。這意味着把它放在它自己的script元素中。我會加載它之前 RequireJS加載，以便由RequireJS加載的所有內容都受益於此文件所做的更改。

2. 有要求加載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生成的包的開頭添加它們。