作者： admin

avalon.js路由功能–mmRouter.js

mmRouter.js被作者称之为avalon的三柱臣之一（路由，动画，AJAX）

首先解释一下什么是路由。网上解释了一堆也没看明白是什么意思，你可以把路由理解为我们平时上网使用的路由器，多台电脑上网其实也就是公用了一个路由器。

除了avalon.js的mmRouter.js网上还有很多插件或者框架也提供了路由功能，如director.js和angular.js也提供了路由功能，但是兼容性没mmRouter.js做的好。

经过测试mmRouter.js可以兼容IE7浏览器(IE6忽略)目前是兼容性最好的框架。

路由的效果

我们在构建网站后台架构时平时都用frame、frameset来实现，但是如果需要浏览器后退功能就会有问题，貌似不支持。

所以路由可以实现的效果是：

1，局部刷新

2，局部内容更新后，即使刷新也停留在当前页面，并且URL不变

3，在2的基础上，依然能使用浏览器前进和后退的功能

使用ajax依然能保留前进后退的功能可以参考下《为ajax添加前进后退功能–jquery.pjax.js》

mmRouter在线案例：https://sdeno.com/wp-content/uploads/2016/05/mmrouter/index.html

官方文档：https://github.com/RubyLouvre/mmRouter

http://ued.qunar.com/oniui/mmRouter/avalon.mmRouter.doc.html#!/

另外还有一个基于mmRouter.js开发的mmState.js,也就是mmRouter.js的加强版。

2016 05.24
IE8透明filter:alpha
IE8以下浏览器不兼容css的透明度属性，但是微软也提供自己的hack css方法：

经过测试IE7/8都支持以下写法
```
style="filter:alpha(opacity=50)";
```
IE7/8也有各自的写法

IE8里可以这样写
```
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';
```
IE7里可以这样写
```
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
```
2016 05.23

使用requirejs加载avalon.js以及mmRouter路由

requirejs avalon.js requirejs

avalon自带加载器也就是说可以像requirejs那样加载JS，事实上并不是这样，它也就只能加载自家的插件如mmRouter.js或者mmState.js如果你想加载jquery会报错，说明avalon自带的加载器是累赘。就连作者本人司徒正美也不推荐使用了在avalon2.0中也已经废除了。

作者推荐使用：webpack

这么高大尚的东西还需要安装nodejs环境才能使用，我们也可以选择requirejs来使用。

<script src="require.min.js"></script>
<script>
 require.config({
   paths: {
      avalon: 'avalon.shim' //注意这里为avalon自定义名称也只能是自定义为"avalon",因为avalon内部早就自定好了，jquery也是一样的也只能是"jquery"
   },
   shim: {
     'avalon': {
         exports: "avalon" //将avalon对象暴露出来
     }
   }
 });

 require(["domReady!","jquery","avalon","mmRouter"], function() {  //domReady!是等待DOM加载完毕后在运行JS   mmRouter是路由
   document.title=avalon.version; //标题能输出 证明avalon能使用
   var model = avalon.define({
     $id:'test',
     currPath : "",
     params : {},
     query : {},
     args : "[]"
   })

//--------------以下代码能执行证明mmRouter路由也能执行成功了------------------------
   function callback() {
     model.currPath = this.path+$('#jq').text();  // 能输出$('#jq').text()证明是DOM加载完成后执行JS的，也证明jquery能执行
     var params = this.params
     if ("time" in params) {
        params.time = avalon.filters.date(params.time, "yyyy年M月dd日")
     }
     model.params = params
     model.query = this.query
     model.args = "[" + [].slice.call(arguments, 0) + "]"
    }
    avalon.router.get("/aaa/", callback)
    avalon.router.get("/bbb", callback)
    avalon.router.get("/ccc/:ccc", callback)
    avalon.router.get("/ddd/{time:date}/", callback)
    avalon.router.get("/eee/{count:\\d{4}}/", callback)
    avalon.router.get("/fff", callback)
    avalon.history.start({
      basepath: "/avalon"
    })
    avalon.scan();
 })
 </script>

<div id="jq">测试jq</div>

