Merge pull request #227 from zhangxinxu/develop

Develop

Author: zhangxinxu

docs/Mobilebone.ajax.html

@@ -12,11 +12,11 @@
 <aside></aside>
 <div class="page out">
 	<div class="content">
-    	<h2>Mobilebone.ajax(trigger_or_options)</h2>
+    	<h2>Mobilebone.ajax(triggerOrOptions)</h2>
         <p>ajax请求页面数据并动态载入。很重要，应该会比较多用到的API，大家需要留意。</p>
         <h3>参数</h3>
         <ul>
-            <li><strong>trigger_or_options</strong> <code>&lt;a&gt;</code>元素或者Ajax请求参数对象。必须参数。</li>
+            <li><strong>triggerOrOptions</strong> <code>&lt;a&gt;</code>元素或者Ajax请求参数对象。必须参数。</li>
         </ul>
         <h3>返回值</h3>
         <p>-</p>

docs/Mobilebone.createPage.html

@@ -12,24 +12,25 @@
 <aside></aside>
 <div class="page out">
 	<div class="content">
-    	<h2>Mobilebone.createPage(dom_or_html[[, element_or_options], options])</h2>
+    	<h2>Mobilebone.createPage(domOrHtml[[, elementOrOptions], options])</h2>
         <p>重要API. 直接根据DOM或者HTML字符串创建页面，并载入。别看API名字较长，好像很复杂，其实很简单滴。</p>
         <h3>参数</h3>
         <ul>
-            <li><code>dom_or_html</code> DOM元素或字符串。必须参数。生成创建页面的主内容。</li>
-            <li><code>element_or_options</code> DOM元素或者对象。可选参数，可以是<code>&lt;a></code>元素，page元素，也可以是第3个<code>options</code>参数。此参数主要用来获得触发元素上绑定的一些属性值，例如<code>data-title</code>。</li>
+            <li><code>domOrHtml</code> DOM元素或字符串。必须参数。生成创建页面的主内容。</li>
+            <li><code>elementOrOptions</code> DOM元素或者对象。可选参数，可以是<code>&lt;a></code>元素，page元素，也可以是第3个<code>options</code>参数。此参数主要用来获得触发元素上绑定的一些属性值，例如<code>data-title</code>。</li>
             <li><code>options</code> 键值序列对象。可选参数。</li>
         </ul>
         <h3>返回值</h3>
         <p>-</p>
-        <h3>更多说明 <time>(add on 2015-05-04)</time></h3>
+        <h3>更多说明 <time>(add on 2015-05-04 and 2017-11-19)</time></h3>
         <ol>
-        	<li>当<code>options</code>参数缺省的时候，第二个参数<code>element_or_options</code>可以作为<code>options</code>参数使用；</li>
+        	<li>当<code>options</code>参数缺省的时候，第二个参数<code>elementOrOptions</code>可以作为<code>options</code>参数使用；</li>
             <li>目前，常用<code>options</code>选项有：
                 <ul>
-                    <li><code>options.history</code> 是否增加历史记录；</li>
-                    <li><code>options.remove</code> 是否移除重复的页面元素；</li>
+                    <li><code>options.id</code> 创建页面的id，如果缺省，Mobilebone会生成唯一id；</li>
+                    <li><code>options.remove</code> 是否移除重复的页面元素（页面仅保留最新创建的），此参数生效需要通常需要指定页面<code>id</code>，Mobilebone内置的<code>ajax()</code>方法会以请求<code>url</code>作为id，如果纯字符或DOM创建，则需要自己指定<code>options.id</code>，否则无法准确删除对应的页面；</li>
                     <li><code>options.target</code> 点击触发过场的元素；</li>
+                    <li><code>options.history</code> 是否增加历史记录；</li>
                 </ul>
                 <p>其他选项，还包括：</p>
                 <ul>
@@ -44,11 +45,14 @@ <h3>更多说明 <time>(add on 2015-05-04)</time></h3>
         <h3>使用示例</h3>
         <pre>Mobilebone.createPage(pageDom);
 Mobilebone.createPage(generalDom);
