发表于 | 更新于 | 阅读次数：
本文字数： 1.2k | 阅读时长 ≈ 1 分钟

最近抽了一些时间学习了张鑫旭写的《CSS世界》这本书，一个很直观的感受就是这本书写的很系统。里面的知识点解决了我在项目中遇到的一些困惑，因此把一些point记录下来以便日后查看

CSS内部尺寸包裹性

所谓内部尺寸是指元素的尺寸由内部元素来决定，典型的例子就是inline-block元素。而包裹性是指只要你设置了一个宽度，里面的内容再多，它也不会超出容器设定好的宽度，而是表现为内容换行

阅读全文 »

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 1.5k | 阅读时长 ≈ 1 分钟

首先回顾一下filter的作用：过滤数组中符合条件的元素

基本用法

1
2
3
let arr = [1, 3, 5, 8]
let arrFilter = arr.filter(ele => ele > 4)
console.log(arrFilter) // [5, 8]

另外也可以用来过滤对象数组中符合条件的对象，eg：

1
2
3
4
5
6
7
8
9
10
11
12
13
let arrObj = [{
  name: 'aa', age: 13
}, {
  name: 'bb', age: 23
}, {
  name: 'cc', age: 18
}, {
  name: 'dd', age: 11
}, {
  name: 'ee', age: 28
}]
let arrObjFilter = arrObj.filter(ele => ele.age > 18)
console.log(arrObjFilter) // [{name: 'bb', age: 23}, {name: 'ee', age: 28}]
阅读全文 »

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 704 | 阅读时长 ≈ 1 分钟

不跨域情况：

1
2
3
4
5
6
7
const getParentUrlInIfram = () => {
    if(window.parent !== window.self) { //判断是否存在iframe
        window.top.location.href = '/' // 只有一层iframe时有效
        // 或
        window.parent.location.href = '/'
    }
}

跨域情况，无解。只能间接的修改子页面URL模拟修改父页面URL

1
2
3
4
5
6
7
const getParentUrlInIfram = () => {
    if(window.parent !== window.self) { //判断是否存在iframe
        window.top.location.href = '//localhost:8080/' // 只有一层iframe时有效
        // 或
        window.parent.location.href = '//localhost:8080/'
    }
}

另外，跨域时可获取父页面URL

1
2
3
4
5
const getParentUrlInIfram = () => {
    if(window.parent !== window.self) { //判断是否存在iframe
       return document.referrer
    }
}

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 950 | 阅读时长 ≈ 1 分钟

兼容IE8

1
2
3
4
5
6
7
8
9
10
11
12
13
// time格式为 '2018-08-01或2018/08/01或2018/8/1'
var daysComputed = function(time) {
    var oldTimeFormat = new Date(time.replace(/-/g, '/'));
    var nowDate = new Date();
    if(nowDate.getTime() - oldTimeFormat.getTime() > 0) {
        var times = nowDate.getTime() - oldTimeFormat.getTime();
        var days = parseInt(times / (60*60*24*1000));
        return days;
    } else {
        throw('传入时间不能大于当前日期');
    }
}
daysComputed('2017-11-1');

兼容现代浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
// time格式为 '2018-08-01或2018/08/01或2018/8/1'
const daysComputed = time => {
    let oldTimeFormat = new Date(time)
    let nowDate = new Date()
    if(nowDate.getTime() - oldTimeFormat.getTime() > 0) {
        let times = nowDate.getTime() - oldTimeFormat.getTime()
        let days = parseInt(times / (60*60*24*1000))
        return days
    } else {
        throw('传入时间不能大于当前日期')
    }
}
daysComputed('2017-11-1')

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 4.3k | 阅读时长 ≈ 4 分钟

本文旨在记录《CSS揭秘》这本书中出现的CSS经典技巧

1.半透明边框

假设我们想给一个容器设置一层白色背景和一道半透明的边框，我们最初的尝试可能是这样的：

1
2
border: 10px solid hsla(0, 0%, 100%, .5);
background: #fff;

除非你对背景和边框的工作原理非常地熟悉，否则展示出来的结果可能让你摸不着头脑，因为我们的背景会从它的半透明边框透上来。如下图所示：

阅读全文 »

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 2.2k | 阅读时长 ≈ 2 分钟

函数去抖

浏览器中某些计算和处理要比其他的昂贵的多。例如，DOM操作比起非DOM交互需要更多的内存和cpu时间。连续尝试进行过多的DOM相关操作可能导致浏览器挂起甚至崩溃。尤其是IE中使用onresize事件处理程序的时候容易发生，当调整浏览器大小时，该事件便会频繁触发。在onresize事件处理程序内部如果尝试进行DOM操作，其高频率的更改可能会让浏览器崩溃。为了绕开这个问题，你可以使用定时器对该函数进行节流。

函数节流背后的基本思想是指，某些代码不可以在没有间断的情况连续重复进行。第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它将清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换成一个新的计时器。目的是只有在执行函数的请求停止了一段时间之后才执行。

阅读全文 »

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 867 | 阅读时长 ≈ 1 分钟

站点根目录部署

  1. 执行npm run build
  2. 找到dist目录，把里面的文件直接丢到站点根目录下即可

站点子目录部署

  1. 修改config/index.js
1
2
3
4
5
6
7
8
module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './', // 修改这里，防止报404错误
    productionSourceMap: true
阅读全文 »

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 1.3k | 阅读时长 ≈ 1 分钟

考虑如下html片段

1
2
3
4
5
6
<ul id="members">
    <li>
        <a href="a.html">点击一下有惊喜</a>
        <a href="b.html">还真点啊</a>
    </li>
</ul>

使用bind方法

bind()方法直接在DOM元素中注册事件类型和事件处理函数。虽然它对浏览器的兼容性很好，但是却有很大的性能问题。

1
2
3
4
5
6
7
$("#members li a").bind( "click", function(e) {
    console.log(e)
})
// 或
$("#members li a").click(function(e) {
    console.log(e)
})

bind()方法会匹配所有符合条件的元素附加上事件处理程序，这样做很浪费时间，因为绑定的都是同一个事件处理函数。类似于在原生JS中给每个<li>绑定onclick事件。

阅读全文 »

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 226 | 阅读时长 ≈ 1 分钟

yarn / yarn install === npm install
yarn add xxx === npm install xxx –save
yarn add xxx –dev === npm install xxx –save-dev
yarn remove xxx === npm uninstall xxx
yarn upgrade === npm update
yarn global add xxx === npm install xxx -g