Fork me on GitHub

防抖节流函数

防抖函数和节流函数都是用来提升性能优化及用户体验的一种方案;

防抖函数只会执行一次,且是最后触发的那一次,而节流函数会规律性的执行多次;

防抖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//定义方法即要做的事情
function fun() {
console.log('onresize');
}
//定义事件触发要执行的方法,两个参数分别是传入的要做的事情和定时器的毫秒数
function debounce(fn, delay) {
//定义一个变量作为等会清除对象
var handle;
//这里用到了闭包,一个函数里面return另一个函数,变量相互签引导致垃圾回收机制不会销毁handle变量
return function () {
//在这里一定要清除前面的定时器,然后创建一个新的定时器
clearTimeout(handle);
//最后这个定时器只会执行一次也就是事件触发完成之后延迟500毫秒再触发(这里的变量赋值是跟定时器建立连接,进行地址赋值,一定要重新赋值给handle
handle = setTimeout(function () { fn() }, delay);
}
}
//给浏览器添加监听事件resize
window.addEventListener('resize', debounce(fun, 500));
Read more

EDM邮件制作

EDM营销(Email Direct Marketing)也叫:Email营销、电子邮件营销。是指企业向目标客户发送EDM邮件,建立同目标顾客的沟通渠道,向其直接传达相关信息,用来促进销售的一种营销手段。也可用于发送邮件广告、产品信息、销售信息、市场调查、市场推广活动信息等。

1. 清除表格默认样式

如果你对<table>相关属性不太了解,建议先了解一下它常用的一些属性

table标签用来定义一个表格,无论是在邮件中还是在不同浏览器中,table标签都带有默认的间距以及一些不能被Style覆盖的属性,在页面清除相对简单一行CSS就搞定,但在邮件中我们只能写行内样式,所以需要给<table>加上以下属性和样式。

1
2
3
4
5
6
7
8
<table cellpadding="0" cellspacing="0" border="0" style="border-spacing:0; border-collapse:collapse;table-layout:fixed;">
<tr>
<td style="padding: 0;">
<!-- 嵌套表格也需要清除样式 -->
<table cellpadding="0" cellspacing="0" border="0" style="border-spacing:0; border-collapse:collapse;table-layout:fixed;"></table>
</td>
</tr>
</table>
Read more

Vue项目部署的最佳实践

前言

使用vuereactangular等技术开发过程中,我们都会遇到以下问题:

  1. 首屏加载慢
  2. 每一次更新都需要清除浏览器缓存才能看到效果(经常被测试吐槽)

这两个问题可以从很多方面进行优化,今天我就从前端页面部署阶段来优化一下这两个问题。PS:以下内容都基于vue-cli3+

前端页面文件缓存方案

vue-cli3打包说起

路由使用按需加载后,打包生成的文件,每一个路由页面都对应一个jscss文件,入口main.js及其依赖则打包成了app.jsapp.css,公共依赖都放到了chunk-vendors.js

vue-cli3打包后的dist/js文件夹:

Read more

Hexo一键部署到云服务器

摘要: 在云主机上搭建一个私有git裸仓库,然后使用nginx作为web服务器,就可以轻松将Hexo博客通过git一键部署到云主机上。

为什么要把Hexo放到服务器上呢?

  1. 首先,因为Github国内访问实在是有点慢,也不想用CDN加速。

  2. 码云托管指定域名的服务要花钱,不想花钱。

  3. 主要还是自己比较喜欢折腾。

  4. 为什么不用Workpress呢?因为选主题实在是太难了,太难选到心仪的主题,样式自己盖起来也不那么方便。我的Woekpress博客已经打算放弃他了。

Read more

整理的html&css属性

HTML

禁止选中区域

1
2
3
<div onselectstart="return false">
此区域禁止复制
</div>

CSS

文本超出两行添加省略号隐藏

css的三条属性

overflow:hidden; //超出的文本隐藏

text-overflow:ellipsis; //溢出用省略号显示

white-space:nowrap; //溢出不换行

这三个是css的基础属性,需要记得。

Read more
载入天数...载入时分秒...

请我喝杯咖啡吧~

支付宝
微信