sidebar技术实现流程图

侧边栏实现功能

1、HTML速写方式：

    ul>#id.item*6

2、侧边栏全屏高度css样式：

    position:fixed;
    min-height:100%；

3、script标签速写：

    script[src="sidebar.js"]

4、快模式

一种立即执行的匿名函数，用括号将函数括起来，代表一个单元，在后面加一个括号，代表立即执行

(function(){})();

5、构造函数与其他函数的区别：构造函数变量名首字母大写。在调用构造函数时没有使用new关键字，则返回对象为空、构造函数中的this指向window、向window中添加属性。

6、一般会把对象的行为放在构造函数的原型链中，不熟悉可以去学习JavaScript的集成方式。

7、event对象、this的使用规则？

在函数外部使用this，this就是指window对象，全局变量可以看做window对象的属性：

<script>
    var x = 1;
    //结果都是1
    alert( window.x );
    alert( this.x );
</script>

在JavaScript中，this是造成很多错误的根源，在函数的内部，this是指向函数的调用者的。在click事件发生后，系统会自动调用这个函数，则函数的调用者就是系统，而不是sidebar。

解决办法：闭包。JavaScript最出色的特性就是闭包，闭包的基础特性是可以调用函数外部的对象。所以一般情况下，在处理事件响应函数的this时，在外部定义一个变量，将它指向this。

1、直接使用class属性设置图标：

直接使用<span class="glyphicon glyphicon-user"></span>得到图标效果，需要引入bootstrap的文件：

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

animation-name: sml; // 设置动画的名字
animation-direction: 1s; // 设置动画持续时间
animation-iteration-count: 1; // 动画执行次数
animation-fill-mode: forwards; // 设置动画结束之后保持在结束的状态