前台开发总结04——2017.04.13

1、js闭包经典示例，如下所示：

var db = (function() {
// 创建一个隐藏的object, 这个object持有一些数据
// 从外部是不能访问这个object的
var data = {};
// 创建一个函数, 这个函数提供一些访问data的数据的方法
return function(key, val) {
    if (val === undefined) { return data[key] } // get
    else { return data[key] = val } // set
    }
// 我们可以调用这个匿名方法
// 返回这个内部函数，它是一个闭包
})();

db('x'); // 返回 undefined
db('x', 1); // 设置data['x']为1
db('x'); // 返回 1
// 我们不可能访问data这个object本身
// 但是我们可以设置它的成员

2、某父元素设置定位后，可以对其子元素设置浮动，此时，子元素页面显示的优先级为其父元素的z-index的值。
钟表中刻度显示的原理：先配置transform的rotate属性，将360度的表盘60等分，即创建60个div元素，然后在div中配置子元素，通过子元素来在页面上显示出刻度的那一条杠。

3、js中代码性能优化
多使用局部变量，少使用全局变量，减少全局查找，尽可能的使用闭包来减少全局变量的使用
少使用循环，尽可能的一次循环进行多次操作；而不是进行多次循环。
可使用对象来实现switch的功能
使用三目运算符代替条件分支
多使用setInterval()来代替setTimeout()，因为setTimeout()每次都会定义一个计时器，而setInterval()则只定义一个计时器。
尽可能的不要使用new来创建对象，可通过 return {……}; 的方式。
多使用true和false来标记对象，而不是0和1

4、一个WEB应用通常是三层架构，包括：数据层、业务层、表示层，而Spring MVC仅是表示层的一部分，

5、在页面元素中，若设置子元素的height属性为百分比，那么其父元素必须有确定的height属性。若这里父元素只有min-height或者max-height属性或者height属性值为auto，没有height属性，那么其子元素的height:100%;的值为0.

6、css3查询———— @media
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

@media screen and (min-width:900px) and (max-width:1200px){
    /*具体的css样式代码*/
    div{
        background-color:gray;
    }
}

详情请查看：http://www.runoob.com/cssref/css3-pr-mediaquery.html