css篇

BFC

块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。

布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

如何生成BFC：

根元素
float不为none的元素
position为fixed和absolute的元素
display为inline-block、table-cell、table-caption，flex，inline-flex的元素
overflow不为visible的元素

参考文章：BFC原理及其应用

两列布局

侧边栏定宽，右边自适应

给定代码：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两类布局——定宽</title>
    <style>
        #header, #footer {
            height: 50px;
            width: 100%;
            background-color: blue;
        }
        #aside {
            height: 200px;
            width: 50px;
            background-color: green;
        }
        #main {
            height: 200px;
            background-color: yellow;
            width: calc(100% - 50px);
        }
    </style>
</head>
<body>
    <div id="page">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>
</html>

使用float来实现

css

#aside {
    float: left;
}
#main {
    overflow: hidden;  /*让main成为一个BFC，float也是一个BFC，两个BFC不会重叠*/
}

使用绝对定位来实现——麻烦，不推荐

使用flex来实现

css

#page {
    display: flex;
    flex-wrap: wrap;  /*超出则换行*/
}

使用inline-block实现

css

#page {
    font-size: 0;     /*消除html中空格*/
}
#aside {
    display: inline-block;
    font-size: 20px;
    vertical-align: top; /*当左右高度不一致时使用*/
}
#main {
    display: inline-block;
    font-size: 30px;
}

使用absolute和margin-left实现

侧边栏不定宽，右边自适应

给定代码：

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两类布局——不定宽</title>
    <style>
        #aside {
            height: 200px;
            background-color: green;
            float: left;
        }
        #main {
            height: 200px;
            background-color: yellow;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="page">
        <aside id="aside">aside</aside>
        <main id="main">main</main>
    </div>
</body>
</html>

使用float+BFC来实现

css

#aside {
    float:left;
}
#main {
    overfloat:hidden;
}

使用flex来实现

css

#page {
    display: flex;
}
#main {
    flex: 1;    /*自动分得父元素的宽度减去侧边栏的宽度*/
}

js篇

数据类型

严格区别变量类型和数据类型

数据的类型：
- 基本类型
- 对象类型
变量的类型：（变量内存值的类型）
- 基本类型：保存的就是基本类型的数据
- 引用类型：保存的是地址值

null

null与undefined区别

undefined代表定义未赋值
null定义了并赋值了，只是值为null

什么时候给变量赋值为null

初始赋值，表明将要赋值为对象
结束前，让对象成为垃圾对象（被垃圾回收器回收）

Javascript

1
2
3

var b = null
b = [1， 12]
b = null

vue篇

SPA

SPA仅在页面初始化时加载HTML、Javascript、CSS，不会因为用户的操作而进行页面刷新或跳转，使用路由机制来实现HTML内容的变换。

优点：

用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染
相对对服务器压力小
前后端分离，架构清晰。

缺点：

首次加载耗时
无法使用浏览器的前进后端，需使用路由控制前进后退
不利于SEO

v-if、v-show

v-if——真正的条件渲染，是惰性的。只有条件为真时，才会渲染条件块。适用于运行时不需要频繁切换条件的场景。

v-show——不管初始条件是什么，元素都会被渲染，只是简单基于css的display属性切换。适用于频繁切换条件的场景

computed、watch

computed——计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，*下一次获取 *computed 的值时才会重新计算 computed的值。

watch——更多的是「观察」的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。

数组变动

vue中不能检测一下数组的变动

利用索引重新设置一个数组项，如：vm.items[indexOfItem] = newValue 。

需使用如下方法

Javascript

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set，Vue.set的一个别名
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

修改数组的长度，如：vm.items.length = newLength。

需使用如下方法
Javascript
1
2
// Array.prototype.splice
vm.items.splice(newLength)

算法篇

基本排序

冒泡排序

原理：把一组数组的元素两两比较，交换位置，从而实现排序。

Javascript

function bubbleSort (arr) {
    let i,j,temp;
    // 外层循环控制比较的轮数
    for (i = 0; i < arr.length-1 ; i++) {
        // 里层循环控制每一轮比较的次数
        for (j = 0; j < arr.length-1-i; j++) {
            // 当前项大于后一项时交换
            if (arr[j] > arr[j+1]) {
                temp = arr[j]
                arr[j] = arr [j+1]
                arr[j+1] = temp
            }
        }
    }
    return arr
}

插入排序

原理：扑克牌玩法

Javascript

function insertSort(arr) {
    // 准备一个新数组，用来存放抓到的牌
    let handle = []
    handle.push(arr[0])
    for (let i = 1; i < arr.length; i++) {
        // 新抓的牌
        let A = arr[i]
        for (let j = handle.length-1; j>=0; j--) {
            let B = handle[j]
            if (A > B) {
                handle.splice(j+1, 0, A)
                break
            } 
            if (j === 0) {
                handle.unshift(A)
            }
        }
    }
    return handle
}

快速排序

原理：选取出数组的中间项，在原数组中进行比较，大于基数放右边，小于基数放左边。

Javascript

function quickSort(arr) {
    // 当arr小于等于一项时，不处理
    if ( arr.length <= 1) {
        return arr
    }
    let midIndex = Math.floor(arr.length/2)
    // splice 返回的是一个数组
    let mid = arr.splice(midIndex,1)[0] 
    let left = [],
        right = []
    for (let i = 0; i < arr.length; i++) {
        let item = arr[i]
        item < mid ? left.push(item) : right.push(item)
    }
    return quickSort(left).concat(mid, quickSort(right))
}