Navigation.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. /*
  2. 前进后退处理区域
  3. 用于场景
  4. 1、导航前进后退处理
  5. 2、记录用户步骤处理
  6. 3、url前进后退处理
  7. */
  8. Namespace.register("U.UF.N");
  9. //#region 前进后退使用处理区域
  10. U.UF.N.goList = {}; //前进后退处理
  11. U.UF.N.route = null //url处理
  12. /**
  13. * 前进后退公开调用区域
  14. *
  15. * @param {string} 前进后退在指定的域
  16. * @param {boolean} 是否重新加载
  17. */
  18. U.UF.N.createNav = function (str, bool) {
  19. var _obj = U.UF.N.goList;
  20. //根据类类型 获取前进后退类
  21. if (_obj[str] && bool !== true) { //已经存在域的前进后退
  22. return _obj[str].context;
  23. }
  24. else { //创建一个新的前进后退处理
  25. return new U.UF.N.initNav(str);
  26. }
  27. }
  28. /**
  29. * 注册前进后退
  30. *
  31. * @param {string} 前进后退在指定的域 如 disk 那就在disk导航
  32. */
  33. U.UF.N.initNav = function (str) {
  34. /*
  35. 描述
  36. -----OF: 当前前进后退集合
  37. -----OL: 前进后退所在的位置
  38. -----UT: 当前的域
  39. */
  40. this.cb = [];
  41. this.length = 0;
  42. this.context = this;
  43. U.UF.N.goList[str] = this; //添加到集合里面
  44. }
  45. /**
  46. * 添加前进后退
  47. *
  48. * @param {function} 前进后退函数添加
  49. * @param {string} 前进后退在指定的域
  50. */
  51. U.UF.N.addEvent = function (callback, str) {
  52. var _goList = U.UF.N.createNav(str); // 获取前进后退类
  53. _goList.addHandleEvent(callback); // 注册前进后退事件
  54. callback(); //添加执行前进后退
  55. }
  56. /**
  57. * 添加前进后退事件
  58. *
  59. * @param {function} 前进后退函数添加
  60. */
  61. U.UF.N.addHandleEvent = function (callback) {
  62. this.cb.splice(this.length, this.cb.length - this.length, callback); //添加一个回调函数
  63. // this.cb.length - this.length 始终为0
  64. this.length++; //位置加一
  65. }
  66. /**
  67. * 前进后退统一处理区
  68. * 该函数必须得先后退才能前进
  69. *
  70. * @param {number} 前进后退处理参数
  71. ----------1 后退处理
  72. ----------0 前进处理
  73. */
  74. U.UF.N.handle = function (num) {
  75. var _callback = this.cb[this.length - num * 2]; //获取前进后退事件
  76. // 若 num 为1 则 this.cb[this.length - num * 2] 为 this.cb[this.length - 1]
  77. // 若 num 为0 则 this.cb[this.length - num * 2] 为 this.cb[this.length]
  78. if (_callback) {
  79. _callback();
  80. this.length += ((-num * 2) + 1); //前进后退执行
  81. // 若 num 为1 则 将 this.length - 1
  82. // 若 num 为0 则 将 this.length + 1
  83. }
  84. }
  85. /**
  86. * 后退执行
  87. *
  88. * @param {string} 前进后退在指定的域
  89. */
  90. U.UF.N.backOff = function (str) {
  91. U.UF.N.goList[str]["context"].handle(1);
  92. }
  93. /**
  94. *
  95. * 前进执行
  96. *
  97. * @param {string} 前进后退在指定的域
  98. */
  99. U.UF.N.goAhead = function (str) {
  100. U.UF.N.goList[str]["context"].handle(0);
  101. }
  102. /**
  103. *
  104. * 获取当前位置
  105. *
  106. * @param {string} 前进后退在指定的域
  107. * @return {object} 返回位置信息
  108. * 数据结构如下: {
  109. * count: 总计层级,
  110. * now: 当前层级(1为根级导航 当当前层级等于总计层级时为最后一级导航)
  111. * }
  112. */
  113. U.UF.N.getLocation = function (str) {
  114. return {
  115. count: U.UF.N.goList[str].cb.length,
  116. now: U.UF.N.goList[str].length
  117. }
  118. }
  119. //设置原型 运行实例化使用
  120. U.UF.N.initNav.prototype = {
  121. addEvent: U.UF.N.addEvent,
  122. addHandleEvent: U.UF.N.addHandleEvent,
  123. handle: U.UF.N.handle,
  124. backOff: U.UF.N.backOff,
  125. goAhead: U.UF.N.goAhead
  126. }
  127. //#endregion
  128. //#region 网页路由使用
  129. //
  130. U.UF.N.isActive = false;
  131. /*
  132. * 作用:初始化函数,每次修改hash值的时候都会触发这个函数,调用onhashchange事件
  133. * @param {callback} fun 回调函数,进行数据的操作
  134. */
  135. U.UF.N.route = function (fun) {
  136. //当浏览器前进后退修改hash值时,触发onhashchange事件
  137. if (document.all && !document.documentMode) { //辨别IE,IE8才有documentMode
  138. /* 低于IE8的IE系列采用定时器监听 */
  139. setInterval(function () { U.UF.N.changeHashCallBack(fun) }, 100); //每隔0.1秒监听一次hash值,发生变化时,触发U.UF.N.changeHashCallBack()这个函数
  140. }
  141. else {
  142. window.onhashchange = function () { U.UF.N.changeHashCallBack(fun) }; //当hash值改变时,触发函数U.UF.N.changeHashCallBack()
  143. }
  144. }
  145. /*
  146. * 作用:给需要添加hash的元素添加hash值
  147. * @param {string} hashname 添加hash的name
  148. */
  149. U.UF.N.addHash = function (hashname) {
  150. U.UF.N.setHash(hashname); //给需要添加hash值的元素设置hash值,参数为添加hash的name
  151. }
  152. /*
  153. * 作用:给需要添加hash值的元素设置hash值
  154. * @param {element} id 添加hash的值
  155. */
  156. U.UF.N.setHash = function (id) {
  157. U.UF.N.isActive = true; //设置成程序主动模式
  158. location.hash = id; //给当前的hash值设值为用户自定义的hash的name
  159. //计时器处理
  160. setTimeout(function () {
  161. //计时器处理,等浏览器响应hash后设置为非主动模式
  162. U.UF.N.isActive = false;
  163. }, 10)
  164. }
  165. /*
  166. * 作用:获取当前的hash值
  167. */
  168. U.UF.N.getHash = function () {
  169. var _nowhash = location.hash; //获取当前的hash值
  170. if (!_nowhash) {//判断是否有这个hash值
  171. return ''; //如果没有返回空
  172. }
  173. else {//如果有
  174. return location.hash; //返回当前的hash值
  175. }
  176. }
  177. /*
  178. * 作用:当hash改变之后,会触发这个函数
  179. */
  180. U.UF.N.changeHashCallBack = function (fun) {
  181. //如果不是通过程序添加的处理,而是用户自己输入到地址栏的处理
  182. if (!U.UF.N.isActive) {
  183. var _newhash = U.UF.N.getHash(); //获取当前的hash值
  184. var _hash = _newhash.substr('1'); //获取hash值的#符号后面的内容
  185. if (_hash != "") { //判断U.UF.N.Data的json数据中是否存在这个hash值
  186. fun(_hash);
  187. }
  188. else if (_hash == "") {
  189. window.history.forward(1); //如果是,禁止后退
  190. }
  191. }
  192. }
  193. //#endregion