Merge pull request #238 from zhangxinxu/develop

zhangxinxu · web-flow · commit 1e3a53a9ab37 · 2019-02-28T19:10:49.000+08:00
Develop
diff --git a/docs/Mobilebone.getCleanUrl.html b/docs/Mobilebone.getCleanUrl.html
@@ -13,7 +13,7 @@
 <div class="page out">
 	<div class="content">
     	<h2>Mobilebone.getClearUrl(trigger[, url][, params]))</h2>
-        <p>获得干净完整的Ajax请求地址。基本上，此函数API内部用得多，大家大可不必关心。</p>
+        <p>获得干净完整的Ajax请求地址。对于Ajax请求的页面，返回的这个地址也是页面的ID，可以用来remove页面。</p>
         <h3>参数</h3>
         <ul>
             <li><code>trigger</code> DOM元素。一般表示<code>&lt;a&gt;</code>元素。可选参数，和<code>url</code>至少一个存在。。</li>
@@ -24,10 +24,10 @@ <h3>返回值</h3>
         <p>字符串。</p>
         <h3>使用示例</h3>
         <pre>Mobilebone.getCleanUrl(elementOfA);
-Mobilebone.getCleanUrl(elementOfA, ”, “a=1&b=2″);
-Mobilebone.getCleanUrl(null, “xxx.html”);
-Mobilebone.getCleanUrl(null, “xxx.html?a=1&b=2″);
-Mobilebone.getCleanUrl(null, “xxx.html”, “a=1&b=2″);</pre>
+Mobilebone.getCleanUrl(elementOfA, "a=1&amp;b=2");
+Mobilebone.getCleanUrl(null, "xxx.html");
+Mobilebone.getCleanUrl(null, "xxx.html?a=1&amp;b=2");
+Mobilebone.getCleanUrl(null, “xxx.html", "a=1&amp;b=2");</pre>
     </div>
 </div>
 
diff --git a/docs/Mobilebone.remove.html b/docs/Mobilebone.remove.html
@@ -16,8 +16,12 @@ <h2>Mobilebone.remove(domOrId)</h2>
         <p>（v2.7.0+）清除页面级别的DOM元素，并连带id标识和缓存一起清除。</p>
         <h3>参数</h3>
         <ul>
-            <li><code>domOrId</code> 页面对应DOM元素（默认指类名是<code>.page</code>的元素）或需要删除页面id。必须参数。</li>
+            <li><code>domOrId</code> 必须参数。页面对应DOM元素（默认指类名是<code>.page</code>的元素）或需要删除页面id。
+            <p>（v2.7.2+）如果是Ajax请求的页面删除，在可以是触发加载<code>&lt;a&gt;</code>的元素，或者是<code>Mobilebone.getCleanUrl()</code>处理Ajax请求地址后的返回值。</p></li>
         </ul>
+        <h3>其它说明</h3>
+        <p>对于Ajax请求的页面，如果没有专门指定，这些页面的id是使用<code><a href="Mobilebone.getCleanUrl.html">Mobilebone.getCleanUrl(null, 'xxx.php')</a></code>方法的返回值（假设请求地址是<code>'xxx.php'</code>）。</p>
+        <p>（v2.7.2+）<code><a href="data-reload.html">data-reload</a></code>新增基于指定id自动删除同一类别页面功能，是一种设计更友好的自动删除实现。</p>
         <h3>返回值</h3>
         <p>-</p>
         <h3>使用示例</h3>
@@ -27,7 +31,15 @@ <h3>使用示例</h3>
 <span class="comment">// 移除类名为.pageRootReload的所有页面</span>
 [].slice.call(document.querySelectorAll('.pageRootReload')).forEach(function (page) {
     Mobilebone.remove(page);
-});</pre>
+});
+
+<span class="comment">// 移除#rootReload下所有&lt;a&gt;元素加载的页面</span>
+[].slice.call(document.querySelectorAll('#rootReload a')).forEach(function (ele) {
+    Mobilebone.remove(ele);
+});
+
+<span class="comment">// 移除请求//detail.php?id=1234这个地址生成的页面</span>
+Mobilebone.remove("//detail.php?id=1234");</pre>
     </div>
 </div>
 
