创建数据共享接口——简化框架之间相互传值
2014-04-11 17:51
295 查看
很多框架存在父子关系,操作起来十分麻烦,很多同学经常出现这样悲催的代码:
其实这个问题可以被大大的简化,框架应用中有一个固定不变的窗口叫window.top,如果我们把数据缓存到这个页面,其下所有框架都可以获取到,无论 子页面如何变幻。不需要采用Cookie,也不需要采用什么HTML5本地数据库策略,你只需要每个页面引用一个js文件,内容如下:
这个寥寥数行的方法可以共享任意类型的数据供各个框架页面读取,它与页面名称、层级毫无关系,就算哪天框架页面层级被修改,你也完全不用担心,它可正常工作。
例如,如我们可以在A页面存入共享数据:
share.data(‘myblog’, ‘http://www.planeart.cn’);
share.data(‘editTitle’, function (val) {
document.title = val;
});
然后某框架页面任意取A页面的数据
alert(‘我的博客地址是: ‘ + share.data(‘myblog’);
var editTitle = share.data(‘editTitle’);
editTitle(‘我已经获取到了数据’);
1 window.parent.document.getElementById("main") 2 .contentWindow.document.getElementById('input').value = 3 document.getElementById('myIframe') 4 .contentWindow.document.getElementById('s0').value;
其实这个问题可以被大大的简化,框架应用中有一个固定不变的窗口叫window.top,如果我们把数据缓存到这个页面,其下所有框架都可以获取到,无论 子页面如何变幻。不需要采用Cookie,也不需要采用什么HTML5本地数据库策略,你只需要每个页面引用一个js文件,内容如下:
1 var share = { 2 3 /** 4 * 跨框架数据共享接口 5 * @param {String} 存储的数据名 6 * @param {Any} 将要存储的任意数据(无此项则返回被查询的数据) 7 */ 8 data: function (name, value) { 9 var top = window.top, 10 cache = top['_CACHE'] || {}; 11 top['_CACHE'] = cache; 12 13 return value !== undefined ? cache[name] = value : cache[name]; 14 }, 15 16 /** 17 * 数据共享删除接口 18 * @param {String} 删除的数据名 19 */ 20 removeData: function (name) { 21 var cache = window.top['_CACHE']; 22 if (cache && cache[name]) delete cache[name]; 23 } 24 25 };
这个寥寥数行的方法可以共享任意类型的数据供各个框架页面读取,它与页面名称、层级毫无关系,就算哪天框架页面层级被修改,你也完全不用担心,它可正常工作。
例如,如我们可以在A页面存入共享数据:
share.data(‘myblog’, ‘http://www.planeart.cn’);
share.data(‘editTitle’, function (val) {
document.title = val;
});
然后某框架页面任意取A页面的数据
alert(‘我的博客地址是: ‘ + share.data(‘myblog’);
var editTitle = share.data(‘editTitle’);
editTitle(‘我已经获取到了数据’);
相关文章推荐
- js创建数据共享接口——简化框架之间相互传值
- js创建数据共享接口――简化框架之间相互传值
- js创建数据共享接口——简化框架之间相互传值_javascript技巧_脚本之家
- 框架之间相互传值JS解决办法
- 线程共享的环境包括:进程代码段、进程的公有数据(利用这些共享的数据,线程很容易的实现相互之间的通讯)、进程打开的文件描述符、信号的处理器、进程的当前目录和进程用户ID与进程组ID。 进程拥有这
- 跨框架数据共享接口
- iframe框架之间js方法相互调用及数据传递
- 用接口实现模拟计算机和U盘的数据之间的相互传递
- iframe框架之间js方法相互调用及数据传递
- Fragment 的静态方式和动态方式以及动态方式中fragment之间通过activity传递 数据(接口回调 ):
- VUEX兄弟组建之间的相互传值
- C++中不同数据类型之间的相互转换
- 【Java多线程与并发库】06 多个线程之间共享数据的方式探讨
- 多线程并发库高级应用 之 多个线程之间共享数据的方式探讨
- 面试之路(13)-android apk之间共享数据的方式以及shareUserId详解
- 多个Activity之间共享数据的5种方式
- 利用memcached在多台服务器之间共享PHP的session数据
- winform 两个窗体之间来回传值/相互传值
- PHP学习——数据类型之间相互转换