AppFramework3.0学习（1）

摘要: 分项AppFramework3.0在学习和使用过程的心得

最近公司做项目，用到了AppFramework，在这里分享下自己的理解和使用的心得，也当做自己的备忘。

AppFramework的前身是jqmobi，关于这个框架的简介，可以参考这两篇文章：
http://www.it165.net/pro/html/201410/24540.html http://blog.csdn.net/vincentblog/article/details/43541107
AppFramework的页面结构

view：一个view只能有一个header和一个footer,可以有多个pages

header：头部，多个pages公用一个header

pages：一个pages可以有多个panel

panel：panel则是要显示给我们的内容

footer：底部，多个page公用一个footer

示例代码

<!--目前我还只会在一个页面中使用一个view的阶段。//-->
<div class="view" id="mainview">
<header id="global_header">
<h1>What</h1>
</header>

<div class="pages">
<!--panel是页面显示的地方//-->
<div data-left-drawer="left" class="panel" style="background:#f0f0f0;" id="main" data-title="主界面" data-selected="true" data-include="main.html">
</div>

</div>
<!--底部导航开始//-->
<footer>
<a href="#main" class="icon home" data-transition="slide" data-title="标签1">标签1</a>
<a href="demo/tab2.html" class="icon user" data-transition="slide" data-title="标签2">标签2</a>
<a href="demo/tab3.html" class="icon user" data-transition="slide" data-title="标签3">标签3</a>
</footer>
<!--底部导航结束//-->

</div>

AppFramework页面加载逻辑大概是这样的：

1、除了首页的加载其他页面，其他页面的加载，均以ajax的形式向服务器请求，获取页面后封装在一个panel里面；

2、如果panel设置了属性data-include（如示例代码中的id="main"的panel），在首页加载的时候，会事先通过ajax请求页面，封装在这个panel下；

3、如果是点击加载的新页面（如示例代码中的footer下的标签2），会新建一个panel，并且通过ajax将页面加载到这个panel中，并且将href里的url，根据统一的加密算法（每个url产生一个唯一的值）生成一个值作为panel的id；

4、页面中的anchor（a标签），如果设置了href属性值，被点击的时候，会遵循以下逻辑：

如果属性值是以#开头（href="#xxx"），将会在页面搜寻id="xxx"的panel，这个一般用于设置了data-include的pannel；

如果属性值是url，根据url计算出一个id，根据id在页面中搜索panel，如果存在，直接显示；如果不存在，重新ajax请求；

5、panel默认是隐藏的（display:none），只有加上class active才会显示（display:block）；如果设置了属性data-selected="true"，页面加载时会默认将panel显示出来；

6、header默认显示panel的data-title属性里的值，如果没有定义data-title，默认显示路径；

7、panel的data-title属性，来自被点击的anchor（a标签）的data-title属性，如果没有定义data-title，默认显示路径；

。。。未完待续

写得有点乱，请见谅