关于light7使用路由经验总结及踩的坑

关于light7库的使用经验总结

---

前言:
当你看到这片文章的时候相信你一时间没有找到解决的办法.因为我就是在网上百度不到相关解决的办法,所以那就静下心认真看完这片文章相信你一定会有收获的…最近在使用一个移动库-light7,也在网上看了一些的框架和库也觉得他们挺不错的,但还是选择了这个,主要是因为这个的坑相比较而言少一点.好了废话不多说了.下面进入主题

本文章代码展示少,主要介绍解决问题的思路和方法.便于下次你自己可以独立解决

本文将对以下在使用过程大多会出现的问题来进行介绍

1. 路由相关的坑
2. ajax请求失败的坑
3. 链接失效的坑

以上三点就是出现错误最多的地方,自己上网百度也没有啥有价值的结果,自己在解决了这些错误后记录下来方便以后查看…,当然也许还有很多,相比较这些可能那些查看文档的话就能解决了.好了进入正题

***使用前页面初始化
加载文档时初始化页

$(document).ready(function(){//关键

	//$.init()初始化每个页面对应的pageinit
	//页面1
	$(document).on("pageInit", "#page-1", function(e, id, page) {
	//代码块
    });
    //页面2
	$(document).on("pageInit", "#page-2", function(e, id, page) {
	//代码块
    });
    $.init(); //页面初始化,很重要,很重要,很重要!
  
});

一.路由使用不当导致页面跳转无响应

light7这个库很巧妙,自己用自己的路由的功能,所以使用时不知道的话,可能会绕一大圈回来.浪费很多时间.在使用路由的时候你是否理解什么是路由..如果理解的话就继续往下看,不理解的话就上网百度一下,这里就不做过多解释了. 在使用这个库的时候你是否注意当你点击每个页面链接跳转的时候,只是参数改变了而已,页面却没有发生整体刷新这就与路由有关了

<script>
  $.config = { //在$.config中可以修改默认值
    autoInit: false,  //autoInit的默认值是false,不建议用true
    
  }
</script>

light7这个路由支持在同一个html中内联多个页面，ajax加载新页面，前进和后退操作.
当通过ajax加载新页面的时候，路由器会自动忽略新页面的JS和CSS脚本。所以请把全部页面的脚本都打包到入口页面
当说到这里可能对这个库的路由有了一点的认识了:就是这个库有自己的路由,链接跳转,页面转换都是通过路由来实现的.

二.ajax请求失败无响应

在说到请求后台数据的时候,可能大多人会想到ajax,但今天给大家介绍另一种方法Fetch();请大家继续往下看,因为这个方法和本文章有关
自己在做小demo的时候,就用到了ajax请求.本以为顺顺利利的请求出去. 但这里又进入了坑: 再去请求数据的时候为啥无响应啊. F12看一下,~what? 连请求都发不出? 这是什么情况,就赶紧去看了文档. 最后自己总结的结果就是无法用ajax请求外部(后台)数据…可能这个结论有点牵强,但结果就是这样. 所有就换了个请求方式Fetch(),这个方法可以合理的方式来跨网络异步获取资源。至于具体的使用和介绍,缺点啥的我就不介绍了.
说到这儿,相信大家知道自己解决ajax无反应办法的思路了

三.关于链接失效

默认情况下，路由器会自动拦截所有的链接点击事件，如果你希望一个链接通过浏览器原生跳转而不使用路由器，你可以在连接上增加一个class="external"或者external
在light7版本v0.4.3 中router 现在会忽略 href=“javascript:;” 链接.

四.总结

认真,仔细看文档!!!