Browse Source

KERNEL-14512 refact: router

es6
Treecat 2 years ago
parent
commit
1e31ad0ffa
  1. 12
      src/bundle.js
  2. 72
      src/core/decorator.js
  3. 2
      src/core/index.js
  4. 2
      src/core/system.js
  5. 7
      src/index.js
  6. 464
      src/router/0.router.js
  7. 3431
      src/router/router.js
  8. 2
      template/index.html

12
src/bundle.js

@ -1,4 +1,14 @@
import * as fineui from "./index"; import * as fineui from "./index";
import { shortcut, provider } from "@/core/5.inject"; import { shortcut, provider } from "@/core/5.inject";
import { _global } from "@/core/0.foundation";
import * as Decorators from "@/core/decorator";
Object.assign(BI, fineui, { shortcut, provider }); _global.BI = _global.BI || {};
_global.BI.Decorators = Decorators;
_global.Fix = fineui.Fix;
_global._ = fineui._;
_global.$ = fineui.$;
Object.assign(_global.BI, fineui, { shortcut, provider });

72
src/core/decorator.js

@ -1,6 +1,11 @@
// export * from "../../typescript/core/decorator/decorator.ts"; // export * from "../../typescript/core/decorator/decorator.ts";
import { shortcut as biShortcut, provider as biProvider } from "./5.inject"; import {
shortcut as biShortcut,
provider as biProvider,
model as biModel,
Models
} from "./5.inject";
/** /**
* 注册widget * 注册widget
@ -19,3 +24,68 @@ export function provider() {
biProvider(Target.xtype, Target); biProvider(Target.xtype, Target);
}; };
} }
/**
* 注册model
*/
export function model() {
return function decorator(Target) {
biModel(Target.xtype, Target);
};
}
/**
* 类注册_store属性
* @param Model model类
* @param opts 额外条件
*/
export function store(Model, opts) {
return function classDecorator(constructor) {
return class extends constructor {
_store() {
const props = opts.props ? opts.props.apply(this) : undefined;
return Models.getModel(Model.xtype, props);
}
};
};
}
/**
* 注册mixin
* ie8下不能使用
*/
export function mixin() {
return function decorator(Target) {
const mixin = {};
Object.getOwnPropertyNames(Target.prototype).forEach(name => {
if (name === "constructor") {
return;
}
mixin[name] = Target.prototype[name];
});
Fix.mixin(Target.xtype, mixin);
};
}
/**
* 类注册mixins属性
* ie8下不能使用
* @param Mixins
*/
export function mixins(...Mixins) {
return function classDecorator(constructor) {
const mixins = [];
Mixins.forEach(mixin => {
mixin.xtype && mixins.push(mixin.xtype);
});
return class extends constructor {
mixins = mixins;
};
};
}

2
src/core/index.js

@ -22,7 +22,7 @@ export * from "./5.inject";
export * from "./6.plugin"; export * from "./6.plugin";
export * from "./system"; export * from "./system";
export * from "./action"; export * from "./action";
export * from "./behavior"; // export * from "./behavior";
// export * from "./controller"; // export * from "./controller";
export * from "./func"; export * from "./func";
export * from "./structure"; export * from "./structure";

2
src/core/system.js

@ -4,7 +4,7 @@
* Created by windy on 2021/6/30 * Created by windy on 2021/6/30
*/ */
import { prepares } from "./0.foundation"; import { prepares } from "./0.foundation";
import { deepExtend, extend, inherit, object } from "./2.base"; import { deepExtend, extend } from "./2.base";
import { OB } from "./3.ob"; import { OB } from "./3.ob";
import { Providers } from "./5.inject"; import { Providers } from "./5.inject";
import { provider } from "./decorator"; import { provider } from "./decorator";

7
src/index.js

@ -1,8 +1,13 @@
import "./polyfill"; import "./polyfill";
import _jquery from "jquery";
export * from "./core"; export * from "./core";
export * from "./base"; export * from "./base";
export * from "./case"; export * from "./case";
export * from "./widget"; export * from "./widget";
export * from "./component"; export * from "./component";
export * from "./fix"; export * from "./fix";
export * from "./router";
export const jQuery = _jquery;
export const $ = _jquery;

464
src/router/0.router.js

