优化路由;优化layer组件的按钮

src/js/layer/index.js

@@ -292,7 +292,9 @@ class __layer__ {
           ${repeat(
             style === 1
               ? '<i class="do-icon-loading"></i>'
-              : style === 2 ? '<i class="do-icon-app2"></i>' : '<i></i>',
+              : style === 2
+                ? '<i class="do-icon-app2"></i>'
+                : '<i></i>',
             this.dot[style]
           )}
         </span>
@@ -323,7 +325,7 @@ class __layer__ {
     } else {
       let html = ''
       let btns = `
-        <a href="javascript:;" class="action-yes"
+        <a class="action-yes"
           :click="handleConfirm"
           tabindex="-1"
           :text="btns[0]"
@@ -332,7 +334,7 @@ class __layer__ {
       if (type > 1) {
         btns =
           `
-        <a href="javascript:;" class="action-no"
+        <a class="action-no"
           :click="handleCancel"
           :text="btns[1]"
           ></a>

src/js/layer/skin/default.scss

@@ -55,7 +55,7 @@
       /* 弹层按钮部分 */
       .layer-ctrl {width:100%;height:40px;padding:5px 0;line-height:30px;font-size:14px;color:#454545;text-align:right;
 
-        a {overflow:hidden;position:relative;display:inline-block;width:auto;min-width:60px;height:30px;margin-left:5px;padding:0 10px;color:nth($ct, 1);text-align:center;
+        a {overflow:hidden;position:relative;display:inline-block;width:auto;min-width:60px;height:30px;margin-left:5px;padding:0 10px;color:nth($ct, 1);text-align:center;cursor:pointer;
 
           &::before {position:absolute;left:-50%;top:-50%;z-index:-1;display:block;width:200%;height:200%;border-radius:50%;background:nth($cp, 2); content:"";opacity:0;transform: scale(0, .0); transition:opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1),transform 1.3s cubic-bezier(0.23, 1, 0.32, 1);}
             

src/js/router/index.js

@@ -33,10 +33,15 @@ const RULE_REGEXP = /(:id)|(\{id\})|(\{id:([A-z\d\,\[\]\{\}\-\+\*\?\!:\^\$]*)\})
 
 class Router {
   constructor(options) {
-    this.table = []
-    this.history = null
-    this.path = ''
-    this.options = Object.assign({}, DEFAULT_OPTIONS, options)
+    Anot.hideProperty(this, 'table', [])
+    Anot.hideProperty(this, 'history', null)
+    Anot.hideProperty(this, 'path', '')
+    Anot.hideProperty(this, 'noMatch', null)
+    Anot.hideProperty(
+      this,
+      'options',
+      Object.assign({}, DEFAULT_OPTIONS, options)
+    )
     this.__listen__()
   }
 
@@ -53,6 +58,7 @@ class Router {
     return Anot.router
   }
 
+  // 事件监听
   __listen__() {
     let { mode, prefix } = this.options
 
@@ -63,10 +69,13 @@ class Router {
 
       if (ev.type === 'load') {
         this.go(path)
+        // hash模式要手动触发一下路由检测
         if (mode === 'hash') {
           this.__check__()
         }
       } else {
+        // 因为pushState不会触发popstate事件,
+        // 所以这里只在hash模式或有ev.state的情况下才会主动触发路由检测
         this.path = path.replace(/^[/]+?/, '')
         if (mode === 'hash' || ev.state) {
           this.__check__()
@@ -98,6 +107,10 @@ class Router {
           let href =
             target.getAttribute('href') || target.getAttribute('xlink:href')
 
+          if (!href) {
+            return
+          }
+
           // hash地址,只管修正前缀即可, 会触发popstate事件
           if (prefix.test(href)) {
             this.path = href.replace(prefix, '').trim()
@@ -112,7 +125,7 @@ class Router {
     })
   }
 
-  _getRegExp(rule, opts) {
+  __parseRule__(rule, opts) {
     let re = rule.replace(RULE_REGEXP, function(m, p1, p2, p3, p4) {
       let w = '([\\w.-]'
       if (p1 || p2) {
@@ -137,7 +150,7 @@ class Router {
   __add__(rule, callback) {
     // 特殊值"!", 则自动作非匹配回调处理
     if (rule === '!') {
-      this.notMatch = callback
+      this.noMatch = callback
       return
     }
     if (rule.charAt(0) !== '/') {
@@ -147,9 +160,10 @@ class Router {
     rule = rule.replace(/^[\/]+|[\/]+$|\s+/g, '')
     let opts = { rule, callback }
 
-    Anot.Array.ensure(this.table, this._getRegExp(rule, opts))
+    Anot.Array.ensure(this.table, this.__parseRule__(rule, opts))
   }
 
+  // 路由检测
   __check__() {
     let { allowReload, historyOpen } = this.options
     if (!allowReload && this.path === this.history) {
@@ -158,9 +172,6 @@ class Router {
 
     if (historyOpen) {
       this.history = this.path
-      if (Anot.ls) {
-        Anot.ls('lastPath', this.path)
-      }
     }
 
     for (let i = 0, route; (route = this.table[i++]); ) {
@@ -170,7 +181,7 @@ class Router {
         return route.callback.apply(route, args)
       }
     }
-    this.notMatch && this.notMatch(this.path)
+    this.noMatch && this.noMatch(this.path)
   }
 
   // 跳转到路由
@@ -179,6 +190,10 @@ class Router {
 
     if (mode === 'hash') {
       path = path.trim().replace(prefix, '')
+      // 页面刷新时, 不主动添加空hash, 避免执行2次noMatch回调
+      if (!path && path === location.hash) {
+        return
+      }
       location.hash = '!/' + path
       this.path = path
     } else {
@@ -186,6 +201,7 @@ class Router {
       path = path.replace(/^[/]+?/, '')
       window.history.pushState({ path }, null, `/${path + hash}`)
       this.path = path
+      // pushState不会触发popstate事件,所以要手动触发路由检测
       this.__check__()
     }
   }
@@ -202,4 +218,37 @@ class Router {
   }
 }
 
+Anot.component('link', {
+  construct(props, state) {
+    let { mode } = Anot.router.options
+    if (!props.to) {
+      return
+    }
+
+    if (mode === 'hash') {
+      state.link = '#!' + props.to
+    } else {
+      state.link = props.to
+    }
+    delete props.to
+  },
+  render() {
+    return '<a :attr-href="link" :text="props.label" :click="onClick"></a>'
+  },
+  state: {
+    link: ''
+  },
+  props: {
+    label: '',
+    click: Anot.PropsTypes.isFunction()
+  },
+  methods: {
+    onClick() {
+      if (typeof this.props.click === 'function') {
+        this.props.click()
+      }
+    }
+  }
+})
+
 export default Router