2019.05 - Githubissues

tiu5 commented 5 years ago

导航守卫
回文串
Vue 如何添加自定义方法？全局方法，全局变量？
CSS 中类 (classes) 和 ID 的区别？
浮动 float

tiu5 commented 5 years ago

导航守卫

参考文档：导航守卫

全局前置守卫 beforeEach

to[Route]：即将要进入的目标

from[Route]：当前导航正要离开的路由

next[Function]：确保要调用 next 方法，否则钩子就不会被 resolved，就相当于没有跳转成功，router-view 不会渲染

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。

next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

// 添加 beforeEach
router.beforeEach((to, from, next) => {
  // ...
})

// vue-router 部分源码
// route => to, current => from, function(to) => next()
hook(route, current, function (to) {
    if (to === false || isError(to)) {
      // next(false) -> abort navigation, ensure current URL
      this$1.ensureURL(true);
      abort(to);
    } else if (typeof to === 'string' || (typeof to === 'object' && (typeof to.path === 'string' || typeof to.name === 'string'))) {
      // next('/') or next({ path: '/' }) -> redirect
      abort();
      if (typeof to === 'object' && to.replace) {
        this$1.replace(to);
      } else {
        this$1.push(to);
      }
    } else {
      // confirm transition and pass on the value
      next(to);
    }
});

全局解析守卫

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

全局后置钩子

// 你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
router.afterEach((to, from) => {
// ...
})

路由独享的守卫

// 你可以在路由配置上直接定义 beforeEnter 守卫：
// 这些守卫与全局前置守卫的方法参数是一样的
const router = new VueRouter({
routes: [
{
  path: '/foo',
  component: Foo,
  beforeEnter: (to, from, next) => {
    // ...
  }
}
]
})

组件内的守卫

const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
// 可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数
 next(vm => {
// 通过 `vm` 访问组件实例
})
},
beforeRouteUpdate (to, from, next) {
//  (2.2 新增)
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
// 这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}
}

完整的导航解析流程

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

tiu5 commented 5 years ago

检查是否为回文串

参考资料：http://singsing.io/blog/fcc/basic-check-for-palindromes/

https://leetcode-cn.com/problems/valid-palindrome/

给定一个字符串，验证它是否是回文串，只考虑字母和数字字符，可以忽略字母的大小写。说明：本题中，我们将空字符串定义为有效的回文串。

示例 1:

输入: "A man, a plan, a canal: Panama" 输出: true 示例 2:

输入: "race a car" 输出: false

大概步骤：

获取有效的字符串，我们利用正则去匹配字母和数字，因为忽略大小写，所以我们转成小写
然后利用 split('') 把字符串分割成数组，再用数组的 reverse() 去反转，再用 join(‘’) 去拼接

最后进行比较

/**
* @param {string} s
* @return {boolean}
*/
var isPalindrome = function(s) {
if (s.length === 1) return true
const str = s.replace(/[^a-zA-Z0-9]/g, "").toLowerCase()
const strReverse = str.split('').reverse().join('')
return str === strReverse
};

tiu5 commented 5 years ago

Vue 如何添加自定义方法？全局方法，全局变量？

参考: Vue.js 如何添加全局函数或变量?

Vue.prototype.xxx = xxx 直接在原型上挂载

// app.js
Vue.prototype.$getName = () => console.log('tao')

// HelloWorld.vue
export default {
name: "HelloWorld",
created () {
  this.$getName() // log: 'tao'
}
}

混入 mixin

// util.js
export const sayHello = {
  methods: {
    sayHello() {
      console.log('hello')
    }
  }
}

// index.vue 局部
import { sayHello } from './util.js'
export default {
  mixins: [ sayHello ]
}

// app.js 全局
import { sayHello } from './util.js'
Vue.mixin(sayHello)

/*
* 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
*
* 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
*
* Vue.extend() 也使用同样的策略进行合并。
*/

插件
- 添加全局方法或者属性
- 添加全局资源：指令/过滤器/过渡等
- 通过全局混入来添加一些组件选项
- 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现
- 一个库，提供自己的 API，同时提供上面提到的一个或多个功能
```
// util.js
export default {
install(Vue, options) {
Vue.prototype.getName = () => console.log('tao')
}
}
```
// app.js Vue.use(util)

// App.vue export default { name: "App", components: { HelloWorld }, created() { this.getName() // log: 'tao' } };

Vue 官方文档

tiu5 commented 5 years ago

CSS 中类 (classes) 和 ID 的区别？

class 和 id 都有给文档添加含义的作用，如 <div class="header"></div>
在起名字的基础上，id 和 class 应该是两种不同的类型，id 代表的是特定实例，而 class 应该是可以复用的样式
在 css 选择器中，id 优先级高于 class，我们不建议用 id 去添加样式，id 的作用应该是去标识特定元素
书写格式不同，#id {}, .class{}

tiu5 commented 5 years ago

浮动 float

起初的目的：实现文字环绕效果。
float: left; 向左浮动 float: right; 向右浮动。会一直往左或右移动，直到接触到浮动盒子或者包含块的元素边沿。
脱离常规文档流，进而宽度自适应内容，当然你可以通过 width, min-width, max-width去设置，这点不像行内元素。
然后浮动排列，如果宽度不够，则会排成多行，或者前面元素高度过大，也会卡住后面的浮动元素。
因为脱离常规文档流，浮动元素会浮在块级元素上面，而行内元素则会记住浮动元素的位置大小，进而让出位置，达到文字环绕效果。
清除浮动 clear 属性: left, right, both, none 用于指定那边不应该紧挨着浮动盒子。
清除浮动会在该盒子上添加上足够大的外边距。
参考博客：https://spades-s.github.io/2018-03-08-css权威指南-浮动和定位/ 在CSS1和CSS2中，clear会增加元素的上外边距，使之最后落在浮动元素的下面。

在CSS2.1中引入了清除区域，清除区域是在元素上外边距之上增加的额外间隔，不允许任何浮动元素进入这个范围内，也就是说元素设置clear属性，其外边距并不会改变，之所以下移是清除区域造成的。我在chrome中进行了测试，验证了清除区域的存在。
```
<div class="content">
<p>123</p>
<div class="float">321</div>
<div class="clear"></div>
</div>
```

- 要多一个空盒子很麻烦，进而有利用伪类`:after`
```html
<div class="content">
    <p>123</p>
    <div class="float">321</div>
</div>

<style>
.content {
  background: blue;
}

.float {
  float: left;
}

.content:after {
  content: '';
  clear: both;
  display: block;
}
</style>

tiu5 / blog

2019.05 #4

导航守卫

检查是否为回文串

Vue 如何添加自定义方法？全局方法，全局变量？

CSS 中类 (classes) 和 ID 的区别？

浮动 float