// 防抖函数
function debounce(fun, delay) {
return function (...args) {
clearTimeout(fun.timer)
fun.timer = setTimeout(() => {
fun.apply(this, args)
}, delay)
}
}
// 节流函数
function throttle(fun, delay) {
return function (...args) {
if (fun.timer) { return }
fun.apply(this, args)
fun.timer = setTimeout(() => {
fun.timer = null
}, delay)
}
}
// 验证
function test(fn, delay, num) {
while (num > 0) {
const random = Math.round(Math.random() * delay)
setTimeout(() => {
console.log(random)
fn(random)
}, random)
num--
}
}
const DELAY = 1000 // 时间阈值
const NUM = 3 // 验证次数
test(debounce((last) => console.log('只有最后一次实际执行', last), DELAY), DELAY, NUM)
// test(throttle((first) => console.log('只有第一次实际执行', first), DELAY), DELAY, NUM)
命令行运行
git filter-branch --env-filter '
OLD_EMAIL="old_email@example.com"
CORRECT_NAME="correct_name"
CORRECT_EMAIL="correct_email@example.com"
if [ "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL" ]
then
export GIT_COMMITTER_NAME="$CORRECT_NAME"
export GIT_COMMITTER_EMAIL="$CORRECT_EMAIL"
fi
if [ "$GIT_AUTHOR_EMAIL" = "$OLD_EMAIL" ]
then
export GIT_AUTHOR_NAME="$CORRECT_NAME"
export GIT_AUTHOR_EMAIL="$CORRECT_EMAIL"
fi
' --tag-name-filter cat -- --branches --tags
git push --force
5 分钟调度一次
/app/schedule/cluster.js
'use strict'
module.exports = {
schedule: {
interval: 5 * 60 * 1000,
type: 'cluster'
},
async task(ctx) {
// do something...
}
}
/agent.js
'use strict'
const sleep = s => new Promise(resolve => setTimeout(resolve, s))
module.exports = agent => {
class ClusterStrategy extends agent.ScheduleStrategy {
start() {
try {
;(async () => {
while (true) {
const { interval } = this.schedule
await sleep(interval)
this.sendOne()
}
})()
} catch (error) {
ctx.logger.error(error)
}
}
}
agent.schedule.use('cluster', ClusterStrategy)
}
每天凌晨调度一次
/app/schedule/cluster.js
'use strict'
module.exports = {
schedule: {
cron: '0 0 0 * * *',
type: 'cluster'
},
async task(ctx) {
// do something...
}
}
/agent.js
'use strict'
const parser = require('cron-parser')
const sleep = s => new Promise(resolve => setTimeout(resolve, s))
module.exports = agent => {
class ClusterStrategy extends agent.ScheduleStrategy {
start() {
try {
;(async () => {
const { cron } = this.schedule
const interval = parser.parseExpression(cron)
while (true) {
const next = interval.next()
const date = next.toString()
const timestamp = new Date(date).getTime()
await sleep(timestamp - Date.now())
this.sendOne()
}
})()
} catch (error) {
ctx.logger.error(error)
}
}
}
agent.schedule.use('cluster', ClusterStrategy)
}
import React from 'react'
import Hammer from 'hammerjs'
class HammerReact extends React.Component {
state = { container: React.createRef() }
componentDidMount() {
const { container: { current } } = this.state
this.listener = new Hammer(current)
// 给监听的元素对象添加长按(press)事件
this.listener.on('press', (e) => {
// Do some thing...
})
}
componentWillUnmount() {
this.listener.destroy() // 销毁
}
render() {
<div ref={container}>我是 div</div>
}
}
ReactDOM.render(<HammerReact />, document.getElementById('root'))
在添加的手势元素是动态渲染的情况下，通过事件委托的方式在父级元素处理。
this.listener.on('press', (e) => {
const { target: { nodeName } } = e
if (nodeName === 'DIV') {
// Do some thing...
}
})
<input type="file" accept="image/*" onChange="{handleFileChange}" />
// image2array.js
export default function(url, callback) {
const image = new Image(url)
image.onload = function() {
try {
let { naturalWidth: width, naturalHeight: height } = image
const ratio = Math.min(500 / width, 500 / height)
const cWidth = ~~(ratio * width)
const cHeight = ~~(ratio * height)
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = cWidth
canvas.height = cHeight
ctx.drawImage(image, 0, 0, width, height, 0, 0, cWidth, cHeight)
const data = ctx.getImageData(0, 0, cWidth, cHeight)
callback(null, data)
} catch (e) {
callback(e)
}
}
image.onerror = function() {
callback('image load fail')
}
image.src = url
}
import jsQR from 'jsqr'
import image2array from '../../../utils/image2array'
function handleFileChange(e) {
const { files } = e.target
if (files.length === 0) return
const reader = new FileReader()
const file = files[0]
// 休眠等待 image2array 计算，数据流格式转化至 Uint8ClampedArray
await new Promise((res) => { setTimeout(() => { res() }, 100) })
const imageUrl = URL.createObjectURL(file)
try {
image2array(imageUrl, (err, info) => {
if (!err) return
const { data, width, height } = info
const binaryData = jsQR(data, width, height)
if (binaryData && binaryData.data) {
const link = binaryData.data
console.log(link)
}
})
} catch (error) {
console.log(error)
}
}
import QRCode from 'qrcode'
const link = 'https://karl-cheung.github.io'
QRCode.toDataURL(link, {}, (err, url) => {
if (err) return
console.log(url)
}
部署在根目录的项目
location / {
try_files $uri $uri/ /index.html;
}
未部署在根目录的项目
if (!-e $request_filename) {
rewrite ^/(.*) /index.html last;
break;
}
或
location / {
try_files $uri $uri/ @router;
}
location @router {
rewrite ^.*$ /index.html last;
}
const router = new VueRouter({
mode: 'history',
})
如果应用服务在
/app/下（非根目录）
const router = new VueRouter({
base: '/app/',
mode: 'history',
})
React Router 默认开启 browserHistory
如果应用服务在
/app/下（非根目录）
<BrowserRouter basename='/app'></BrowserRouter>