KERNEL-14512 refact: router

src/bundle.js

@@ -1,4 +1,14 @@
 import * as fineui from "./index";
 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 });

src/core/decorator.js

@@ -1,6 +1,11 @@
 // 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
@@ -19,3 +24,68 @@ export function provider() {
         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;
+        };
+    };
+}

src/core/index.js

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

src/core/system.js

@@ -4,7 +4,7 @@
  * Created by windy on 2021/6/30
  */
 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 { Providers } from "./5.inject";
 import { provider } from "./decorator";

src/index.js

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

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
     // 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 = {});
-            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;
     },
 
     // Bind an event to only be triggered a single time. After the first time
     // 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);
             callback.apply(this, arguments);
         });
         once._callback = callback;
+
         return this.on(name, once, context);
     },
 
@@ -28,21 +39,27 @@
     // callbacks with that function. If `callback` is null, removes all
     // callbacks for the event. If `name` is null, removes all bound
     // 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.
         if (!name && !callback && !context) {
             this._events = void 0;
+
             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];
 
             // Bail out if there are no events stored.
-                var events = this._events[name];
+            const events = this._events[name];
             if (!events) continue;
 
             // Remove all callbacks for this event.
@@ -52,13 +69,14 @@
             }
 
             // 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 (
-                        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);
                 }
@@ -75,7 +93,7 @@
         return this;
     },
 
-        un: function () {
+    un() {
         this.off.apply(this, arguments);
     },
 
@@ -83,151 +101,172 @@
     // passed the same arguments as `trigger` is, apart from the event name
     // (unless you're listening on `"all"`, which will cause your callback to
     // receive the true name of the event as the first argument).
-        trigger: function (name) {
+    trigger(name) {
         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;
-            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 (allEvents) triggerEvents(allEvents, arguments);
+
         return this;
     },
 
-        fireEvent: function () {
+    fireEvent() {
         this.trigger.apply(this, arguments);
     },
 
     // 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
     // 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;
         if (!callback && typeof name === "object") callback = this;
         obj.on(name, callback, this);
+
         return this;
     },
 
-        listenToOnce: function (obj, name, callback) {
+    listenToOnce(obj, name, callback) {
         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;
         }
         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);
             }
+
             return this;
         }
         if (!callback) return this;
-            var once = BI._.once(function () {
+        var once = _.once(function () {
             this.stopListening(obj, name, once);
             callback.apply(this, arguments);
         });
         once._callback = callback;
+
         return this.listenTo(obj, name, once);
     },
 
     // Tell this object to stop listening to either specific events ... or
     // 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;
-            var remove = !name && !callback;
+        const remove = !name && !callback;
         if (!callback && typeof name === "object") callback = this;
         if (obj) (listeningTo = {})[obj._listenId] = obj;
-            for (var id in listeningTo) {
+        for (const id in listeningTo) {
             obj = listeningTo[id];
             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;
 
     // Handle event maps.
     if (typeof name === "object") {
-            for (var key in name) {
+        for (const key in name) {
             obj[action].apply(obj, [key, name[key]].concat(rest));
         }
+
         return false;
     }
 
     // Handle space separated event names.
     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));
         }
+
         return false;
     }
 
     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) {
         case 0:
             while (++i < l) (ev = events[i]).callback.call(ev.ctx);
+
             return;
         case 1:
             while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1);
+
             return;
         case 2:
             while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2);
+
             return;
         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;
         default:
             while (++i < l) (ev = events[i]).callback.apply(ev.ctx, args);
+
             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 = {});
     if (options.routes) this.routes = options.routes;
     this._bindRoutes();
     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
     // initialization logic.
-        _init: function () {
+    _init() {},
-        },
 
     // 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;
             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) {
-                    router.trigger.apply(router, ["route:" + name].concat(args));
+                router.trigger.apply(router, [`route:${name}`].concat(args));
                 router.trigger("route", name, args);
-                    BI.history.trigger("route", router, name, args);
+                history.trigger("route", router, name, args);
             }
         });
+
         return this;
     },
 
     // Execute a route handler with the provided parameters.  This is an
     // 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);
     },
 
     // 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;
     },
 
     // Bind all defined routes to `BI.history`. We have to reverse the
     // order of the routes here to support behavior where the most general
     // routes can be defined at the bottom of the route map.
