分类 代码如诗 下的文章

统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格,提供常用媒体查询语句和浏览器私有属性引用,并从业务层面统一规范常用模块的引用。

- 阅读剩余部分 -

了解各种图片格式特性,根据特性制定图片规范,包括但不限于图片的质量约定、图片引入方式、图片合并处理等,旨在从图片层面优化页面性能。

- 阅读剩余部分 -

BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目。

- 阅读剩余部分 -

Cookie

Cookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

localStorage

localStorageHTML5 标准中新加入的技术,它并不是什么划时代的新东西。早在 IE 6 时代,就有一个叫 userData 的东西用于本地存储,而当时考虑到浏览器兼容性,更通用的方案是使用 Flash。而如今,localStorage 被大多数浏览器所支持,如果你的网站需要支持 IE6+,那以 userData 作为你的 polyfill 的方案是种不错的选择。

sessionStorage

sessionStoragelocalStorage 的接口类似,但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思,直译过来是“会话”。而 sessionStorage 是一个前端的概念,它只是可以将一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage 中的数据就会被清空。

- 阅读剩余部分 -

昨天试了试微信的赞赏二维码,还不错,放博客上面说不定就有大佬给俺打赏了呢……

HTML代码,自己找地方放就好

<div class="support-author">
 <a class="support-btn" href="javascript:void(0)">打赏</a>
 <div class="support-content">
  <img src="图片地址" alt="微信打赏">
 </div>
</div>

- 阅读剩余部分 -

文件后缀名

Sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,这种和我们平时写的CSS文件格式差不多,使用大括号和分号。建议使用后缀名为scss的文件,以避免Sass后缀名的严格格式要求报错。

- 阅读剩余部分 -

方案1

使用官方的滚动行为,但是必须开启HTML5 history 模式,开启HTML5 history 模式需要后端进行一些配置;

对于所有路由导航,简单地让页面滚动到顶部:

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

像浏览器的原生表现那样:

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

方案2

没有使用HTML5 history 模式,需要使用官方的导航守卫中的router.beforeEach

router.beforeEach((to, from, next) => {
  window.scrollTo(0, 0)  
  next()
});