domReady下载：domReady

用法1：

require(["domReady!"], function() {
   //加载DOM结束后JS代码执行这里
});

用法2：

require(["domReady"], function(domReady) {
    domReady(function(){
         //加载DOM结束后JS代码执行这里
    });
});

2016 05.20

为ajax添加前进后退功能–jquery.pjax.js

常规用的ajax可以实现局部刷新，但是使用浏览器后退功能并不能显示上一次的数据

这里推荐jquery.pjax.js插件是基于：jquery+html5的history.pushState+ajax=jquery.pjax.js

效果如：点击用ajax加载出不同的数据，也可以使用后退键倒退显示出之前的数据

//——————-以下—koa2 完整案例————————-

前端：

<script src="http://www.xgllseo.com/zp/pjax/jquery-1.8.3.min.js"></script>
<script src="http://www.xgllseo.com/zp/pjax/jquery.pjax.js"></script>

<body>

<a class="a_pjax" href="/1">内容1</a>  <!--请求的接口数据 {xx:1}-->
<a class="a_pjax" href="/2">内容2</a>  <!--请求的接口数据  {xx:2}-->

<div id="pjax-container">
  这里是默认显示的内容
</div>

<script>

    $(document).pjax('.a_pjax', {
      type:'get',
      push:true,  //默认是true就是使用pjax,如果设置false就使用ajax方式了（一般默认）
      replace:false, //默认是false也就是可以使用pjax的后退功能，设置true后退功能就失效（一般默认）
      container:'#pjax-container', //内容插入到此容器的内部
      // fragment:'#wo',  //筛选指定内容插入到容器中,选中把id为wo的容器里面的内容
      //timeout:650, //如果超出自定时间，就按默认方式跳转
      dataType:"html" //json  xml html text jsonp
    });


    //请求接口成功后 回调
    $(document).on('pjax:success',function(data, status, xhr, options){
       console.log(data);
      $('#pjax-container').text(JSON.parse(status).xx);  //{xx:'1'}
       console.log(xhr);
       console.log(options);
    });


</script>
</body>

后端：

router.get('/:id?', async (ctx, next) => {
  
  if(ctx.params.id==1){
   // ctx.type='json';
    ctx.body={xx:'1'};
  }else if(ctx.params.id==2){
   // ctx.type='json';
    ctx.body={xx:'2'};
  }else{
    await ctx.render('index', {
      title: 'Hello Koa 2!'
    })
  }

})

//——————–以上–koa2 完整案例————————-

使用条件：

1，jquery 1.8.x版本以上

2，浏览器兼容IE10以上

浏览器兼容性表：

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
replaceState, pushState	5	4.0 (2.0)	10	11.50	5.0
history.state	18	4.0 (2.0)	10	11.50	6.0

具体的pushState可以参考：

张鑫旭：http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

jquery.pjax.js官网：https://github.com/defunkt/jquery-pjax

$.pjax.disable(); //禁用pjax
$.support.pjax; //检测浏览器是否支持pjax
$.pjax.defaults.timeout = 1200 //通过全局方式修改参数

$(document).pjax('#a_pjax', {
  type:'post',
  push:true, //默认是true就是使用pjax,如果设置false就使用ajax方式了（一般默认）
  replace:false, //默认是false也就是可以使用pjax的后退功能，设置true后退功能就失效（一般默认）
  container:'#pjax-container', //内容插入到此容器的内部
  fragment:'#wo', //筛选指定内容插入到容器中,选中把id为wo的容器里面的内容
  timeout:650, //如果超出自定时间，就按默认方式跳转
  dataType:"html"
});