-        _bindRoutes: function () {
+    _bindRoutes() {
         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) {
             this.route(route, this.routes[route]);
         }
@@ -280,25 +322,28 @@
 
     // Convert a route string into a regular expression, suitable for matching
     // against the current location hash.
-        _routeToRegExp: function (route) {
+    _routeToRegExp(route) {
-            route = route.replace(escapeRegExp, "\\$&")
+        route = route
+            .replace(escapeRegExp, "\\$&")
             .replace(optionalParam, "(?:$1)?")
-                .replace(namedParam, function (match, optional) {
+            .replace(namedParam, (match, optional) =>
-                    return optional ? match : "([^/?]+)";
+                optional ? match : "([^/?]+)"
-                })
+            )
             .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
     // extracted decoded parameters. Empty or unmatched parameters will be
     // 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.
             if (i === params.length - 1) return param || null;
-                var resultParam = null;
+            let resultParam = null;
             if (param) {
                 try {
                     resultParam = decodeURIComponent(param);
@@ -306,84 +351,86 @@
                     resultParam = param;
                 }
             }
+
             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.checkUrl = BI._.bind(this.checkUrl, this);
+    this.checkUrl = _.bind(this.checkUrl, this);
 
     // Ensure that `History` can be used outside of the browser.
     if (typeof window !== "undefined") {
         this.location = _global.location;
         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
     // twenty times a second.
     interval: 50,
 
     // 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();
     },
 
     // In IE6, the hash fragment and search params are incorrect if the
     // fragment contains `?`.
-        getSearch: function () {
+    getSearch() {
-            var match = this.location.href.replace(/#.*/, "").match(/\?.+/);
+        const match = this.location.href.replace(/#.*/, "").match(/\?.+/);
+
         return match ? match[0] : "";
     },
 
     // Gets the true hash value. Cannot use location.hash directly due to bug
     // 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] : "";
     },
 
     // 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 {
             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);
+
         return path.charAt(0) === "/" ? path.slice(1) : path;
     },
 
     // Get the cross-browser normalized URL fragment from the path or hash.
-        getFragment: function (fragment) {
+    getFragment(fragment) {
         if (fragment == null) {
             if (this._hasPushState || !this._wantsHashChange) {
                 fragment = this.getPath();
@@ -391,73 +438,91 @@
                 fragment = this.getHash();
             }
         }
+
         return fragment.replace(routeStripper, "");
     },
 
     // Start the hash change handling, returning `true` if the current URL matches
     // 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;
 
         // Figure out the initial configuration. Do we need an iframe?
         // 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._wantsHashChange = this.options.hashChange !== false;
         this._hasHashChange = "onhashchange" in window;
         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();
 
         // 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
         // requested.
         if (this._wantsHashChange && this._wantsPushState) {
-
             // 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...
             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 true;
 
                 // 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...
             } 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
         // support the `hashchange` event, HTML5 history, or the user wants
         // `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.style.display = "none";
             iframe.tabIndex = -1;
-                var body = document.body;
+            const body = document.body;
             // 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.location.hash = "#" + this.fragment;
+            this.iframe.location.hash = `#${this.fragment}`;
         }
 
         // 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
         // 'onhashchange' is supported, determine how we check the URL state.
         if (this._hasPushState) {
             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);
         } else if (this._wantsHashChange) {
             this._checkUrlInterval = setInterval(this.checkUrl, this.interval);
@@ -468,16 +533,22 @@
 
     // Disable BI.history, perhaps temporarily. Not useful in a real app,
     // but possibly useful for unit testing Routers.
-        stop: function () {
+    stop() {
         // 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.
         if (this._hasPushState) {
             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);
         }
 
@@ -494,14 +565,17 @@
 
     // Add a route to be tested when the fragment changes. Routes added later
     // 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
-        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];
             }
         }
@@ -510,10 +584,10 @@
     },
 
     // 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) {
             this.handlers.splice(index, 1);
         }
@@ -521,14 +595,13 @@
 
     // Checks the current URL to see if it has changed, and if it has,
     // calls `loadUrl`, normalizing across the hidden iframe.
-        checkUrl: function (e) {
+    checkUrl(e) {
-            var current = this.getFragment();
+        let current = this.getFragment();
         try {
             // getFragment 得到的值是编码过的,而this.fragment是没有编码过的
             // 英文路径没有问题，遇上中文和空格有问题了
             current = decodeURIComponent(current);
-            } catch(e) {
+        } catch (e) {}
-            }
         // If the user pressed the back button, the iframe's hash will have
         // changed and we should use that for comparison.
         if (current === this.fragment && this.iframe) {
@@ -543,11 +616,13 @@
     // Attempt to load the current URL fragment. If a route succeeds with a
     // match, returns `true`. If no defined routes matches the fragment,
     // returns `false`.
-        loadUrl: function (fragment) {
+    loadUrl(fragment) {
         fragment = this.fragment = this.getFragment(fragment);
-            return BI._.some(this.handlers, function (handler) {
+
+        return _.some(this.handlers, (handler) => {
             if (handler.route.test(fragment)) {
                 handler.callback(fragment);
+
                 return true;
             }
         });
@@ -560,44 +635,51 @@
     // The options object can contain `trigger: true` if you wish to have the
     // 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.
-        navigate: function (fragment, options) {
+    navigate(fragment, options) {
         if (!History.started) return false;
-            if (!options || options === true) options = {trigger: !!options};
+        if (!options || options === true) options = { trigger: !!options };
 
         // Normalize the fragment.
         fragment = this.getFragment(fragment || "");
 
         // Don't include a trailing slash on the root.
-            var root = this.root;
+        let root = this.root;
         if (fragment === "" || fragment.charAt(0) === "?") {
             root = root.slice(0, -1) || "/";
         }
-            var url = root + fragment;
+        const url = root + fragment;
 
         // Strip the hash and decode for matching.
-            fragment = fragment.replace(pathStripper, "")
+        fragment = fragment.replace(pathStripper, "");
         try {
             fragment = decodeURI(fragment);
-            } catch(e) {
+        } catch (e) {}
-            }
 
         if (this.fragment === fragment) return;
         this.fragment = fragment;
 
         // If pushState is available, we use it to set the fragment as a real URL.
         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
             // fragment to store history.
         } else if (this._wantsHashChange) {
             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
                 // history entry on hash-tag change.  When replace is true, we don't
                 // want this.
                 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-
@@ -610,18 +692,16 @@
 
     // Update the hash location, either replacing the current entry, or adding
     // a new one to the browser history.
-        _updateHash: function (location, fragment, replace) {
+    _updateHash(location, fragment, replace) {
         if (replace) {
-                var href = location.href.replace(/(javascript:|#).*$/, "");
+            const href = location.href.replace(/(javascript:|#).*$/, "");
-                location.replace(href + "#" + fragment);
+            location.replace(`${href}#${fragment}`);
         } else {
             // 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;
-}());

template/index.html

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