Skip to content

模块加载的本地储存策略

RubyLouvre edited this page Sep 12, 2012 · 1 revision
我打算前后端都可以清掉特定的缓存模块 
上海-司徒正美(1669866773) 9:43:16
有必要的 
上海-司徒正美(1669866773) 9:44:07
模块加载是不让你程序写成一坨屎 
上海-司徒正美(1669866773) 9:44:33
如果你有了模块的概念,你才有接口的概念 
上海-司徒正美(1669866773) 9:44:55
这样就不会把不必要的方法或变量暴露出来 
上海-司徒正美(1669866773) 9:45:12
因为有些方法与属性你可以以后用进行修改 
上海-雨夜带刀(156004628) 9:45:38
新兴的电商一个月有1000万的销售业绩  算不算高  
上海-司徒正美(1669866773) 9:45:47
但由于你没有做限制,被人调用了,你就不能随便修改了 

我打算后端可以发一个cookie出去 
上海-司徒正美(1669866773) 10:20:29
而框架在加载时总是尝试读取某个cookie,如果存在就清掉指定的模块 
上海-司徒正美(1669866773) 10:21:07
我们也可以在前端直接调用某个方法来清除指定模块 
北京-Darrel.Hsu(394715911) 10:21:48
每天12万条的数据写入。。。这是我操作的最大的数据库了 
上海-司徒正美(1669866773) 10:22:50
//用于清除模块
$.A = function(){}

innerReadCookie(){
  //这里去读cookie,得到参数
  if(参数存在){
     $.A(参数)
  }
$.erase(obj)

如果传入一个对象,则键名为模块名,值为版本号

如果传参,则……

我们怎么删掉所有模块啊?
 
当用户发出一个模块请求时,我先检测$.modules(内存中)有没有此模块,有就不发出了,没有则检测本地储存(localStorage或userData)有没有对应的模块,有则把它加载上来,由字符串转换为函数变成需要的模块!

再没有才通过iframe中的script加载模块

define("aaa", function(){
    $.log("aaa模块")
    return {
        name:"aaa"
    }
})
 
上海-司徒正美(1669866773) 11:00:29
我最简单的模块是这样的 
上海-司徒正美(1669866773) 11:00:59
如果我们是通过http://localhost:8888/mass.js来加载框架 
上海-司徒正美(1669866773) 11:01:33
那么aaa模块的ID是http://localhost:8888/aaa.js 
上海-司徒正美(1669866773) 11:01:51
它没有依赖列表,于是为空字符串 
上海-司徒正美(1669866773) 11:02:04
它的模块工厂是function(){
    $.log("aaa模块")
    return {
        name:"aaa"
    }
} 
上海-司徒正美(1669866773) 11:02:30
而它是通过mass.js直接加载的 
 北京-饺子(19870325) 11:02:47
define("aaa",function(){})
和aaa.js名字一定要一样吗? 
上海-司徒正美(1669866773) 11:02:50
那么它的父模块就是http://localhost:8888/mass.js 
深圳-objectjs(83254738) 11:02:51
  sencha touch走向mvc,这不是我喜欢的,一个简单功能的按他们的意思是要用三个文件分别来存放,我的加载字符串,eval出一个模块的方法就失去意义了,因为只要把module,view,controller组合到一块才能用。不过他们的define和create方法还是很好用的。 
上海-司徒正美(1669866773) 11:02:56
不需要一样 
上海-司徒正美(1669866773) 11:03:07
其实不写也没所谓! 
上海-TAOTAO 11:03:23
那你通过什么来找到它? 
长沙-skyboy(285060100) 11:03:34
   if( global.localStorage){
        Storage = localStorage;
    }else if( HTML.addBehavior){
        HTML.addBehavior('#default#userData');
        HTML.save("massdata");
        //https://github.com/marcuswestin/store.js/issues/40#issuecomment-4617842
        //在IE67它对键名非常严格,不能有特殊字符,否则抛throwed an This name may not contain the '~' character: _key-->~<--
        var rstoragekey = new RegExp("[!\"#$%&'()*+,/\\\\:;<=>?@[\\]^`{|}~]", "g")
        function curry(fn) {
            return function(a, b) {
                HTML.load("massdata");
                a = a.replace(rstoragekey, function(w){
                    return w.charCodeAt(0);
                })
                var result = fn( a, b );
                HTML.save("massdata");
                return result
            }
        }
        Storage = {
            setItem : curry(function(key, val){
                HTML.setAttribute(key, val);
            }),
            getItem: curry(function(key){
                $.log(key,true)
                return HTML.getAttribute(key);
            }),
            removeItem: curry(function(key){
                HTML.removeAttribute(key);
            })
        }
    } 
 北京-饺子(19870325) 11:03:38
不能做到aaa.js里define(function(){}),就是aaa模块吗?就是用文件名定义模块名 
长沙-skyboy(285060100) 11:04:03
curry这里玩的比较巧 
上海-司徒正美(1669866773) 11:04:05
因此本地时是
                    Storage.setItem( this.id+"_args", args[1]+"")
                    Storage.setItem( this.id+"_parent", this.parent)
                    Storage.setItem( this.id,factroy ) 
上海-司徒正美(1669866773) 11:04:16
不能做到aaa.js里define(function(){}),就是aaa模块吗?就是用文件名定义模块名
已经做到了 
深圳-objectjs(83254738) 11:04:50
 define定义,create实列化,如果在实列化时根据命名空间找不到这个模块,就用require方法加载后再create。 
上海-司徒正美(1669866773) 11:05:13
看一下innerDefine函数 
上海-司徒正美(1669866773) 11:05:26
var innerDefine = function(  ){
        var args = Array.apply([],arguments);
        if(typeof args[0] == "string"){
            args.shift()
        }
        args.unshift( nick );  //劫持第一个参数,置换为当前JS文件的URL
        var module = Ns.modules[ nick ];
        module.state = 1
        var last = args.length - 1;
        if( typeof args[ last ] == "function"){
            //劫持模块工厂,将$, exports, require, module等对象强塞进去
            args[ last ] =  parent.Function( "$,module,exports,require","return "+ args[ last ] )
            (Ns, module, module.exports, module.require());//使用curry方法劫持模块自身到require方法里面
        }
        //将iframe中的函数转换为父窗口的函数
        Ns.define.apply(module, args)
    } 
上海-司徒正美(1669866773) 11:05:32
 if(typeof args[0] == "string"){
            args.shift()
        }
        args.unshift( nick );  //劫持第一个参数,置换为当前JS文件的URL
 
深圳-objectjs(83254738) 11:05:40
 define方法里可以告知模块依赖关系。 
上海-司徒正美(1669866773) 11:05:56
它这里做了偷龙转凤,把名字转换成URL 
 北京-饺子(19870325) 11:06:06
define可以改名吗? 
上海-司徒正美(1669866773) 11:06:27
define为什么要改名? 

 

写模块系统就是为UI库服务的
上海-司徒正美(1669866773)  11:43:16
因为UI的继承树有时是很深的
上海-司徒正美(1669866773)  11:43:33
你可能不知道那个依赖于那个
上海-司徒正美(1669866773)  11:43:59
反正你想扩展那一个就加载那个,然后在回调把你的新组件就行了
Clone this wiki locally