HTML5技术

HTML5 极简的JS函数 - zxh91989(3)

字号+ 作者:H5之家 来源:H5之家 2017-12-07 12:10 我要评论( )

mui.back()仅处理窗口逻辑,若希望在窗口关闭之前再处理一些其它业务逻辑,则可将业务逻辑抽象成一个具体函数,然后注册为mui.init方法的beforeback参数;beforeback的执行逻辑为: 执行beforeback参数对应的函数若

mui.back()仅处理窗口逻辑,若希望在窗口关闭之前再处理一些其它业务逻辑,则可将业务逻辑抽象成一个具体函数,然后注册为mui.init方法的beforeback参数;beforeback的执行逻辑为:

  • 执行beforeback参数对应的函数若返回false,则不再执行mui.back()方法;
  • 否则(返回true或无返回值),继续执行mui.back()方法;
  • 示例:从列表打开详情页面,从详情页面再返回后希望刷新列表界面,此时可注册beforeback参数,然后通过通知列表页面刷新数据,示例代码如下:

    mui.init({ beforeback: function(){ //获得列表界面的webview var list = plus.webview.getWebviewById('list'); //触发列表界面的自定义事件(refresh),从而进行数据刷新 mui.fire(list,'refresh'); //返回true,继续页面关闭逻辑 return true; } });

    注意:beforeback的执行返回必须是同步的(阻塞模式),若使用nativeUI这种异步js(非阻塞模式),则可能会出现意想不到的结果;比如:通过plus.nativeUI.confirm()弹出确认框,可能用户尚未选择,页面已经返回了(beforeback同步执行完毕,无返回值,继续执行mui.back()方法,nativeUI不会阻塞js进程):在这种情况下,若要自定义业务逻辑,就需要复写mui.back方法了;如下为一个自定义示例,每次都需要用户确认后,才会关闭当前页面

    //备份mui.back,mui.back已将窗口关闭逻辑封装的比较完善(预加载及父子窗口),因此最好复用mui.back var old_back = mui.back; mui.back = function(){ var btn = ["确定","取消"]; mui.confirm('确认关闭当前窗口?','Hello MUI',btn,function(e){ if(e.index==0){ //执行mui封装好的窗口关闭逻辑; old_back(); } }); }

    注意:自定义关闭逻辑时,一定要重写mui.back,不能简单通过addEventListener增加back按键监听, 因为addEventListener只会增加新的执行逻辑,老的监听逻辑依然会执行;

          

    Ajax

    mui框架基于htm5plus的,封装了常用的Ajax函数,支持GET、POST请求方式,支持返回json、xml、html、text、script数据类型; 本着极简的设计原则,mui提供了mui.ajax方法,并在mui.ajax方法基础上,进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。

    mui.ajax()方法通过HTTP请求加载远程数据,是mui框架底层Ajax的实现方法,使用方法:mui.ajax(url[,setting]),其中url表示请求发送的目标地址,setting是一个json对象,支持的参数主要包括:

    参数 类型 描述

    data Object 发送到服务器的数据,可以是json对象或字符串

    dataType String 预期服务器返回的数据类型;如果不指定,mui将自动根据HTTP包的MIME头信息自动判断;支持设置的dataType可选值:

    error Function 请求失败时触发的函数,该函数接收三个参数:

    success Function 请求成功时触发的回调函数,该函数接收三个参数:

    timeout Number 请求超时时间(毫秒),默认值为0,表示永不超时;若超过设置的超时时间(非0的情况),依然未收到服务器响应,则触发error回调

    type String 请求方式,目前仅支持'GET'和'POST',默认为'GET'方式

    代码示例:如下为通过post方式向某服务器发送鉴权登录的代码片段

    mui.ajax('http://server-name/login.php',{ data:{ username:'username', password:'password' }, dataType:'json',//服务器返回json格式数据 type:'post',//HTTP请求类型 timeout:10000,//超时时间设置为10秒; success:function(data){ //服务器返回响应,根据响应结果,分析是否登录成功; ... }, error:function(xhr,type,errorThrown){ //异常处理; console.log(type); } });

    mui.post()方法是对mui.ajax()的一个简化方法,直接使用POST请求方式向服务器发送数据、且不处理timeout和异常(若需处理异常及超时,请使用mui.ajax()方法),使用方法: mui.post(url[,data][,success][,dataType]),如上登录鉴权代码换成mui.post()后,代码更为简洁,如下:

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • html5知识点:简析正则表达式 - 千千小助

      html5知识点:简析正则表达式 - 千千小助

      2017-12-02 08:02

    • html5知识点:CSS3新增选择器 - 千千小助

      html5知识点:CSS3新增选择器 - 千千小助

      2017-11-30 09:00

    • 推荐10个适合初学者的 HTML5 入门教程 - 赵一航

      推荐10个适合初学者的 HTML5 入门教程 - 赵一航

      2017-11-27 08:03

    • html5知识点:HTML5新特性 - 千千小助

      html5知识点:HTML5新特性 - 千千小助

      2017-11-24 18:00

    网友点评
    v