mobilebone
Version:
Bone main for mobile web APP with a sigle page mode by using HTML5 history API router.
88 lines (85 loc) • 7.79 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>Mobilebone.js API文档-data-reload</title>
<link rel="stylesheet" href="../../src/mobilebone.css">
<link rel="stylesheet" href="../assets/docs.css">
</head>
<body>
<header id="header"></header>
<aside id="aside"></aside>
<div class="page out">
<div class="content">
<h2>data-reload</h2>
<p><strong>(v2.4.4+)</strong>主要针对Ajax请求。默认情况下，Mobilebone会缓存所有的Ajax请求（内存中），也就是第二次点击同样地址的时候，不是去重新拉数据，而是直接显示之前已经加载的页面。但是，如果你希望请求的页面不被缓存（每次都重新加载页面），则就需要使用这里的<code>data-reload</code>参数。</p>
<p>你可以当作布尔属性使用，例如：<code>data-reload</code>或者跟随不为<code>"false"</code>的属性值，例如：<code>data-reload="true"</code>.</p>
<p><strong>(v2.7.0+)</strong>Mobilebone取消了Ajax请求的url地址做智能判断，因为根据反馈的issues来看，是无法根据URL地址判断是否是一种类别地址的，因为不同项目的rewrite规则是不一样的，例如列表详情页，可能是这种格式：</p>
<pre>//xxx.com/list.php
//xxx.com/detail.php?id=1
//xxx.com/detail.php?id=2</pre>
<p>也可能这种：</p>
<pre>//xxx.com/list/111/
//xxx.com/list/222/
//xxx.com/list/333/</pre>
<p>也可能是和列表页长得很像：</p>
<pre>//xxx.com/index.php 列表页
//xxx.com/index.php?list=1 列表详情页1
//xxx.com/index.php?list=2 列表详情页2</pre>
<p>等等，防不胜防。</p>
<p>如果想要对这类页面进行删除，释放内存，可以使用<code><a href="Mobilebone.remove.html">Mobilebone.remove()</a></code>方法。</p>
<p><strong>(v2.7.2+)</strong>Mobilebone使用另外一直方法来识别URL地址是否是同一类别地址，就是设置<code>data-reload</code>为同一个ID值即可！</p>
<p>这个ID的命名没有要求，只要不是<code>'true'</code>和<code>'false'</code>即可。当触发加载的时候，Mobilebone会自动删除和这个ID一直的页面元素，保证同类型页面的唯一性，例如：</p>
<pre><ul>
<li><a href="detail.html?v=1" data-reload="anyUniqueId">唯一详情页加载测试</a></li>
<li><a href="detail.html?v=2" data-reload="anyUniqueId">唯一详情页加载测试</a></li>
<li><a href="detail.html?v=3" data-reload="anyUniqueId">唯一详情页加载测试</a></li>
<li><a href="detail.html?v=4" data-reload="anyUniqueId">唯一详情页加载测试</a></li>
</ul></pre>
<p>当我们点击任意详情页的时候，会自动删除之前已经加载的详情页，保证内容干净不冲突。</p>
<p></p>
<div><strong>(以下v2.7.0移除，不保证完全兼容)</strong></div>
<del datetime="2017-11-19 19:27">
<p>Mobilebone会对Ajax请求的url地址做智能判断，页面上，永远只会有一个同根页面。例如，页面上有两个请求：</p>
<pre><a href="detail.php?id=1">请求详情页1</a></pre>
<pre><a href="detail.php?id=2">请求详情页2</a></pre>
<p>当点击“请求详情页1”的时候，Mobilebone会Ajax请求该页面内容，并载入；此时我们返回，再次点击该页面，则不会有请求，页面直接载入(因为没有没有设置<code>data-reload</code>)；此时，或者之前，我们我们返回，点击“请求详情页2”，由于这两个页面的查询字符串之前的根地址是一样的，都是<code>detail.php</code>，因此，Mobilebone会删除第一个页面，Ajax请求第2个页面；此时，再点击第1个页面，注意，Mobilebone会从内存中载入第1个页面，不会有额外的请求。</p>
<p>有多位同行提出关于内存的问题。如果是一般的偏展示的页面，所占用内存非常有限，因此，可以尽量不使用<code>data-reload</code>, 以获得更流畅的体验。但是，如果是功能性比较强的页面，比方说商品列表，50条，每条都指向一个动态页面，则由于Mobilebone默认会把页面HTML存在内存中，虽然每个页面占用内存很小（纯字符串），但如果也页面很多，一定的累积还是会有影响的，此时，可以添加<code>data-reload</code>，每次都动态载入，Mobilebone会及时清理上一个页面在内存中的存储，有效降低资源占用。总而言之，言而总之，还是要根据实际项目和个人喜好做判断，实际上，一般内存占用的瓶颈肯定不是字符串占用，更多的是糟糕脚本带来的巨大开销。</p>
<p>另外，所有的form表单提交都不会缓存页面内容，天生外挂<code>data-reload</code>。</p>
<p>最后，v2.3.2新增的<code>data-reload="root"</code>已经没有存在价值，是个有些多余的设计，之前有这么使用的朋友不要担心，不会有影响，无需改动。</p>
</del>
<p> </p>
<div><strong>(以下v2.4.4移除，向前兼容)</strong></div>
<del datetime="2015-04-09 23:37">
<p>主要针对Ajax请求。默认情况下，Mobilebone会缓存所有的Ajax请求，也就是第二次点击同样地址的时候，不是去重新拉数据，而是直接显示之前已经加载的页面。但是，如果你希望请求的页面不被缓存（每次都重新加载页面），则就需要使用这里的<code>data-reload</code>参数。</p>
<p>目前有两种使用场景：</p>
<ol>
<li><strong>url完整地址重加载</strong>：<code>data-reload</code>/<code>data-reload="true"</code>.</li>
<li><strong>url根地址重新加载</strong>：<code>data-reload="root"</code> (v2.3.2+)</li>
</ol>
<p>分别表示什么意思呢？</p>
<h4>url完整地址重加载</h4>
<p>如下两个请求：</p>
<pre><a href="detail.php?id=112" data-reload="true">请求详情页</a></pre>
<pre><a href="detail.php?id=113" data-reload="true">请求详情页</a></pre>
<p>可以看到查询<code>id</code>是不一样的。所谓“完整地址重加载”是指，只有在第二次请求的页面<code>url</code>(包括查询字符串)完全匹配的时候，才移除缓存，重新加载！</p>
<p>比方说上面的两个请求，最后页面HTML会有两个独立的页面。</p>
<h4>url根地址重加载</h4>
<p>请求地址还是一样，但<code>data-reload</code>值为<code>root</code>:</p>
<pre><a href="detail.php?id=112" data-reload="root">请求详情页</a></pre>
<pre><a href="detail.php?id=113" data-reload="root">请求详情页</a></pre>
<p>这里的就是“根地址重加载”，指只要Ajax请求的url的根地址是一样的，就不会缓存，直接清除之前同源页面。</p>
<p>所以，这里，页面上永远最多就一个详情页对应HTML. 很多小伙伴喜欢使用全局<code>id</code>绑定事件，此时，就务必需要设置<code>data-reload="root"</code>, 以免<code>id</code>冲突，事件重复绑定等问题。</p>
</del>
</div>
</div>
<script src="../../src/mobilebone.js"></script>
<script>
Mobilebone.captureLink = false;
window.navKey = "data-reload";
</script>
<script src="nav.js"></script>
<script src="../assets/docs.js"></script>
</body>
</html>