-Mobilebone.createPage('&lt;div class="page out">xxx&lt;/div>');
-Mobilebone.createPage(‘&lt;p>xxx&lt;/p>');
+Mobilebone.createPage('&lt;div class="page out"&gt;xxx&lt;/div&gt;');
+Mobilebone.createPage('&lt;p&gt;xxx&lt;/p&gt;', {
+    remove: true,
+    id: "idJustUnique"
+});
 Mobilebone.createPage(pageDom, triggerLink);
-Mobilebone.createPage(pageDom, { reponse: ‘&lt;div…>' });
-Mobilebone.createPage(pageDom, triggerLink, { reponse: ‘&lt;div…>' });</pre>
+Mobilebone.createPage(pageDom, { reponse: '&lt;div…&gt;' });
+Mobilebone.createPage(pageDom, triggerLink, { reponse: '&lt;div…&gt;' });</pre>
     </div>
 </div>
 

docs/Mobilebone.isBack.html

@@ -12,15 +12,15 @@
 <aside></aside>
 <div class="page out">
 	<div class="content">
-    	<h2>Mobilebone.isBack(page_in, page_out)</h2>
+    	<h2>Mobilebone.isBack(pageIn, pageOut)</h2>
         <p>比较两个page元素在页面中的前后位置。</p>
         <h3>参数</h3>
         <ul>
-            <li><code>page_in</code> 元素。必须参数。进入的元素。</li>
-            <li><code>page_out</code> 元素。必须参数。离开的元素。</li>
+            <li><code>pageIn</code> 元素。必须参数。进入的元素。</li>
+            <li><code>pageOut</code> 元素。必须参数。离开的元素。</li>
         </ul>
         <h3>返回值</h3>
-        <p>布尔值。如果<code>page_in</code>在<code>page_out</code>的前面，则返回<code>true</code>, 反之<code>false</code>.</p>
+        <p>布尔值。如果<code>pageIn</code>在<code>pageOut</code>的前面，则返回<code>true</code>, 反之<code>false</code>.</p>
     </div>
 </div>
 

docs/Mobilebone.jsonHandle.html

@@ -25,7 +25,7 @@ <h2>Mobilebone.jsonHandle(json)</h2>
 }</pre></p>
         <h3>参数</h3>
         <ul>
-            <li><code>json</code> SON数据。必须参数。</li>
+            <li><code>json</code> JSON数据。必须参数。</li>
         </ul>
         <h3>返回值</h3>
         <p>DOM元素或HTML字符串。</p>

docs/Mobilebone.remove.html

@@ -0,0 +1,42 @@
+<!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文档-Mobilebone.remove</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>Mobilebone.remove(domOrId)</h2>
+        <p>（v2.7.0+）清除页面级别的DOM元素，并连带id标识和缓存一起清除。</p>
+        <h3>参数</h3>
+        <ul>
+            <li><code>domOrId</code> 页面对应DOM元素（默认指类名是<code>.page</code>的元素）或需要删除页面id。必须参数。</li>
+        </ul>
+        <h3>返回值</h3>
+        <p>-</p>
+        <h3>使用示例</h3>
+        <pre><span class="comment">// 移除id为idJustUnique的页面</span>
+Mobilebone.remove("idJustUnique");
+
+<span class="comment">// 移除类名为.pageRootReload的所有页面</span>
+[].slice.call(document.querySelectorAll('.pageRootReload')).forEach(function (page) {
+    Mobilebone.remove(page);
+});</pre>
+    </div>
+</div>
+
+<script src="../src/mobilebone.js"></script>
+<script>
+Mobilebone.captureLink = false;
+window.navKey = "createPage";
+</script>
+<script src="nav.js"></script>
+<script src="docs.js"></script>
+</body>
+</html>

docs/data-callbackKeys.html

@@ -16,12 +16,23 @@ <h2>data-callbackKeys</h2>
         <p>这里的<code>callbackKeys</code>只是一种统称，实际没有这个自定义属性的，指的是一系列回调写法，因为除了长相不一样，其他都类似，所以合在一起讲了。</p>
         <p>其家庭成员包括：</p>
         <ul>
-        	<li><code>data-onpagefirstinto</code> 页面第一次载入执行，过场刚开始即执行。</li>
-        	<li><code>data-callback</code> 页面每次进入都会执行，过场刚开始即执行。</li>
-            <li><code>data-fallback</code> 页面每次离开都会执行，过场刚开始即执行。</li>
-            <li><code>data-animationstart</code> 页面动画即将开始执行的回调，离开页面，进入页面均会触发。</li>
-            <li><code>data-animationend</code> 页面动画结束之后执行的回调，离开页面，进入页面均会触发。</li>
-            <li><code>data-preventdefault</code> 介入回调，可以用来中断Mobilebone的一些默认行为，再过场等行为触发之前实现一些自定义行为。</li>
+        	<li><code>data-onpagefirstinto</code> 页面第一次载入执行，过场刚开始即执行。
+                <p>语法：</p>
+                <pre>onpagefirstinto(pageInto, pageOut, options)</pre>
+                <p>其中<code>pageInto</code>表示进入的页面的DOM，<code>pageOut</code>表示离开的页面的DOM，<code>options</code>为可选参数，具体：</p>
+                <ul>
+                    <li><strong>options.response</strong> 返回的数据。这个参数多半应用在Ajax请求时候。</li>
+                    <li><strong>options.target</strong> （触发过场）点击的页面元素。</li>
+                    <li><strong>options.id</strong> 页面标示<code>id</code>, 一般仅在<code>url</code>请求时候存在。</li>
+                    <li><strong>options.history</strong> 是否在浏览历史中添加一条记录。此属性大可不必关心。</li>
+                    <li><strong>options.remove</strong> 是否删除同<code>id</code>的页面。此属性大可不必关心。</li>
+                </ul>
+            </li>
+        	<li><code>data-callback</code> 页面每次进入都会执行，过场刚开始即执行。<p>语法：</p><pre>callback(pageInto, pageOut, options)</pre></li>
+            <li><code>data-fallback</code> 页面每次离开都会执行，过场刚开始即执行。<p>语法：</p><pre>fallback(pageInto, pageOut, options)</pre></li>
+            <li><code>data-animationstart</code> 页面动画即将开始执行的回调，离开页面，进入页面均会触发。<p>语法：</p><pre>animationstart(page, intoOrOut, options)</pre></li>
+            <li><code>data-animationend</code> 页面动画结束之后执行的回调，离开页面，进入页面均会触发。<p>语法：</p><pre>animationend(page, intoOrOut, options)</pre></li>
+            <li><code>data-preventdefault</code> 介入回调，可以用来中断Mobilebone的一些默认行为，可以过场等行为触发之前实现一些自定义行为。<p>语法：</p><pre>preventdefault(aOrForm)</pre><p>当返回值为<code>true</code>的时候会阻断Mobilebone的一些默认行为。</p></li>
         </ul>
         <p>每个回调的作用于使用场景可参见博文说明：<a href="http://www.zhangxinxu.com/wordpress/2014/10/mobilebone-js-mobile-web-app-core/" class="link">点击这里</a>。</p>
         <p>其中，<code>data-preventdefault</code>并非<code>page</code>元素专有，<code>a</code>元素，<code>form</code>元素也支持此回调，具体可<a href="data-preventDefault.html" class="link">点击这里</a>。</p>

docs/data-classPage.html

@@ -25,6 +25,7 @@ <h3>使用</h3>
 			.tab { position: absolute; width: 100%; height: 100%; white-space: nowrap; text-align: center; }
 			.tab:after { content: ''; display: inline-block; width: 0; height: 100%; vertical-align: middle; }
 			.tab img { vertical-align: middle; }
+            .tab.out{display: none;}
 		</style>
         <div id="tab_container" class="tab_container">
         	<div class="tabview">

docs/data-params.html

@@ -23,7 +23,7 @@ <h2>data-params</h2>
                 <pre>&lt;div id="page" class="page out" data-params="root=$&amp;amp;callback=callback&amp;amp;title="回调"">&lt;/div></pre>
             </li>
             <li><strong>a元素</strong>
-            	<p><code>page</code>元素使用<code>data-params</code>则是Ajax请求参数的意思。Ajax请求的API都是采用jQuery <code>$.ajax()</code>的命名。所以，你可以看到：</p>
+            	<p><code>&lt;a&gt;</code>元素使用<code>data-params</code>则是Ajax请求参数的意思。Ajax请求的API都是采用jQuery <code>$.ajax()</code>的命名。所以，你可以看到：</p>
                 <pre>&lt;a href="ajax.html" data-params="datatype=json&amp;amp;timeout=30000&amp;amp;success=succ_callback" data-title="请求页面标题">点击我&lt;/a></pre>
                 <p>注意这里，<code>data-title</code>不能归到<code>data-params</code>一伙儿，因为，Ajax请求没有<code>title</code>这个参数。</p>
             </li>

docs/data-reload.html

@@ -15,13 +15,30 @@
     	<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>Mobilebone会对Ajax请求的url地址做智能判断，页面上，永远只会有一个同根页面。例如，页面上有两个请求：</p>
-        <pre>&lt;a href="detail.php?id=1">请求详情页1&lt;/a></pre>
-        <pre>&lt;a href="detail.php?id=2">请求详情页2&lt;/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>
+        <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>Mobilebone.remove()</code>方法。</p>
+        <div><strong>(以下v2.7.0移除，不保证完全兼容)</strong></div>
+        <del datetime="2017-11-19 19:27">
+            <p>Mobilebone会对Ajax请求的url地址做智能判断，页面上，永远只会有一个同根页面。例如，页面上有两个请求：</p>
+            <pre>&lt;a href="detail.php?id=1">请求详情页1&lt;/a></pre>
+            <pre>&lt;a href="detail.php?id=2">请求详情页2&lt;/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>&nbsp;</p>
         <div><strong>(以下v2.4.4移除，向前兼容)</strong></div>
         <del datetime="2015-04-09 23:37">

docs/docs.css

@@ -12,8 +12,8 @@ aside a { display: block; padding: 5px 10px; color: #fff; position: relative; }
 .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*=reload]:after, .nav-a[href*=evalScript]:after { position: absolute; content: '更新'; font-size: 12px; transform: scale(0.8); color: pink; }
-.nav-a[href*=evalScript]:after { content: 'NEW'; }
+.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); }
 .nav-a.active { background-color: rgba(0,0,0,.2); box-shadow: inset 0 -1px rgba(255,255,255, .1), inset 0 1px #000; }