有关前端代码的一些总结

1、flex布局兼容写法：

display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

justify-content: center;
-webkit-justify-content:center;
-webkit-box-align: center;
align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-webkit-align-items: center;

2、fixed布局在ios下不兼容问题：

解决办法：使用absolute布局；思路，将页面主体部分（可能会滚动）放入一个div里，让这个div内部进行滚动，需要固定的内容放到另一个div里，两个div设置absolute布局；

3、给数据元素排序（按特定的属性值，倒序）：

_reverse : function(data){
        return function(a,b){
            var v1 = a[data];
            var v2 = b[data];
            return v2 - v1;
        }
    }

调用：

arrlist.sort(baseData._reverse("_distance"));// arrlist是一个对象数据，根据？_distance属性值倒序

4、div水平垂直居中：利用flex布局解决

在父元素上设置以下样式（注意兼容性写法，第一条）：

display: flex; 

flex-direction: column;//设置项目的排列方向为纵向（竖着的,根据上下文设置的）

justify-content: center; // 水平居中

align-items: center; // 垂直居中

5、根据数组下标删除数据元素（扩展Array）：

Array.prototype.remove=function(dx){
 if(isNaN(dx)||dx>this.length){
  return false;
 }
 for(var i=0, n=0; i < this.length; i++){
  if(this[i]!=this[dx]){
   this[n++]=this[i]
  }
 }
 this.length-=1
}

6、获取浏览器地址栏参数：

/**
 * 获取浏览器地址栏参数
 * @param name 要获取的参数名称
 * @returns {null}
 */
function getQueryString(name) {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null) {
                return  unescape(r[2]);
        }
        return null;
}

7、checked属性使用注意事项：

如果设置按钮被选中状态，设置checked属性设置值为checked即可，但是不选中状态则不能设置checked属性值为空或者false，只要设置了checked属性，不管值是多少，按钮都会被选中。

8、引入的js文件放到body元素内容的后面，这样避免加载很多js脚本时，页面内容还没有渲染，给用户不好的体验

9、在函数内部定义的变量要加var ，不加var就变成全局变量了；