diff --git a/docs/data-history.html b/docs/data-history.html
@@ -0,0 +1,38 @@
+<!doctype 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-history</title>
+<link rel="stylesheet" href="../src/mobilebone.css">
+<link rel="stylesheet" href="docs.css">
+</head>
+
+<body>
+<aside></aside>
+<div class="page out">
+	<div class="content">
+    	<h2>data-history</h2>
+        <p>当发生页面过场切换的时候是否生成一条新的记录。</p>
+        <ol>
+            <li><strong>a元素</strong>
+                <p>例如：</p>
+                <pre>&lt;a href="ajax.html" data-history="false">&lt;/a></pre>
+                <p>此时，浏览器地址栏中的地址不会发生变化，不会生成新的记录。</p>
+            </li>
+            <li><strong>form元素</strong>
+            	<p>与<code>a</code>元素类似。</p>
+            </li>
+        </ol>
+    </div>
+</div>
+
+<script src="../src/mobilebone.js"></script>
+<script>
+Mobilebone.captureLink = false;
+window.navKey = "data-history";
+</script>
+<script src="nav.js"></script>
+<script src="docs.js"></script>
+</body>
+</html>
diff --git a/docs/data-reload.html b/docs/data-reload.html
@@ -28,7 +28,17 @@ <h2>data-reload</h2>
 //xxx.com/index.php?list=1   列表详情页1
 //xxx.com/index.php?list=2   列表详情页2</pre>
         <p>等等，防不胜防。</p>
-        <p>如果想要对这类页面进行删除，释放内存，可以使用<code>Mobilebone.remove()</code>方法。</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>&lt;ul&gt;
+    &lt;li&gt;&lt;a href="detail.html?v=1" data-reload="anyUniqueId"&gt;唯一详情页加载测试&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="detail.html?v=2" data-reload="anyUniqueId"&gt;唯一详情页加载测试&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="detail.html?v=3" data-reload="anyUniqueId"&gt;唯一详情页加载测试&lt;/a&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;a href="detail.html?v=4" data-reload="anyUniqueId"&gt;唯一详情页加载测试&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
+        <p>当我们点击任意详情页的时候，会自动删除之前已经加载的详情页，保证内容干净不冲突。</p>
+        <p></p>
         <div><strong>(以下v2.7.0移除，不保证完全兼容)</strong></div>
         <del datetime="2017-11-19 19:27">
             <p>Mobilebone会对Ajax请求的url地址做智能判断，页面上，永远只会有一个同根页面。例如，页面上有两个请求：</p>
