Source: Router.js

  1. /***
  2.  * Created by lzq on 2018/11/02
  3.  * Router.js
  4.  */
  6. import $ from "jquery";
  7. import React from 'react';
  8. import PropTypes from 'prop-types';
  9. import CtMobileFactory from "./CtMobile";
  10. import Constant from "./Constant";
  11. import {Consumer} from "./GlobalContext";
  13. /**
  14.  * 初始化
  15.  * @access private
  16.  */
  17. function initial() {
  18.   const self = this;
  20.   onHashchange = onHashchange.bind(this);
  22.   /***
  23.    * 注册hashchange事件
  24.    */
  25.   window.addEventListener("hashchange", onHashchange, false);
  27.   /***
  28.    * 注册页面转场事件
  29.    */
  30.   $(window.document).on("pageBeforeChange", function (e, params) {
  31.     self.setParameter(params);
  32.   });
  33. }
  35. /**
  36.  * hashchange的回调函数
  37.  * @access private
  38.  * @callback
  39.  */
  40. function onHashchange() {
  41.   // #page1_134567890232323?id=123_456
  42.   const hash = window.location.hash;
  43.   hashChange.call(this, hash);
  44. }
  46. /**
  47.  * hashChange的处理
  48.  * @access private
  49.  * @param {string} hash - 哈希值
  50.  * @param {Object} option - {
  51.  *  reload :[true | false]
  52.  * }
  53.  */
  54. function hashChange(hash, option) {
  55.   const self = this;
  56.   /***
  57.    * 转场的id(没有重复)
  58.    * @type {string}
  59.    */
  60.   let id = "";
  62.   if (hash) {
  63.     id = hash.indexOf("?") !== -1
  64.       ? hash.substring(1, hash.indexOf("?"))
  65.       : hash.substring(1);
  67.     const index = id.lastIndexOf("_");
  68.     /***
  69.      * 用户自定义的锚点跳转
  70.      */
  71.     if (index === -1) {
  72.       return false;
  73.     } else {
  74.       const pageId = id.substring(0, index);
  75.       /***
  76.        * 用户自定义的锚点跳转
  77.        */
  78.       if (!window.document.querySelector("[data-ct-data-role='page'],#" + pageId)) {
  79.         return false;
  80.       }
  81.       self.ctmobile.fireEvent(window.document, "pageBeforeChange", [CtMobileFactory.getUrlParam(hash)]);
  82.     }
  83.   }
  84.   /***
  85.    * 首页
  86.    */
  87.   else {
  88.     self.ctmobile.fireEvent(window.document, "pageBeforeChange", [CtMobileFactory.getUrlParam(hash)]);
  89.     if (/*如果栈顶元素的pageId == 模板中第一页的id*/
  90.     self.ctmobile.getFirstPage().getPageId() === self.ctmobile.getFirstPageId()) {
  91.       // 说明是从模板的第一页进入主应用的
  92.       id = self.ctmobile.getFirstPage().getId();
  93.     }
  94.     else {
  95.       // 不是从模板的第一页进入主应用的
  96.       self.ctmobile.createPage(self.ctmobile.getId(self.ctmobile.getFirstPageId()), (Component) => {
  97.         Component.start(Constant._SLIDEDURATION, () => {
  98.           self.removeFirstPage();
  99.         });
  100.       });
  101.       return;
  102.     }
  103.   }
  105.   //hash ? (hash.indexOf("?") != -1
  106.   //    ? id = hash.substring(1, hash.indexOf("?"))
  107.   //    : id = hash.substring(1))
  108.   //    : id = root.getFirstPage().getId();
  110.   /***
  111.    * 新的页面
  112.    */
  113.   const curPage = self.getPageById(id);
  114.   if (!curPage) {
  115.     self.ctmobile.createPage(id, (Component) => {
  116.       Component.start(Constant._SLIDEDURATION, function () {
  117.         // 如果不改变浏览器历史且历史栈长度大于1
  118.         if (option && option.reload && self.getHistoryLength() > 1) {
  119.           const preHistoryIndex = self.getHistoryLength() - 2;
  120.           const preHistoryPage = self.getPageByIndex(preHistoryIndex);
  121.           if (preHistoryPage) {
  122.             preHistoryPage.finish(0, null, option);
  123.           }
  124.         }
  125.       });
  126.     });
  127.   }
  128.   /***
  129.    * 回退
  130.    */
  131.   else {
  132.     //  如果刷新的是栈顶的页面
  133.     if (id === self.getLastPage().getId()) {
  134.       return false;
  135.     } else {
  136.       // 依次出栈
  137.       const index = self.ctmobile.indexOfById(id);
  138.       for (let i = self.getHistoryLength() - 1; i > index; i--) {
  139.         if (i === index + 1) {
  140.           self.getPageByIndex(i).finish(Constant._SLIDEDURATION);
  141.         } else {
  142.           self.getPageByIndex(i).finish(0);
  143.         }
  144.       }
  145.     }
  146.   }
  147. }
  149. /**
  150.  * history中是否有pageId开头的page对象
  151.  * @access private
  152.  * @param {string} pageId
  153.  * @return {number}
  154.  */
  155. function indexOfHistoryByPageId(pageId) {
  156.   if (pageId.indexOf("?") !== -1) {
  157.     pageId = pageId.substring(0, pageId.indexOf("?"));
  158.   }
  160.   let index = -1;
  161.   for (let i = 0, len = this.getHistoryLength(); i < len; i++) {
  162.     if (this.getPageByIndex(i).getPageId() === pageId) {
  163.       index = i;
  164.       break;
  165.     }
  166.   }
  167.   return index;
  168. }
  170. /**
  171.  * Link
  172.  * @class Link
  173.  * @classdesc 用来管理跳转的链接
  174.  */
  175. class Link extends React.Component {
  176.   render() {
  177.     const {className = '', style = {}} = this.props;
  178.     return (
  179.       <Consumer>
  180.         {(ctmobile) => {
  181.           return (
  182.             <a
  183.               className={className}
  184.               style={style}
  185.               onClick={() => {
  186.                 const {pageId = '', parameter = '', reload = ctmobile.config.linkCaptureReload} = this.props;
  187.                 const href = `${"#" + pageId}?pageId=${pageId}${parameter}`;
  188.                 ctmobile.router.startPage(href, {
  189.                   reload,
  190.                 });
  191.               }}>{this.props.children}</a>
  192.           );
  193.         }}
  194.       </Consumer>
  195.     );
  196.   }
  197. }
  199. /**
  200.  * CheckLinkComponentProps
  201.  * @param {string} className - className
  202.  * @param {Object} style - style
  203.  * @param {string} pageId - pageId
  204.  * @param {string} parameter - 页面参数
  205.  * @param {boolean} reload - 是否替换历史
  206.  */
  207. Link.propTypes = {
  208.   className: PropTypes.string,
  209.   style: PropTypes.object,
  210.   pageId: PropTypes.string,
  211.   parameter: PropTypes.string,
  212.   reload: PropTypes.bool
  213. };
  215. /**
  216.  * Back
  217.  * @class Back
  218.  * @classdesc 用来管理返回的操作
  219.  */
  220. class Back extends React.Component {
  221.   render() {
  222.     const {className = '', style = {}} = this.props;
  223.     return (
  224.       <Consumer>
  225.         {(ctmobile) => {
  226.           return (
  227.             <a
  228.               className={className}
  229.               style={style}
  230.               onClick={() => {
  231.                 ctmobile.router.go(-1);
  232.               }}>{this.props.children}</a>
  233.           );
  234.         }}
  236.       </Consumer>
  237.     );
  238.   }
  239. }
  241. /**
  242.  * CheckBackComponentProps
  243.  * @param {string} className - className
  244.  * @param {Object} style - style
  245.  */
  246. Back.propTypes = {
  247.   className: PropTypes.string,
  248.   style: PropTypes.object,
  249. };
  251. export {Link, Back};
  253. /**
  254.  *  Router
  255.  *  @class Router
  256.  *  @classdesc 管理所有路由相关操作
  257.  */
  258. class Router {
  259.   /**
  260.    * @constructor
  261.    * @param {CtMobile} ctmobile
  262.    */
  263.   constructor(ctmobile) {
  264.     Object.assign(this, {
  265.       ctmobile,
  266.       parameter: null,
  267.       history: [],
  268.     });
  270.     initial.call(this);
  271.   }
  274.   /**
  275.    * 页面跳转
  276.    * @param {string} href (pageId = pageId + params) 如: page1?a=1&b=2;
  277.    * @param {object} option {
  278.    *    reload : [true | false]
  279.    * }
  280.    */
  281.   startPage(href, option) {
  282.     const self = this;
  284.     let pageId = "", paramsQuery = "";
  286.     // Ajax加载
  287.     if (href.indexOf("#") !== 0) {
  288.       let params = CtMobileFactory.getUrlParam(href);
  289.       pageId = params.pageId;
  291.       delete params.pageId;
  292.       let paramsQueryArr = [];
  293.       for (let p in params) {
  294.         if (params.hasOwnProperty(p)) {
  295.           paramsQueryArr.push(p + "=" + params[p]);
  296.         }
  297.       }
  298.       paramsQuery = paramsQueryArr.join("&") ? ("?" + paramsQueryArr.join("&")) : "";
  300.       dispatcher();
  301.     }
  302.     // 本地锚点加载
  303.     else {
  304.       href = href.substring(1);
  305.       if (href.indexOf("?") !== -1) {
  306.         paramsQuery = href.substring(href.indexOf("?"));
  307.         pageId = href.substring(0, href.indexOf("?"));
  308.       } else {
  309.         pageId = href;
  310.       }
  311.       dispatcher();
  312.     }
  314.     /***
  315.      * 分派
  316.      */
  317.     function dispatcher() {
  318.       /***
  319.        * 获取page的模式
  320.        */
  321.       const mode = self.ctmobile.getPageConfigAttribute(pageId, 'mode');
  322.       let hash;
  323.       //if(/*单例*/mode === "single" || /*完全单例*/mode === "singleInstance" || /*带返回值的完全单例*/mode === "singleInstanceResult") {
  324.       if (mode.toLowerCase().indexOf("single") !== -1) {
  325.         const index = indexOfHistoryByPageId.call(self, pageId);
  326.         if (/*_history中没有以pageId开头的page*/index === -1) {
  327.           //1.用pageId生成真实的id转换锚点
  328.           //if("singleInstance" === mode || "singleInstanceResult" === mode) {
  329.           if (mode/*.toLowerCase()*/.indexOf("singleInstance") !== -1) {
  330.             if (self.ctmobile.getSingleInstance(pageId)) {
  331.               hash = self.ctmobile.getSingleInstance(pageId).getId();
  332.             } else {
  333.               hash = self.ctmobile.getId(pageId + paramsQuery);
  334.             }
  335.           } else {
  336.             hash = self.ctmobile.getId(pageId + paramsQuery);
  337.           }
  339.           if (option && option.reload) {
  340.             window.history.replaceState(null, "", "#" + hash);
  341.             hashChange.call(self, "#" + hash, option);
  342.           } else {
  343.             window.location.hash = "#" + hash;
  344.           }
  345.         } else {
  346.           if (/*如果page不是栈顶,依次出栈,调用finish*/
  347.           self.ctmobile.getPageByIndex(index) !== self.getLastPage()
  348.           ) {
  349.             // 假如现在_history中的顺序是1,2,3,4,5,6，3是单例，现在要跳转到3,那么6,5,4所代表的page依次调用finish方法
  350.             // history.go(找到3相对于当前页的阈值)
  351.             self.go(-(self.getHistoryLength() - 1 - index));
  352.           } else {
  353.             self.ctmobile.fireEvent(self.getLastPage().getPageDOM(), "pageShow");
  354.           }
  355.         }
  356.       } else if (/*多例*/mode === "standard" || mode === "result") {
  357.         //1.用pageId生成真实的id转换锚点
  358.         hash = self.ctmobile.getId(pageId + paramsQuery);
  359.         if (option && option.reload) {
  360.           window.history.replaceState(null, "", "#" + hash);
  361.           hashChange.call(self, "#" + hash, option);
  362.         } else {
  363.           window.location.hash = "#" + hash;
  364.         }
  365.       }
  366.     }
  367.   }
  369.   /**
  370.    * 跳转到指定的历史
  371.    * @param {number} index - 历史位置
  372.    * 注释：当前的位置为0 index负值为回退，index正数为前进 都以1开始
  373.    * 例如 -1 为当前页之前的页面,1为当前页之后的页面，0为刷新当前页面
  374.    */
  375.   go(index) {
  376.     window.history.go(index);
  377.   }
  379.   /**
  380.    * 返回
  381.    */
  382.   back() {
  383.     this.go(-1);
  384.   }
  386.   /**
  387.    * 设置转场参数
  388.    * @param {Object} parameter
  389.    */
  390.   setParameter(parameter) {
  391.     this.parameter = parameter;
  392.   }
  394.   /**
  395.    * 获取转场的参数
  396.    * @return {Object}
  397.    */
  398.   getParameter() {
  399.     let parameter = Object.assign({}, this.parameter);
  400.     if(parameter.pageId) {
  401.       delete parameter.pageId;
  402.     }
  403.     return parameter;
  404.   }
  406.   /**
  407.    * 根据ID获取page对象
  408.    * @param {string} id
  409.    * @return {*}
  410.    */
  411.   getPageById(id) {
  412.     return this.history[this.ctmobile.indexOfById(id)];
  413.   }
  415.   /**
  416.    * 根据索引获取page对象
  417.    * @param {number} index
  418.    * @returns {*}
  419.    */
  420.   getPageByIndex(index) {
  421.     return this.history[index];
  422.   }
  424.   /**
  425.    * 获取历史记录中的栈顶的元素
  426.    * @returns {*}
  427.    */
  428.   getLastPage() {
  429.     return this.history[this.history.length - 1];
  430.   }
  432.   /**
  433.    * 获取历史栈长度
  434.    * @return {number}
  435.    */
  436.   getHistoryLength() {
  437.     return this.history.length;
  438.   }
  440.   /**
  441.    * 添加页面的历史栈
  442.    * @param {Page} page
  443.    */
  444.   addPage(page) {
  445.     this.history.push(page);
  446.   }
  448.   /**
  449.    * 删除历史栈中的第一个page
  450.    */
  451.   removeFirstPage() {
  452.     this.history.shift();
  453.   }
  455.   /**
  456.    * 删除历史栈中的最后一个页面
  457.    */
  458.   removeLastPage() {
  459.     this.history.pop();
  460.   }
  462.   /**
  463.    * 删除历史栈中指定的页面
  464.    * @param {number} index
  465.    */
  466.   removePageByIndex(index) {
  467.     this.history.splice(index, 1);
  468.   }
  469. }
  471. export default Router;