1. 问题: 在chrome访问一个带hash的url, 执行滚动到页面上存在的某一个元素的位置, 每当刷新页面会出现回滚的现象
2. 解决方案: history.scrollRestoration = ‘’manual’, 把chrome自动记录改成手动

history-api-scroll-restoration
code:

1
2
3
4

if ('scrollRestoration' in history) {
    #// Back off, browser, I got this...
    history.scrollRestoration = 'manual';
}

CSS检测浏览器

适用与Internet Explorer、Firefox、Safari和Chrome的更新版本

husky 文档

husky 安装

1

npm install husky --save-dev

监听document元素:

$(document)
        .on('DOMNodeInserted', '.item-content .ajax-progress', function() {})　// 插入(DOMNodeInserted)
        .on('DOMNodeRemoved', '#edit-field-qc-publisher-button + .ajax-progress', function() {}) //删除(DOMNodeRemoved)
};

ajaxComplete监听触发ajax事件:

#ajaxComplete
  $(document).ajaxComplete(function (e) {
    const { activeElement } = e.target;
    if (activeElement.id === 'edit-back') {
        console.log(activeElement.text());
    } else if (activeElement.id === 'edit-code') {
        ...
    }
  });

  # ajaxSuccess 

软件简介

https://github.com/necolas/normalize.css/
Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。

安装

1

npm install --save normalize.css

应用

1
2

main.js全局引入
import 'normalize.css'

传入日期减去当前日期,得到剩余天数:

const calculateDate = (days) => {
    const myDate = new Date();
    const myToday = `${myDate.getFullYear()}-${myDate.getMonth() + 1}-${myDate.getDate()}`;
    const date1 = new Date(days);
    // console.log('myToday', myToday);
    const today = new Date(myToday);
    // const date2=new Date(yyyy-MM-dd);
    const date = (date1.getTime() - today.getTime()) / (1000 * 60 * 60 * 24); // 不考虑闰年否
    return date.toFixed(0);
};

mixins.scss

css3 上下左右居中:

1. transform:translate(左右，上下)上下左右居中:

1
2
3
4
5
6

.video{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

2. flex (左右，上下)上下左右居中:

1
2
3
4
5

.container{
   display: flex;
   align-items: center;/* 垂直居中 */
   justify-content: center;/* center左右居中, space-between两端对齐 */
 }

css2 上下左右居中:

3. position:absolute, margin(左右，上下)上下左右居中:

1
2
3
4
5
6
7
8
9

.video{
	position:absolute;
	top:50%;
	left:50%;
    with: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
}

4. display: table(左右，上下)上下左右居中:

1
2
3
4
5
6
7
8
9
10
11

.box {
  display: table;
  table-layout: fixed; //ie
  width: 100%;
  height: 100%;
  text-align:center;
}
.box div {
  display: table-cell;
  vertical-align: middle;
}

安装gulp

1

npm i gulp gulp-cli -g

在当前themes下编译:

1
2

gulp sass
gulp build

webpack性能优化–产出代码

体积更小
合理分包,不重复加载
速度更快, 内存使用更少