事件	取消	参数	说明
pjax链接事件的生命周期
pjax:click	✔︎	options	链接被激活的时候触发；取消的时候阻止pjax
pjax:beforeSend	✔︎	xhr, options	可以设置XHR头
pjax:start		xhr, options
pjax:send		xhr, options
pjax:clicked		options	pjax通过链接点击已经开始之后触发
pjax:beforeReplace		contents, options	从服务器端加载的HTML内容完成之后，替换当前内容之前
pjax:success		data, status, xhr, options	从服务器端加载的HTML内容替换当前内容之后
pjax:timeout	✔︎	xhr, options	在`options.timeout`之后触发；除非被取消，否则会强制刷新页面
pjax:error	✔︎	xhr, textStatus, error, options	ajax请求出错；除非被取消，否则会强制刷新页面
pjax:complete		xhr, textStatus, options	无论结果如何，都在ajax响应完成后触发
pjax:end		xhr, options
浏览器前进后退事件的生命周期
pjax:popstate			`direction`事件的属性: “back”/”forward”
pjax:start		null, options	内容替换之前
pjax:beforeReplace		contents, options	在用缓存中的内容替换HTML之前
pjax:end		null, options	替换内容之后
pjax:callback		null, options	页面脚本加载完成后（Admui项目）

//类似于pjax的回调函数

$(document).on('pjax:beforeSend',function(e){
 alert(1); //在进行pjax前先执行
});

$(document).on('pjax:success',function(e){
 $('#pjax-container div:eq(1)').remove(); // 成功后的回调
});

演示地址：https://sdeno.com/zp/pjax/1.html 可以在ajax的基础上使用浏览器的前进后退功能了

2016 05.19

HTML5模拟安卓手机下拉置顶刷新效果–dragloader.js

弹簧

dragloader.js是一个面向移动Web开发的JavaScript库，帮助开发者在使用页面原生滚动时，模拟上/下拉手势，实现Pull to Request操作。

在移动设备上，一般会使用 pull down 手势实现加载最新

使用 pull up 手势实现加载更多

使用IScroll实现： http://jsbin.com/AtIGeKe/latest

使用dragloader.js的实现： http://jsbin.com/UGajALA/latest

参数：

Boolean : disableDragDown true禁用下拉操作

Boolean : disableDragUp true禁用上拉操作

Number : threshold 默认上/下拉区域临界值，超过这个值状态将由“default”变为“perpare”，默认80

Number : dragDownThreshold 下拉区域临界值，超过这个值状态将由“default”变为“perpare”

String : dragUpThreshold 上拉区域临界值，超过这个值状态将由“default”变为“perpare”

String : dragDownRegionCls 下拉区域样式

String : dragUpRegionCls 上拉区域样式

Function : dragDownHelper( String status ) 下拉区域html更新函数，需要根据不同状态返回html碎片，status取值范围：’default’、’prepare’、’load’

Function : dragUpHepler( String status ) 上拉区域html更新函数，需要根据不同状态返回html碎片，status取值范围：’default’、’prepare’、’load’

Boolean : preventDragHelper 禁用dragHelper，由外部控制dragHelper

Function : beforeDrag() drag开始回调函数，返回false时，本次drag动作将失效

Function : onDragDownDefault() 当下拉区域drag状态更新为’default’时触发

Function : onDragDownPrepare() 当下拉区域drag状态更新为’prepare’时触发

Function : onDragDownLoad() 当下拉区域drag状态更新为’load’时触发

Function : onDragUpDefault() 当上拉区域drag状态更新为’default’时触发

Function : onDragUpPrepare() 当上拉区域drag状态更新为’prepare’时触发

Function : onDragUpLoad() 当上拉区域drag状态更新为’load’时触发

Methods

Function : setDragDownDisabled(Boolean disabled) 设置下拉区域禁用状态

Function : setDragUpDisabled(Boolean disabled) 设置上拉区域禁用状态

Function : reset() 重置drag状态。无论何时，必须由业务功能主动调用reset()接口，以还原状态。比如在onDragDownLoad()回调中使用ajax加载数据时，在ajax的回调函数中应当调用reset()重置drag状态。如果不重置，drag操作将失效.

下载：dragloader

2016 05.12

作者： admin

avalon.js路由功能–mmRouter.js

路由的效果

IE8透明filter:alpha

使用requirejs加载avalon.js以及mmRouter路由

为ajax添加前进后退功能–jquery.pjax.js

//类似于pjax的回调函数

HTML5模拟安卓手机下拉置顶刷新效果–dragloader.js