avalon数据缓存功能:ms-data

来源：互联网发布：网络监测软件编辑：程序博客网时间：2024/06/05 08:01

ms-data:为了提高页面的视图渲染速度，对于部分大数据的model数据可以通过avalon提供的数据缓存功能将常用的数据存放在标签的空间里面，当浏览器渲染试图时会优先通过缓存读取数据，以达到网页加速的效果

HTML正文：

<body ms-controller="test"><!-- div充当数据缓存池的角色 --><div ms-data-number="number"     ms-data-number2="number2"     ms-data-bool="bool"     ms-data-bool2="bool2"     ms-data-void="vv"     ms-data-null="nn"     ms-data-array="array"     ms-data-date="date"     ms-date-object="object"     ms-data-fn="show"     ms-click="show()"    >点击显示</div></body>

Javascript操作代码：

avalon.ready(function(){    /*avalon的数据缓存功能，绑定属性中对象和数据是直接保存到元素节点上的      将avalon对象绑定到div上，会自动转换为data-*的格式：ms-data-number-->data-number样式     而数组 函数 对象是直接绑定在div对象上,,成为div属性    */    var vm=avalon.define({        $id:"test",        number:111,        number2:NaN,        bool:false,        bool2:true,        nn:null,        vv:undefined,        array:[1,2,3],        date:new Date(),        object:{name:"data"},        show:function(){            var elem=avalon(this); //类似jquery-->$(this)            /*从div的数据缓冲池中获取数据：             * HTML5一般可以通过localSession和localStorage进行本地存储，              *localStorage注意释放空间*/            console.log(            elem.data("number"),elem.data("number2"),            elem.data("bool"),elem.data("bool2"),            elem.data("null"),elem.data("void"),            elem.data("fn"),this["data-array"],            this["data-date"],this["data-object"]            );        }    });    avalon.scan();});

效果：
这里写图片描述

0 0