@ -1,26 +1,37 @@
(function () { import { _ } from "@/core";
var Events = {
const Events = {
// Bind an event to a `callback` function. Passing `"all"` will bind // Bind an event to a `callback` function. Passing `"all"` will bind
// the callback to all events fired. // the callback to all events fired.
on: function (name, callback, context) { on(name, callback, context) {
if (!eventsApi(this, "on", name, [callback, context]) || !callback) return this; if (!eventsApi(this, "on", name, [callback, context]) || !callback) {
return this;
}
this._events || (this._events = {}); this._events || (this._events = {});
var events = this._events[name] || (this._events[name] = []); const events = this._events[name] || (this._events[name] = []);
events.push({callback: callback, context: context, ctx: context || this}); events.push({
callback,
context,
ctx: context || this
});
return this; return this;
}, },
// Bind an event to only be triggered a single time. After the first time // Bind an event to only be triggered a single time. After the first time
// the callback is invoked, it will be removed. // the callback is invoked, it will be removed.
once: function (name, callback, context) { once(name, callback, context) {
if (!eventsApi(this, "once", name, [callback, context]) || !callback) return this; if (!eventsApi(this, "once", name, [callback, context]) || !callback) {
var self = this; return this;
var once = BI._.once(function () { }
const self = this;
var once = _.once(function () {
self.off(name, once); self.off(name, once);
callback.apply(this, arguments); callback.apply(this, arguments);
}); });
once._callback = callback; once._callback = callback;
return this.on(name, once, context); return this.on(name, once, context);
}, },
@ -28,21 +39,27 @@
// callbacks with that function. If `callback` is null, removes all // callbacks with that function. If `callback` is null, removes all
// callbacks for the event. If `name` is null, removes all bound // callbacks for the event. If `name` is null, removes all bound
// callbacks for all events. // callbacks for all events.
off: function (name, callback, context) { off(name, callback, context) {
if (!this._events || !eventsApi(this, "off", name, [callback, context])) return this; if (
!this._events ||
!eventsApi(this, "off", name, [callback, context])
) {
return this;
}
// Remove all callbacks for all events. // Remove all callbacks for all events.
if (!name && !callback && !context) { if (!name && !callback && !context) {
this._events = void 0; this._events = void 0;
return this; return this;
} }
var names = name ? [name] : BI._.keys(this._events); const names = name ? [name] : _.keys(this._events);
for (var i = 0, length = names.length; i < length; i++) { for (let i = 0, length = names.length; i < length; i++) {
name = names[i]; name = names[i];
// Bail out if there are no events stored. // Bail out if there are no events stored.
var events = this._events[name]; const events = this._events[name];
if (!events) continue; if (!events) continue;
// Remove all callbacks for this event. // Remove all callbacks for this event.
@ -52,13 +69,14 @@
} }
// Find any remaining events. // Find any remaining events.
var remaining = []; const remaining = [];
for (var j = 0, k = events.length; j < k; j++) { for (let j = 0, k = events.length; j < k; j++) {
var event = events[j]; const event = events[j];
if ( if (
callback && callback !== event.callback && (callback &&
callback !== event.callback._callback || callback !== event.callback &&
context && context !== event.context callback !== event.callback._callback) ||
(context && context !== event.context)
) { ) {
remaining.push(event); remaining.push(event);
} }
@ -75,7 +93,7 @@
return this; return this;
}, },
un: function () { un() {
this.off.apply(this, arguments); this.off.apply(this, arguments);
}, },
@ -83,151 +101,172 @@
// passed the same arguments as `trigger` is, apart from the event name // passed the same arguments as `trigger` is, apart from the event name
// (unless you're listening on `"all"`, which will cause your callback to // (unless you're listening on `"all"`, which will cause your callback to
// receive the true name of the event as the first argument). // receive the true name of the event as the first argument).
trigger: function (name) { trigger(name) {
if (!this._events) return this; if (!this._events) return this;
var args = slice.call(arguments, 1); const args = slice.call(arguments, 1);
if (!eventsApi(this, "trigger", name, args)) return this; if (!eventsApi(this, "trigger", name, args)) return this;
var events = this._events[name]; const events = this._events[name];
var allEvents = this._events.all; const allEvents = this._events.all;
if (events) triggerEvents(events, args); if (events) triggerEvents(events, args);
if (allEvents) triggerEvents(allEvents, arguments); if (allEvents) triggerEvents(allEvents, arguments);
return this; return this;
}, },
fireEvent: function () { fireEvent() {
this.trigger.apply(this, arguments); this.trigger.apply(this, arguments);
}, },
// Inversion-of-control versions of `on` and `once`. Tell *this* object to // Inversion-of-control versions of `on` and `once`. Tell *this* object to
// listen to an event in another object ... keeping track of what it's // listen to an event in another object ... keeping track of what it's
// listening to. // listening to.
listenTo: function (obj, name, callback) { listenTo(obj, name, callback) {
var listeningTo = this._listeningTo || (this._listeningTo = {}); const listeningTo = this._listeningTo || (this._listeningTo = {});
var id = obj._listenId || (obj._listenId = BI._.uniqueId("l")); const id = obj._listenId || (obj._listenId = _.uniqueId("l"));
listeningTo[id] = obj; listeningTo[id] = obj;
if (!callback && typeof name === "object") callback = this; if (!callback && typeof name === "object") callback = this;
obj.on(name, callback, this); obj.on(name, callback, this);
return this; return this;
}, },
listenToOnce: function (obj, name, callback) { listenToOnce(obj, name, callback) {
if (typeof name === "object") { if (typeof name === "object") {
for (var event in name) this.listenToOnce(obj, event, name[event]); for (const event in name) {
this.listenToOnce(obj, event, name[event]);
}
return this; return this;
} }
if (eventSplitter.test(name)) { if (eventSplitter.test(name)) {
var names = name.split(eventSplitter); const names = name.split(eventSplitter);
for (var i = 0, length = names.length; i < length; i++) { for (let i = 0, length = names.length; i < length; i++) {
this.listenToOnce(obj, names[i], callback); this.listenToOnce(obj, names[i], callback);
} }
return this; return this;
} }
if (!callback) return this; if (!callback) return this;
var once = BI._.once(function () { var once = _.once(function () {
this.stopListening(obj, name, once); this.stopListening(obj, name, once);
callback.apply(this, arguments); callback.apply(this, arguments);
}); });
once._callback = callback; once._callback = callback;
return this.listenTo(obj, name, once); return this.listenTo(obj, name, once);
}, },
// Tell this object to stop listening to either specific events ... or // Tell this object to stop listening to either specific events ... or
// to every object it's currently listening to. // to every object it's currently listening to.
stopListening: function (obj, name, callback) { stopListening(obj, name, callback) {
var listeningTo = this._listeningTo; let listeningTo = this._listeningTo;
if (!listeningTo) return this; if (!listeningTo) return this;
var remove = !name && !callback; const remove = !name && !callback;
if (!callback && typeof name === "object") callback = this; if (!callback && typeof name === "object") callback = this;
if (obj) (listeningTo = {})[obj._listenId] = obj; if (obj) (listeningTo = {})[obj._listenId] = obj;
for (var id in listeningTo) { for (const id in listeningTo) {
obj = listeningTo[id]; obj = listeningTo[id];
obj.off(name, callback, this); obj.off(name, callback, this);
if (remove || BI._.isEmpty(obj._events)) delete this._listeningTo[id]; if (remove || _.isEmpty(obj._events)) {
delete this._listeningTo[id];
} }
return this;
} }
}; return this;
}
};
// Regular expression used to split event strings. // Regular expression used to split event strings.
var eventSplitter = /\s+/; var eventSplitter = /\s+/;
// Implement fancy features of the Events API such as multiple event // Implement fancy features of the Events API such as multiple event
// names `"change blur"` and jQuery-style event maps `{change: action}` // names `"change blur"` and jQuery-style event maps `{change: action}`
// in terms of the existing API. // in terms of the existing API.
var eventsApi = function (obj, action, name, rest) { var eventsApi = function (obj, action, name, rest) {
if (!name) return true; if (!name) return true;
// Handle event maps. // Handle event maps.
if (typeof name === "object") { if (typeof name === "object") {
for (var key in name) { for (const key in name) {
obj[action].apply(obj, [key, name[key]].concat(rest)); obj[action].apply(obj, [key, name[key]].concat(rest));
} }
return false; return false;
} }
// Handle space separated event names. // Handle space separated event names.
if (eventSplitter.test(name)) { if (eventSplitter.test(name)) {
var names = name.split(eventSplitter); const names = name.split(eventSplitter);
for (var i = 0, length = names.length; i < length; i++) { for (let i = 0, length = names.length; i < length; i++) {
obj[action].apply(obj, [names[i]].concat(rest)); obj[action].apply(obj, [names[i]].concat(rest));
} }
return false; return false;
} }
return true; return true;
}; };
// A difficult-to-believe, but optimized internal dispatch function for // A difficult-to-believe, but optimized internal dispatch function for
// triggering events. Tries to keep the usual cases speedy (most internal // triggering events. Tries to keep the usual cases speedy (most internal
// BI events have 3 arguments). // BI events have 3 arguments).
var triggerEvents = function (events, args) { var triggerEvents = function (events, args) {
var ev, i = -1, l = events.length, a1 = args[0], a2 = args[1], a3 = args[2]; let ev,
i = -1,
l = events.length,
a1 = args[0],
a2 = args[1],
a3 = args[2];
switch (args.length) { switch (args.length) {
case 0: case 0:
while (++i < l) (ev = events[i]).callback.call(ev.ctx); while (++i < l) (ev = events[i]).callback.call(ev.ctx);
return; return;
case 1: case 1:
while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1); while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1);
return; return;
case 2: case 2:
while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2); while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2);
return; return;
case 3: case 3:
while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2, a3); while (++i < l) {
(ev = events[i]).callback.call(ev.ctx, a1, a2, a3);
}
return; return;
default: default:
while (++i < l) (ev = events[i]).callback.apply(ev.ctx, args); while (++i < l) (ev = events[i]).callback.apply(ev.ctx, args);
return; return;
} }
}; };
// BI.Router // BI.Router
// --------------- // ---------------
// Routers map faux-URLs to actions, and fire events when routes are // Routers map faux-URLs to actions, and fire events when routes are
// matched. Creating a new one sets its `routes` hash, if not set statically. // matched. Creating a new one sets its `routes` hash, if not set statically.
var Router = BI.Router = function (options) { export const Router = function (options) {
options || (options = {}); options || (options = {});
if (options.routes) this.routes = options.routes; if (options.routes) this.routes = options.routes;
this._bindRoutes(); this._bindRoutes();
this._init.apply(this, arguments); this._init.apply(this, arguments);
}; };
// Cached regular expressions for matching named param parts and splatted // Cached regular expressions for matching named param parts and splatted
// parts of route strings. // parts of route strings.
var optionalParam = /\((.*?)\)/g; const optionalParam = /\((.*?)\)/g;
var namedParam = /(\(\?)?:\w+/g; const namedParam = /(\(\?)?:\w+/g;
var splatParam = /\*\w+/g; const splatParam = /\*\w+/g;
var escapeRegExp = /[\-{}\[\]+?.,\\\^$|#\s]/g; const escapeRegExp = /[\-{}\[\]+?.,\\\^$|#\s]/g;
// Set up all inheritable **BI.Router** properties and methods.
BI._.extend(Router.prototype, Events, {
// Set up all inheritable **BI.Router** properties and methods.
_.extend(Router.prototype, Events, {
// _init is an empty function by default. Override it with your own // _init is an empty function by default. Override it with your own
// initialization logic. // initialization logic.
_init: function () { _init() {},
},
// Manually bind a single named route to a callback. For example: // Manually bind a single named route to a callback. For example:
// //
@ -235,44 +274,47 @@
// ... // ...
// }); // });
// //
route: function (route, name, callback) { route(route, name, callback) {
if (!BI._.isRegExp(route)) route = this._routeToRegExp(route); if (!_.isRegExp(route)) route = this._routeToRegExp(route);
if (BI._.isFunction(name)) { if (_.isFunction(name)) {
callback = name; callback = name;
name = ""; name = "";
} }
if (!callback) callback = this[name]; if (!callback) callback = this[name];
var router = this; const router = this;
BI.history.route(route, function (fragment) { history.route(route, (fragment) => {
var args = router._extractParameters(route, fragment); const args = router._extractParameters(route, fragment);
if (router.execute(callback, args, name) !== false) { if (router.execute(callback, args, name) !== false) {
router.trigger.apply(router, ["route:" + name].concat(args)); router.trigger.apply(router, [`route:${name}`].concat(args));
router.trigger("route", name, args); router.trigger("route", name, args);
BI.history.trigger("route", router, name, args); history.trigger("route", router, name, args);
} }
}); });
return this; return this;
}, },
// Execute a route handler with the provided parameters. This is an // Execute a route handler with the provided parameters. This is an
// excellent place to do pre-route setup or post-route cleanup. // excellent place to do pre-route setup or post-route cleanup.
execute: function (callback, args, name) { execute(callback, args, name) {
if (callback) callback.apply(this, args); if (callback) callback.apply(this, args);
}, },
// Simple proxy to `BI.history` to save a fragment into the history. // Simple proxy to `BI.history` to save a fragment into the history.
navigate: function (fragment, options) { navigate(fragment, options) {
BI.history.navigate(fragment, options); history.navigate(fragment, options);
return this; return this;
}, },
// Bind all defined routes to `BI.history`. We have to reverse the // Bind all defined routes to `BI.history`. We have to reverse the
// order of the routes here to support behavior where the most general // order of the routes here to support behavior where the most general
// routes can be defined at the bottom of the route map. // routes can be defined at the bottom of the route map.
_bindRoutes: function () { _bindRoutes() {
if (!this.routes) return; if (!this.routes) return;
this.routes = BI._.result(this, "routes"); this.routes = _.result(this, "routes");
var route, routes = BI._.keys(this.routes); let route,
routes = _.keys(this.routes);
while ((route = routes.pop()) != null) { while ((route = routes.pop()) != null) {
this.route(route, this.routes[route]); this.route(route, this.routes[route]);
} }
@ -280,25 +322,28 @@
// Convert a route string into a regular expression, suitable for matching // Convert a route string into a regular expression, suitable for matching
// against the current location hash. // against the current location hash.
_routeToRegExp: function (route) { _routeToRegExp(route) {
route = route.replace(escapeRegExp, "\\$&") route = route
.replace(escapeRegExp, "\\$&")
.replace(optionalParam, "(?:$1)?") .replace(optionalParam, "(?:$1)?")
.replace(namedParam, function (match, optional) { .replace(namedParam, (match, optional) =>
return optional ? match : "([^/?]+)"; optional ? match : "([^/?]+)"
}) )
.replace(splatParam, "([^?]*?)"); .replace(splatParam, "([^?]*?)");
return new RegExp("^" + route + "(?:\\?([\\s\\S]*))?$");
return new RegExp(`^${route}(?:\\?([\\s\\S]*))?$`);
}, },
// Given a route, and a URL fragment that it matches, return the array of // Given a route, and a URL fragment that it matches, return the array of
// extracted decoded parameters. Empty or unmatched parameters will be // extracted decoded parameters. Empty or unmatched parameters will be
// treated as `null` to normalize cross-browser behavior. // treated as `null` to normalize cross-browser behavior.
_extractParameters: function (route, fragment) { _extractParameters(route, fragment) {
var params = route.exec(fragment).slice(1); const params = route.exec(fragment).slice(1);
return BI._.map(params, function (param, i) {
return _.map(params, (param, i) => {
// Don't decode the search params. // Don't decode the search params.
if (i === params.length - 1) return param || null; if (i === params.length - 1) return param || null;
var resultParam = null; let resultParam = null;
if (param) { if (param) {
try { try {
resultParam = decodeURIComponent(param); resultParam = decodeURIComponent(param);
@ -306,84 +351,86 @@
resultParam = param; resultParam = param;
} }
} }
return resultParam; return resultParam;
}); });
} }
});
}); // History
// ----------------
// History
// ----------------
// Handles cross-browser history management, based on either // Handles cross-browser history management, based on either
// [pushState](http://diveintohtml5.info/history.html) and real URLs, or // [pushState](http://diveintohtml5.info/history.html) and real URLs, or
// [onhashchange](https://developer.mozilla.org/en-US/docs/DOM/window.onhashchange) // [onhashchange](https://developer.mozilla.org/en-US/docs/DOM/window.onhashchange)
// and URL fragments. If the browser supports neither (old IE, natch), // and URL fragments. If the browser supports neither (old IE, natch),
// falls back to polling. // falls back to polling.
var History = function () { const History = function () {
this.handlers = []; this.handlers = [];
this.checkUrl = BI._.bind(this.checkUrl, this); this.checkUrl = _.bind(this.checkUrl, this);
// Ensure that `History` can be used outside of the browser. // Ensure that `History` can be used outside of the browser.
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
this.location = _global.location; this.location = _global.location;
this.history = _global.history; this.history = _global.history;
} }
}; };
// Cached regex for stripping a leading hash/slash and trailing space.
var routeStripper = /^[#\/]|\s+$/g;
// Cached regex for stripping leading and trailing slashes. // Cached regex for stripping a leading hash/slash and trailing space.
var rootStripper = /^\/+|\/+$/g; const routeStripper = /^[#\/]|\s+$/g;
// Cached regex for stripping urls of hash. // Cached regex for stripping leading and trailing slashes.
var pathStripper = /#.*$/; const rootStripper = /^\/+|\/+$/g;
// Has the history handling already been started? // Cached regex for stripping urls of hash.
History.started = false; const pathStripper = /#.*$/;
// Set up all inheritable **BI.History** properties and methods. // Has the history handling already been started?
BI._.extend(History.prototype, Events, { History.started = false;
// Set up all inheritable **BI.History** properties and methods.
_.extend(History.prototype, Events, {
// The default interval to poll for hash changes, if necessary, is // The default interval to poll for hash changes, if necessary, is
// twenty times a second. // twenty times a second.
interval: 50, interval: 50,
// Are we at the app root? // Are we at the app root?
atRoot: function () { atRoot() {
var path = this.location.pathname.replace(/[^\/]$/, "$&/"); const path = this.location.pathname.replace(/[^\/]$/, "$&/");
return path === this.root && !this.getSearch(); return path === this.root && !this.getSearch();
}, },
// In IE6, the hash fragment and search params are incorrect if the // In IE6, the hash fragment and search params are incorrect if the
// fragment contains `?`. // fragment contains `?`.
getSearch: function () { getSearch() {
var match = this.location.href.replace(/#.*/, "").match(/\?.+/); const match = this.location.href.replace(/#.*/, "").match(/\?.+/);
return match ? match[0] : ""; return match ? match[0] : "";
}, },
// Gets the true hash value. Cannot use location.hash directly due to bug // Gets the true hash value. Cannot use location.hash directly due to bug
// in Firefox where location.hash will always be decoded. // in Firefox where location.hash will always be decoded.
getHash: function (window) { getHash(window) {
var match = (window || this).location.href.match(/#(.*)$/); const match = (window || this).location.href.match(/#(.*)$/);
return match ? match[1] : ""; return match ? match[1] : "";
}, },
// Get the pathname and search params, without the root. // Get the pathname and search params, without the root.
getPath: function () { getPath() {
var path = this.location.pathname + this.getSearch(); let path = this.location.pathname + this.getSearch();
try { try {
path = decodeURI(path); path = decodeURI(path);
} catch(e) { } catch (e) {}
} const root = this.root.slice(0, -1);
var root = this.root.slice(0, -1);
if (!path.indexOf(root)) path = path.slice(root.length); if (!path.indexOf(root)) path = path.slice(root.length);
return path.charAt(0) === "/" ? path.slice(1) : path; return path.charAt(0) === "/" ? path.slice(1) : path;
}, },
// Get the cross-browser normalized URL fragment from the path or hash. // Get the cross-browser normalized URL fragment from the path or hash.
getFragment: function (fragment) { getFragment(fragment) {
if (fragment == null) { if (fragment == null) {
if (this._hasPushState || !this._wantsHashChange) { if (this._hasPushState || !this._wantsHashChange) {
fragment = this.getPath(); fragment = this.getPath();
@ -391,73 +438,91 @@
fragment = this.getHash(); fragment = this.getHash();
} }
} }
return fragment.replace(routeStripper, ""); return fragment.replace(routeStripper, "");
}, },
// Start the hash change handling, returning `true` if the current URL matches // Start the hash change handling, returning `true` if the current URL matches
// an existing route, and `false` otherwise. // an existing route, and `false` otherwise.
start: function (options) { start(options) {
if (History.started) throw new Error("BI.history has already been started"); if (History.started) {
throw new Error("BI.history has already been started");
}
History.started = true; History.started = true;
// Figure out the initial configuration. Do we need an iframe? // Figure out the initial configuration. Do we need an iframe?
// Is pushState desired ... is it available? // Is pushState desired ... is it available?
this.options = BI._.extend({root: "/"}, this.options, options); this.options = _.extend({ root: "/" }, this.options, options);
this.root = this.options.root; this.root = this.options.root;
this._wantsHashChange = this.options.hashChange !== false; this._wantsHashChange = this.options.hashChange !== false;
this._hasHashChange = "onhashchange" in window; this._hasHashChange = "onhashchange" in window;
this._wantsPushState = !!this.options.pushState; this._wantsPushState = !!this.options.pushState;
this._hasPushState = !!(this.options.pushState && this.history && this.history.pushState); this._hasPushState = !!(
this.options.pushState &&
this.history &&
this.history.pushState
);
this.fragment = this.getFragment(); this.fragment = this.getFragment();
// Normalize root to always include a leading and trailing slash. // Normalize root to always include a leading and trailing slash.
this.root = ("/" + this.root + "/").replace(rootStripper, "/"); this.root = `/${this.root}/`.replace(rootStripper, "/");
// Transition from hashChange to pushState or vice versa if both are // Transition from hashChange to pushState or vice versa if both are
// requested. // requested.
if (this._wantsHashChange && this._wantsPushState) { if (this._wantsHashChange && this._wantsPushState) {
// If we've started off with a route from a `pushState`-enabled // If we've started off with a route from a `pushState`-enabled
// browser, but we're currently in a browser that doesn't support it... // browser, but we're currently in a browser that doesn't support it...
if (!this._hasPushState && !this.atRoot()) { if (!this._hasPushState && !this.atRoot()) {
var root = this.root.slice(0, -1) || "/"; const root = this.root.slice(0, -1) || "/";
this.location.replace(root + "#" + this.getPath()); this.location.replace(`${root}#${this.getPath()}`);
// Return immediately as browser will do redirect to new url // Return immediately as browser will do redirect to new url
return true; return true;
// Or if we've started out with a hash-based route, but we're currently // Or if we've started out with a hash-based route, but we're currently
// in a browser where it could be `pushState`-based instead... // in a browser where it could be `pushState`-based instead...
} else if (this._hasPushState && this.atRoot()) { } else if (this._hasPushState && this.atRoot()) {
this.navigate(this.getHash(), {replace: true}); this.navigate(this.getHash(), { replace: true });
} }
} }
// Proxy an iframe to handle location events if the browser doesn't // Proxy an iframe to handle location events if the browser doesn't
// support the `hashchange` event, HTML5 history, or the user wants // support the `hashchange` event, HTML5 history, or the user wants
// `hashChange` but not `pushState`. // `hashChange` but not `pushState`.
if (!this._hasHashChange && this._wantsHashChange && (!this._wantsPushState || !this._hasPushState)) { if (
var iframe = document.createElement("iframe"); !this._hasHashChange &&
this._wantsHashChange &&
(!this._wantsPushState || !this._hasPushState)
) {
const iframe = document.createElement("iframe");
iframe.src = "javascript:0"; iframe.src = "javascript:0";
iframe.style.display = "none"; iframe.style.display = "none";
iframe.tabIndex = -1; iframe.tabIndex = -1;
var body = document.body; const body = document.body;
// Using `appendChild` will throw on IE < 9 if the document is not ready. // Using `appendChild` will throw on IE < 9 if the document is not ready.
this.iframe = body.insertBefore(iframe, body.firstChild).contentWindow; this.iframe = body.insertBefore(
iframe,
body.firstChild
).contentWindow;
this.iframe.document.open().close(); this.iframe.document.open().close();
this.iframe.location.hash = "#" + this.fragment; this.iframe.location.hash = `#${this.fragment}`;
} }
// Add a cross-platform `addEventListener` shim for older browsers. // Add a cross-platform `addEventListener` shim for older browsers.
var addEventListener = _global.addEventListener || function (eventName, listener) { const addEventListener =
return attachEvent("on" + eventName, listener); _global.addEventListener ||
function (eventName, listener) {
return attachEvent(`on${eventName}`, listener);
}; };
// Depending on whether we're using pushState or hashes, and whether // Depending on whether we're using pushState or hashes, and whether
// 'onhashchange' is supported, determine how we check the URL state. // 'onhashchange' is supported, determine how we check the URL state.
if (this._hasPushState) { if (this._hasPushState) {
addEventListener("popstate", this.checkUrl, false); addEventListener("popstate", this.checkUrl, false);
} else if (this._wantsHashChange && this._hasHashChange && !this.iframe) { } else if (
this._wantsHashChange &&
this._hasHashChange &&
!this.iframe
) {
addEventListener("hashchange", this.checkUrl, false); addEventListener("hashchange", this.checkUrl, false);
} else if (this._wantsHashChange) { } else if (this._wantsHashChange) {
this._checkUrlInterval = setInterval(this.checkUrl, this.interval); this._checkUrlInterval = setInterval(this.checkUrl, this.interval);
@ -468,16 +533,22 @@
// Disable BI.history, perhaps temporarily. Not useful in a real app, // Disable BI.history, perhaps temporarily. Not useful in a real app,
// but possibly useful for unit testing Routers. // but possibly useful for unit testing Routers.
stop: function () { stop() {
// Add a cross-platform `removeEventListener` shim for older browsers. // Add a cross-platform `removeEventListener` shim for older browsers.
var removeEventListener = _global.removeEventListener || function (eventName, listener) { const removeEventListener =
return detachEvent("on" + eventName, listener); _global.removeEventListener ||
function (eventName, listener) {
return detachEvent(`on${eventName}`, listener);
}; };
// Remove window listeners. // Remove window listeners.
if (this._hasPushState) { if (this._hasPushState) {
removeEventListener("popstate", this.checkUrl, false); removeEventListener("popstate", this.checkUrl, false);
} else if (this._wantsHashChange && this._hasHashChange && !this.iframe) { } else if (
this._wantsHashChange &&
this._hasHashChange &&
!this.iframe
) {
removeEventListener("hashchange", this.checkUrl, false); removeEventListener("hashchange", this.checkUrl, false);
} }
@ -494,14 +565,17 @@
// Add a route to be tested when the fragment changes. Routes added later // Add a route to be tested when the fragment changes. Routes added later
// may override previous routes. // may override previous routes.
route: function (route, callback) { route(route, callback) {
this.handlers.unshift({route: route, callback: callback}); this.handlers.unshift({ route, callback });
}, },
// check route is Exist. if exist, return the route // check route is Exist. if exist, return the route
checkRoute: function (route) { checkRoute(route) {
for (var i = 0; i < this.handlers.length; i++) { for (let i = 0; i < this.handlers.length; i++) {
if (this.handlers[i].route.toString() === Router.prototype._routeToRegExp(route).toString()) { if (
this.handlers[i].route.toString() ===
Router.prototype._routeToRegExp(route).toString()
) {
return this.handlers[i]; return this.handlers[i];
} }
} }
@ -510,10 +584,10 @@
}, },
// remove a route match in routes // remove a route match in routes
unRoute: function (route) { unRoute(route) {
var index = BI._.findIndex(this.handlers, function (handler) { const index = _.findIndex(this.handlers, (handler) =>
return handler.route.test(route); handler.route.test(route)
}); );
if (index > -1) { if (index > -1) {
this.handlers.splice(index, 1); this.handlers.splice(index, 1);
} }
@ -521,14 +595,13 @@
// Checks the current URL to see if it has changed, and if it has, // Checks the current URL to see if it has changed, and if it has,
// calls `loadUrl`, normalizing across the hidden iframe. // calls `loadUrl`, normalizing across the hidden iframe.
checkUrl: function (e) { checkUrl(e) {
var current = this.getFragment(); let current = this.getFragment();
try { try {
// getFragment 得到的值是编码过的,而this.fragment是没有编码过的 // getFragment 得到的值是编码过的,而this.fragment是没有编码过的
// 英文路径没有问题,遇上中文和空格有问题了 // 英文路径没有问题,遇上中文和空格有问题了
current = decodeURIComponent(current); current = decodeURIComponent(current);
} catch(e) { } catch (e) {}
}
// If the user pressed the back button, the iframe's hash will have // If the user pressed the back button, the iframe's hash will have
// changed and we should use that for comparison. // changed and we should use that for comparison.
if (current === this.fragment && this.iframe) { if (current === this.fragment && this.iframe) {
@ -543,11 +616,13 @@
// Attempt to load the current URL fragment. If a route succeeds with a // Attempt to load the current URL fragment. If a route succeeds with a
// match, returns `true`. If no defined routes matches the fragment, // match, returns `true`. If no defined routes matches the fragment,
// returns `false`. // returns `false`.
loadUrl: function (fragment) { loadUrl(fragment) {
fragment = this.fragment = this.getFragment(fragment); fragment = this.fragment = this.getFragment(fragment);
return BI._.some(this.handlers, function (handler) {
return _.some(this.handlers, (handler) => {
if (handler.route.test(fragment)) { if (handler.route.test(fragment)) {
handler.callback(fragment); handler.callback(fragment);
return true; return true;
} }
}); });
@ -560,44 +635,51 @@
// The options object can contain `trigger: true` if you wish to have the // The options object can contain `trigger: true` if you wish to have the
// route callback be fired (not usually desirable), or `replace: true`, if // route callback be fired (not usually desirable), or `replace: true`, if
// you wish to modify the current URL without adding an entry to the history. // you wish to modify the current URL without adding an entry to the history.
navigate: function (fragment, options) { navigate(fragment, options) {
if (!History.started) return false; if (!History.started) return false;
if (!options || options === true) options = {trigger: !!options}; if (!options || options === true) options = { trigger: !!options };
// Normalize the fragment. // Normalize the fragment.
fragment = this.getFragment(fragment || ""); fragment = this.getFragment(fragment || "");
// Don't include a trailing slash on the root. // Don't include a trailing slash on the root.
var root = this.root; let root = this.root;
if (fragment === "" || fragment.charAt(0) === "?") { if (fragment === "" || fragment.charAt(0) === "?") {
root = root.slice(0, -1) || "/"; root = root.slice(0, -1) || "/";
} }
var url = root + fragment; const url = root + fragment;
// Strip the hash and decode for matching. // Strip the hash and decode for matching.
fragment = fragment.replace(pathStripper, "") fragment = fragment.replace(pathStripper, "");
try { try {
fragment = decodeURI(fragment); fragment = decodeURI(fragment);
} catch(e) { } catch (e) {}
}
if (this.fragment === fragment) return; if (this.fragment === fragment) return;
this.fragment = fragment; this.fragment = fragment;
// If pushState is available, we use it to set the fragment as a real URL. // If pushState is available, we use it to set the fragment as a real URL.
if (this._hasPushState) { if (this._hasPushState) {
this.history[options.replace ? "replaceState" : "pushState"]({}, document.title, url); this.history[options.replace ? "replaceState" : "pushState"](
{},
document.title,
url
);
// If hash changes haven't been explicitly disabled, update the hash // If hash changes haven't been explicitly disabled, update the hash
// fragment to store history. // fragment to store history.
} else if (this._wantsHashChange) { } else if (this._wantsHashChange) {
this._updateHash(this.location, fragment, options.replace); this._updateHash(this.location, fragment, options.replace);
if (this.iframe && (fragment !== this.getHash(this.iframe))) { if (this.iframe && fragment !== this.getHash(this.iframe)) {
// Opening and closing the iframe tricks IE7 and earlier to push a // Opening and closing the iframe tricks IE7 and earlier to push a
// history entry on hash-tag change. When replace is true, we don't // history entry on hash-tag change. When replace is true, we don't
// want this. // want this.
if (!options.replace) this.iframe.document.open().close(); if (!options.replace) this.iframe.document.open().close();
this._updateHash(this.iframe.location, fragment, options.replace); this._updateHash(
this.iframe.location,
fragment,
options.replace
);
} }
// If you've told us that you explicitly don't want fallback hashchange- // If you've told us that you explicitly don't want fallback hashchange-
@ -610,18 +692,16 @@
// Update the hash location, either replacing the current entry, or adding // Update the hash location, either replacing the current entry, or adding
// a new one to the browser history. // a new one to the browser history.
_updateHash: function (location, fragment, replace) { _updateHash(location, fragment, replace) {
if (replace) { if (replace) {
var href = location.href.replace(/(javascript:|#).*$/, ""); const href = location.href.replace(/(javascript:|#).*$/, "");
location.replace(href + "#" + fragment); location.replace(`${href}#${fragment}`);
} else { } else {
// Some browsers require that `hash` contains a leading #. // Some browsers require that `hash` contains a leading #.
location.hash = "#" + fragment; location.hash = `#${fragment}`;
} }
} }
});
}); // Create the default BI.history.
export const history = new History();
// Create the default BI.history.
BI.history = new History;
}());

3431
src/router/router.js

File diff suppressed because it is too large Load Diff

2
template/index.html

@ -38,7 +38,7 @@
<div id="wrapper"></div> <div id="wrapper"></div>
</body> </body>
<script src="../dist/router.js"></script> <!-- <script src="../dist/router.js"></script> -->
<script> <script>
BI.pixUnit = "rem"; BI.pixUnit = "rem";
BI.pixRatio = 10; BI.pixRatio = 10;

Loading…
Cancel
Save