diff --git a/docs/docs.css b/docs/docs.css
@@ -11,7 +11,7 @@ aside a { display: block; padding: 5px 10px; color: #fff; position: relative; }
 .nav-a:hover { background-color: rgba(255,255,255, .1); }
 .nav-a[href*=transition], .nav-a[href*=data-title], .nav-a[href*=otherAnonymousAPIs] { margin-top: 20px; }
 .nav-a[href*=autoInit], .nav-a[href*=getPage] { text-decoration: line-through; display: none; }
-.nav-a[href*=getCleanUrl], .nav-a[href*=getFunction] { opacity: .6; }
+.nav-a[href*=getFunction] { opacity: .6; }
 .nav-a[href*=reload]:after, .nav-a[href*=remove]:after { position: absolute; content: '更新'; font-size: 12px; transform: scale(0.8); color: pink; }
 .nav-a[href*=remove]:after { content: 'NEW'; }
 .nav-a > .mask { display: inline; width: 26px; height: 31px; top: 0; right: 8px; left: auto; background-color: transparent; -webkit-transform: scale(.8,.8); -ms-transform: scale(.75,.75); transform: scale(.75,.75); }
diff --git a/docs/nav.js b/docs/nav.js
@@ -1,22 +1,22 @@
 (function() {
 	var aside = document.querySelector("aside");
 	if (aside == null) return;
-	
+
 	var key = window.navKey, html = '<nav>', active = '', matchs = false;
-	
-	["Mobilebone.support", "Mobilebone.VERSION", "Mobilebone.autoInit", "Mobilebone.captureLink", "Mobilebone.captureForm", "Mobilebone.rootTransition", "Mobilebone.mergeCallback", "Mobilebone.classAnimation", "Mobilebone.classPage", "Mobilebone.classMask", "Mobilebone.pushStateEnabled", "Mobilebone.evalScript", "Mobilebone.transition()", "Mobilebone.getCleanUrl()", "Mobilebone.getPage()", "Mobilebone.createPage()", "Mobilebone.remove()", "Mobilebone.getFunction()", "Mobilebone.ajax()", "Mobilebone.submit()", "Mobilebone.isBack()", "Mobilebone.jsonHandle()", "Mobilebone.init()", "Mobilebone.handleTapEvent()", "otherAnonymousAPIs", "data-title", "data-root", "data-form", "data-params", "data-callbackKeys", "data-mask", "data-rel", "data-ajax", "data-reload", "data-ajaxKeys", "data-preventDefault", "data-container", "data-classPage"].forEach(function(innerhtml) {
+
+	["Mobilebone.support", "Mobilebone.VERSION", "Mobilebone.autoInit", "Mobilebone.captureLink", "Mobilebone.captureForm", "Mobilebone.rootTransition", "Mobilebone.mergeCallback", "Mobilebone.classAnimation", "Mobilebone.classPage", "Mobilebone.classMask", "Mobilebone.pushStateEnabled", "Mobilebone.evalScript", "Mobilebone.transition()", "Mobilebone.getCleanUrl()", "Mobilebone.getPage()", "Mobilebone.createPage()", "Mobilebone.remove()", "Mobilebone.getFunction()", "Mobilebone.ajax()", "Mobilebone.submit()", "Mobilebone.isBack()", "Mobilebone.jsonHandle()", "Mobilebone.init()", "Mobilebone.handleTapEvent()", "otherAnonymousAPIs", "data-title", "data-history", "data-root", "data-form", "data-params", "data-callbackKeys", "data-mask", "data-rel", "data-ajax", "data-reload", "data-ajaxKeys", "data-preventDefault", "data-container", "data-classPage"].forEach(function(innerhtml) {
 		if (matchs == true) {
 			active = '';
 		} else if (key && (key == innerhtml || new RegExp(key).test(innerhtml))) {
 			active = ' active';
 			matchs = true;
 		}
-		html = html + '<a href="'+ innerhtml.replace("()", "") +'.html" class="nav-a'+ active +'" data-mask data-rel="auto">'+ innerhtml +'</a>';		
+		html = html + '<a href="'+ innerhtml.replace("()", "") +'.html" class="nav-a'+ active +'" data-mask data-rel="auto">'+ innerhtml +'</a>';
 	});
-	
+
 	html += '</nav>';
-	
+
 	html = '<h2><a href="'+ (matchs? 'index.html': '#indexPage') +'" data-rel="auto">mobilebone.js<span class="version"></span></a></h2>' + html;
-	
+
 	aside.innerHTML = html;
 })();
diff --git a/src/mobilebone.css b/src/mobilebone.css
@@ -12,7 +12,6 @@ body {
 	margin: 0;
 	-webkit-user-select: none;
 	user-select: none;
-	-ms-touch-action: none;
 }
 
 /* construction */
diff --git a/src/mobilebone.js b/src/mobilebone.js
@@ -46,7 +46,7 @@
 	 *
 	 * @type string
 	**/
-	Mobilebone.VERSION = '2.7.1';
+	Mobilebone.VERSION = '2.7.2';
 
 	/**
 	 * Whether catch attribute of href from element with tag 'a'
@@ -359,6 +359,7 @@
 
 			// v2.7.0 change rule -> don't auto delete pages
 			//                    -> delete by using Mobilebone.remove();
+			// v2.7.2 add using data-reload="xxxxId" to auto remove pages
 			// Reason Two:
 			// 1. Most websites are so simple that it's not enough to talk about performance;
 			// 2. We can't judge relation by two page's url
@@ -504,7 +505,9 @@
 
 	/**
 	 * Remove page DOM add on v2.7.0
-	 * @param  domOrId: dom-object|string   page DOM or page id.
+	 * @param  domOrId: dom-object|string
+	 *          page DOM or <a> DOM
+	 *          page id or <a> href value
 	 * @return {[type]}         [description]
 	 */
 	Mobilebone.remove = function (domOrId) {
@@ -516,6 +519,9 @@
 		var pageid = domOrId;
 		if (typeof pageid == 'string') {
 			elePage = store[pageid];
+		} else if (elePage.tagName && elePage.tagName.toLowerCase() == 'a') {
+			pageid = this.getCleanUrl(elePage);
+			elePage = store[pageid];
 		}
 
 		if (elePage && elePage.parentElement) {
@@ -1206,14 +1212,17 @@
 			target.preventDefault = function() {};
 		}
 		// get target and href
-		target = target || event.target || event.touches[0], href = target.href;
+		target = target || event.target || event.touches[0];
+		var href = target.href;
 		if ((!href || /a/i.test(target.tagName) == false) && (target = target.getParentElementByTag("a"))) {
 			href = target.href;
 		}
 		// the page that current touched or actived
 		var selfPage = document.querySelector(".in." + Mobilebone.classPage);
 
-		if (selfPage == null || !target) return;
+		if (selfPage == null || !target) {
+			return;
+		}
 
 		// optional params for Mobilebone.transition
 		var options = {
@@ -1287,8 +1296,10 @@
 			if ((external == true || capture == false) && target.getAttribute("data-ajax") != "true") return;
 		}
 
+		var attrHref = target.getAttribute("href");
+
 		// judge that if it's a ajax request
-		if (/^#/.test(target.getAttribute("href")) == true) {
+		if (/^#/.test(attrHref) == true) {
 			// hash slide
 			var idTargetPage = href.split("#")[1], eleTargetPage = idTargetPage && document.getElementById(idTargetPage);
 			if (back == false && rel == "auto") {
@@ -1308,7 +1319,8 @@
 			var cleanUrl = Mobilebone.getCleanUrl(target);
 
 			// if has loaded and the value of 'data-reload' is not 'true'
-			var attrReload = target.getAttribute("data-reload"), id = target.getAttribute("href");
+			var attrReload = target.getAttribute("data-reload");
+
 
 			if ((attrReload == null || attrReload == "false") && store[cleanUrl]) {
 				if (back == false && rel == "auto") {
@@ -1325,9 +1337,19 @@
 			} else {
 				// v2.7.0 move to here
 				if (typeof attrReload == "string" && attrReload != "false") {
-					// remove page
-					Mobilebone.remove(store[cleanUrl]);
+					if (attrReload != '' && attrReload != 'true') {
+						// v2.7.2 a new method to remove pafe
+						// think 'attrReload' as special ID
+						// remove all page using this ID
+						slice.call(document.querySelectorAll('a[data-reload="'+ attrReload +'"]')).forEach(function (ele) {
+							Mobilebone.remove(ele);
+						});
+					} else {
+						// remove page
+						Mobilebone.remove(store[cleanUrl]);
+					}
 				}
+
 				// as ajax
 				Mobilebone.ajax(target);
 			}
diff --git a/test/ajax-html/index.html b/test/ajax-html/index.html
@@ -23,11 +23,11 @@
         <li><a href="ajax-without-page.html" data-title="纯a标签元素返回页面" data-reload>点击加载-返回不含page, 自动创建page</a></li>
         <li><a href="ajax-without-page.html" data-reload>svg中title测试（目标效果为不显示）</a></li>
     </ul>
-    <ul>
+    <ul id="rootReload">
     	<li><a href="root-reload.php?id=1">root-reload.php?id=1加载，缓存</a></li>
         <li><a href="root-reload.php?id=2">root-reload.php?id=2加载，缓存</a></li>
         <li><a href="root-reload.php?id=3">root-reload.php?id=3加载，缓存</a></li>
-        <li><a href="javascript:" id="removePageRootReload">手动清除上面3个页面存储</a></li>
+        <li><button id="removePage">手动清除上面3个页面存储</button> <small>需打开控制台观察</small></li>
     </ul>
     <ul>
         <li><a href="nosuffix">地址就是个简单名词</a></li>
@@ -36,6 +36,12 @@
         <li><a href="b.html">连续加载测试-加载b页面</a></li>
         <li><a href="b.html?a=1">连续加载测试-加载b页面</a></li>
     </ul>
+    <ul>
+        <li><a href="ajax-page.html?v=1" data-reload="anyUniqueId">唯一详情页加载测试 <small>data-reload="anyUniqueId"</small></a></li>
+        <li><a href="ajax-page.html?v=2" data-reload="anyUniqueId">唯一详情页加载测试</a></li>
+        <li><a href="ajax-page.html?v=3" data-reload="anyUniqueId">唯一详情页加载测试</a></li>
+        <li><a href="ajax-page.html?v=4" data-reload="anyUniqueId">唯一详情页加载测试</a></li>
+    </ul>
     <ul>
         <li><a href="http://www.zhangxinxu.com/sp/char.html" target="_blank">外部地址测试，应该直接跳转</a></li>
     </ul>
@@ -48,7 +54,7 @@
 <script src="../../src/mobilebone.js"></script>
 <!-- 厂子的frozenjs兼容测试 -->
 <script src="../base-slide/zepto.js"></script>
-<script src="../base-slide/frozen.js"></script>
+<!-- <script src="../base-slide/frozen.js"></script> -->
 <script>
 // store title
 document.getElementById("pageHome").setAttribute("data-title", document.title);
@@ -99,11 +105,11 @@
 
 Mobilebone.evalScript = true;
 
-var btnRemovePage = document.getElementById('removePageRootReload');
+var btnRemovePage = document.getElementById('removePage');
 if (btnRemovePage) {
     btnRemovePage.addEventListener('click', function () {
-        [].slice.call(document.querySelectorAll('.pageRootReload')).forEach(function (page) {
-            Mobilebone.remove(page);
+        [].slice.call(document.querySelectorAll('#rootReload a')).forEach(function (ele) {
+            Mobilebone.remove(ele);
         });
     });
 }

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,6 @@ body {`
`12`	`12`	`margin: 0;`
`13`	`13`	`-webkit-user-select: none;`
`14`	`14`	`user-select: none;`
`15`		`- -ms-touch-action: none;`
`16`	`15`	`}`
`17`	`16`
`18`	`17`	`/* construction */`