最近项目中的一些总结

页面布局

在页面的设计中，经常会碰到要求footer内容固定在底部。这时候的难点在于body的高度有时候超过了100%有时候低于100%，导致定位上的困难。个人采用的方法如下：
页面结构为:

   <body>
    <div class="wrap">
        <div class="main">
           <h1> this is main content.</h1>
        </div>
    </div>
    <div class="footer">
        <h1>this is footer.</h1>
    </div>
</body>

css代码为：

*{
    margin: 0;
    padding: 0;
}
html,body{
     100%;
    height: 100%;
}
.wrap{
     100%;
    min-height: 100%;
    margin-bottom: -100px;
}
.main{
    padding-bottom: 100px;
}
.footer{
     100%;
    height: 100px;
    background-color: #abcdef;
}

显示效果如下:

2、scss的使用

第一次正式使用scss，感觉scss的语法还是相对比较简单的，使用方法也不难。同时，能够极大地改善css书写的效率。scss的使用需要安装ruby，然后使用gem安装scss,gem install sass,也可以使用淘宝的镜像，具体安装方法详见:sass的安装.
scss的编译工具个人一般使用国人开发的一款软件koala.个人感觉挺好用的，也可能是没试过其他编译工具的原因。

@charset "UTF-8";
// 设置charset以保证不会出现注释字符错误
/*设置变量*/
$var:12px;
$com:common-class;
body{
    font-size: $var;
}
// 应用于class和属性
#{$com}-1{

}
// 嵌套
body{
    .wrap{
        .test{
             100%;
        }
    //同级使用符号&
    &:hover{
        color:red;
    }
    }
}
// 一维数组
$arr1:10px 9px 8px 11px;
// 二维数组
$arr2:(10px 9px) (8px 11px);
//map
$map:(p:20px,h2:30px);
@each $header,$size in $map{
    #{$header}{
        font-size: $size;
    }
}


//mixin
//个人感觉有点像变量的扩展，公用代码块，便于批量修改
@mixin common-block {
    margin: 0 auto;
    padding: 0;
}
body{
    @include common-block;
}
//继承
h3{
    @extend .func;
    line-height: 30px;
}

// 函数
@function func1($px) {
    @return $px+20px;
}
.func{
    font-size: func1(20px);
}


// 条件判断
$lt1:20;
$lt2:33;
.if{
    @if $lt1>$lt2{
        font-size:#{$lt1}px;
    }@else{
        font-size: #{$lt2}px;
    }
}
$list:1 2 3 4;
// for循环
@for $i from 1 through 3{
    .item-#{$i}{
         $i*200px;
    }
}
@each $i in $list{
    .each-#{$i}{
         $i*200px;
    }
}

编译结果如下:

@charset "UTF-8";
/*设置变量*/
body { font-size: 12px; }

body .wrap .test {  100%; }
body .wrap:hover { color: red; }

p { font-size: 20px; }

h2 { font-size: 30px; }

body { margin: 0 auto; padding: 0; }

h3 { line-height: 30px; }

.func, h3 { font-size: 40px; }

.if { font-size: 33px; }

.item-1 {  200px; }

.item-2 {  400px; }

.item-3 {  600px; }

.each-1 {  200px; }

.each-2 {  400px; }

.each-3 {  600px; }

.each-4 {  800px; }

以上是自己最近使用scss的一点心得，出错之处还望不吝指出。

JavaScript

1、数组的运算

项目中越来越多用到数组的运算，总结一下自己用到的内容:

数组相加，使用concat即可，或者使用slice
数组相减:

function arr_dive(aArr,bArr){   //第一个数组减去第二个数组
    if(bArr.length===0){return aArr;}
    var diff=[];
    var str=bArr.join("&quot;&quot;");
    for(var e in aArr){
        if(str.indexOf(aArr[e])==-1){
            diff.push(aArr[e]);
        }
    }
    return diff;
}

数组添加使用push，删除最后一个元素使用pop
数组排序使用sort或者reverse
数组转化为字符串str=arr.join("");

2、avalon的使用

这是一个类似于angular的js框架，也是使用的MVVM架构，不过学习曲线相对于ng来说简单了不止一点半点，可以说是看下教程基本上就可以入门了。我在项目中使用的是avalon1，在功能上还有很多不完善的地方，不过就数据的双向绑定以及减少DOM操作上来说，收益良多。
使用了avalon之后，在进行复杂交互操作的时候可以进行函数式编程，以避免使用jquery时，在进行dom操作的时候较容易出现bug的情况（我自己的感受是这样的）。具体的avalon教程请参阅迷你MVVM框架 avalonjs 入门教程

其他

1、不要让框架限制自己的思路。框架本身并不是完美的，不能实现所有的定制功能。而且，框架本身可能也不具有实现特定功能的能力。所以，脱离框架进行操作反而能提高自己的工作效率。

2、页面所有的图标使用iconfont以减少资源的请求，可以提高页面的响应速度，减少带宽的消耗。

3、对于兼容性要求较高的页面，避免使用较新的css属性和布局方法（例如：ios微信6.2不支持flexbox布局）

4、在javascript中，添加到页面上的事件处理越多，性能越差。所以，在存在列表中添加事件时，尽量使用事件代理以提高页面性能。